I fixed the appearance of “Contact Us” created by Contact Form 7 plugin with CSS.

Contact Form 7 uses CSS to modify the appearance as standard

Contact Form 7 is a plugin that makes it easy to create a “Contact Us” form or other input forms.

He is also the developer of Bogo, a multilingual plugin.

In Japan, this plugin is probably the de facto standard for creating “contact” forms.Many people may also use it as a plugin for reCAPTCHA.

The author himself asked us to “fix the look of this plugin with CSS”.

Contact Form 7 doesn’t provide any customization for styling. Editing CSS style sheets is the best method to style contact forms.

So we fixed the appearance with CSS.

Modified CSS

The standard input field has no padding for the font size and looks cramped.We have reworked it to have a rounded appearance with a little more room.

The content to be included in the child theme’s style.css.

/* 20250224 Contact Form 7 CSS customize */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
	font-size: var(--wp--preset--font-size--large);
	width: 80%;
	border-radius: 10px;
	padding: 10px 10px;
	border: 1px solid #516028;
	margin-top: 5px;
	margin-bottom: 20px;
	background-color: #ffffff; /* 白 */
	resize:none;
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus {
	border:2px  solid #516028;
}
.wpcf7 input[type="text"]::placeholder,
.wpcf7 input[type="email"]::placeholder,
.wpcf7 textarea::placeholder {
	color: #c3c3c3;  /* light gray */
}
.wpcf7 input[type="submit"] {
	font-size: var(--wp--preset--font-size--large);
	border-radius: 10px;
	padding: 10px 20px;
	background-color: #516028;
	color: white;
	cursor: pointer;
	border: 1px solid #516028;
}
.wpcf7 input[type="submit"]:hover {
	color: #516028;
	background-color: #dae7bd;
}
.wpcf7 span.wpcf7-not-valid-tip {
    width: 80%;
}
.wpcf7 div.wpcf7-response-output {
    width: 80%;
}

Here is a brief description of the contents.

• Lines 2-14 : Correct the appearance of the input area
• Lines 15-19 : make the border thicker when selecting
• Lines 20-24 : The color of the string displayed before input is light gray
• Lines 25-37 : “Submit” button appearance change, hover to reverse
• Lines 38-43 : for error messages

It will now look like the image above.

Adding Placeholder Text

In Contact Form 7 settings, placeholders can be set for each form.A placeholder is a temporary string of text that is displayed until a character is entered.

<label> Full Name
    [text* your-name autocomplete:name placeholder "Your Name"] </label>

<label> Mail Address
    [email* your-email autocomplete:email placeholder "Your e-mail address"] </label>

<label> Title
    [text* your-subject placeholder "Title"] </label>

<label> Message body (optional)
    [textarea your-message placeholder "Please write your message here"] </label>

[submit "Submit"]

If placeholder is set, the string that follows becomes placeholder text.It is light gray to make it less noticeable.

Modifications for multilingual pages

In the editing of the Contact Form 7 plugin, there is a list of messages called “Messages” that are displayed in various situations.

This site is multilingual, and we have created “Contact Us” forms for each language.All of its messages have also been rewritten in each language.Now everything is displayed in each language, including errors.

Contact Form 7 Notes

A message appears at the top of the Contact Form 7 plugin configuration page.

Attention reCAPTCHA users: Google has a plan to make all reCAPTCHA users migrate to reCAPTCHA Enterprise.

It is written that the next version will support the Google Cloud version of reCAPTCHA.It is also announced that Cloudflare’s Turnstile will be supported as an alternative to reCAPTCHA.

The above figure shows Turnstile already applied.This will be discussed in a separate article.

Musubi

The appearance of “Contact Us” created with Contact Form 7 has been modified with CSS.The space between the text and the frame was made roomy, and the corners were rounded.

The same method was used to fix the comment posting section.

On a smartphone, you can go to the “Contact Us” form from the footer menu.Please use this form to contact us.