Qi Theme

Qi Theme – a completely free WordPress theme with 100 modern demo websites

Learn More
Sign up for our newsletter and be the first to get all the latest Qode news and updates.
BACK TO TOP

How to Style Contact Form 7 Forms in WordPress

How to Style Contact Form 7 Forms in WordPress

Even though contact forms are an essential method for engaging with visitors, most WordPress webmasters struggle to properly style them. In most cases, forms have a default styling, which is provided by the browser. Those forms tend to be sparsely stylized and can differ a lot from your site design. On the other hand, the WordPress theme you’re using could contain CSS code that stylizes the forms, which can help with your stylization problem. But, even a theme-specific style might clash with your website’s brand.

Therefore, it is up to you to properly style Contact Form 7 and make yours stand out from the crowd. And this article is here to help you do that. Within it, we will cover various aspects of creating the code necessary for form stylization. We focused on using a contact form created by the Contact Form 7 plugin as the showcase, but most of what we discuss can be applied to any form. Also, depending on your existing knowledge of CSS, you might need to do some additional reading to understand the code fully.

Before we begin

In this article, we will cover how to create styles applicable to all your CF7 forms, as well as how to stylize a specific form. To follow along with this article, you will need to have the Contact Form 7 plugin installed and have at least one form on your website created with this plugin. Then, you will be able to use that form to apply the methods we discuss below.

Please note, the CSS you create during this process should be added inside Appearance > Customize > Additional CSS. If you aren’t comfortable with your current CSS skills, you should brush up on them beforehand as some CSS knowledge is necessary for grasping the topics in this article. Once you’ve done that, you can proceed to the main part of the article below.

Free Qi Addons

Creating site-wide form styles

For this article, we created the following CSS, which would apply a specific style to all Contact Form 7 forms on your website.

.wpcf7 {
background-color: #6ec1e4;
padding: 30px;
}
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {
font-size: 16px;
color: #000000e8;
background-color: #E9ECF5;
border: 1px solid #E9ECF5;
border-radius: 10px;
}
.wpcf7 .wpcf7-submit { 
background-color: #E9ECF5;
border: 1px solid #E9ECF5;
color: #1f1f1f;
width: 100%;
}

That code would produce the following output.

Contact Form 7 Preview

However, this is merely an example of CSS you can use. So, you shouldn’t rush to copy and paste it to your website without understanding how it was made. Since the CSS for styling forms should be made on a case-by-case basis, you will most likely need to adapt this or create one from scratch to use on your CF7 forms. To help you do that, we will explain why and how we created the code above, going one part at a time.

One of the most important requirements for creating CSS code, in general, is knowing how to inspect an element using your browser’s developer tools. As such, we will cover that step first. There are several ways you can access the developer tools (e.g. using keyboard shortcuts) but the most universally applicable way would be using mouse clicks.

To inspect a certain element, right-click on it and select the Inspect option from the menu that appears. In the case of a Contact Form 7 form, clicking anywhere within the form will work.

Contact Form Inspect

This will open your browser’s developer tools and place you within the Elements tab, where the HTML code of the element you clicked on will be highlighted. We will reference this process many times during the article, so you should get comfortable with inspecting page elements.

Once you’ve opened the developer tools, the first thing you should do is to look for the HTML element that corresponds to the whole form. Since Contact Form 7 forms have a well-known structure, you will be looking for an element that has the following starting HTML code:

<div role="form" class="wpcf7"

Also, when you hover over the HTML, the entire form should be highlighted.

Inspect Contact Form

Furthermore, as you can see on the screenshot, the contact form element has a custom class and a unique ID. We will only use the class in this section and will touch on the ID later in the article. For now, we’re using the class because all Contact Form 7 forms share the wpcf7 class and, with it, we can create CSS code that will affect all your site forms in the same way.

.wpcf7 {
// CSS code goes here
}

You might recall that this is how the CSS we created for this article starts. The period used before the class name signifies that this is a CSS class selector. This means that the code that follows it will affect all of the CF7 forms on the website since they all share the same class.

In the code we created, the wpcf7 class is followed by CSS that will give your forms a background color and a padding of 30px on all sides.

.wpcf7 {
background-color: #6ec1e4;
padding: 30px;
}

Now let’s take a look at how corresponding CSS selectors for all the form fields were created.

To create the CSS selector for the text field, inspect a text field as described above. In the screenshot below, you can see it is a simple textual input field.

Inspect Contact Form

To reference it, you can use the following CSS selector – input[type=”text”]. However, this will select all textual inputs, including the ones that don’t belong to the form. To avoid that, you need to put the class selector for Contact Form 7 forms we previously mentioned before this. Meaning, you can create CSS code for textual form inputs in the following format:

.wpcf7 input[type="text"]{
// CSS rules go here
}

Similarly, you can find the equivalent pseudocode for email fields.

Inspect Elements
Inspect Elements CF
.wpcf7 input[type="email"]{
// CSS rules go here
}

As for the textual areas, they are simply referenced by their HTML element—textarea, preceded by the form class name.

Inspect Elements
Inspect Elements CF

Meaning, if you want to target all CF7 form text areas, you can use the pseudocode given below.

.wpcf7 textarea{
// CSS rules go here
}

In our case, since we wanted to apply the same styles to the text and email fields, as well as the textual area, we used a compound CSS selector. This is done by using all three selectors separated by commas (.wpcf7 input[type=”text”], .wpcf7 input[type=”email”], .wpcf7 textarea). The styles that we added include setting a font size, and color for the text within the fields, as well as background color, border, and border-radius to the fields themselves making them slightly rounded on the edges.

.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {
font-size: 16px;
color: #000000e8;
background-color: #E9ECF5;
border: 1px solid #E9ECF5;
border-radius: 10px;
}

Finally, to figure out the appropriate CSS selector for the Send Message button, you need to inspect it.

Inspect Elements
Inspect Elements CF

As you can see in the screenshot, this button has a custom class called wpcf7-submit, which is a Contact Form 7 specific class that you can use to reference the button. To make sure your CSS is highly specific, we advise using the form custom class—wpcf7 beforehand, as well. In that case, the pseudocode for targeting all CF7 form submit buttons could look like the following:

.wpcf7 .wpcf7-submit { 
// CSS rules go here
}

In terms of the CSS we created for this article, we stylized the button to have a background and border, set the color of its text, and made it stretch across the full width of the form.

.wpcf7 .wpcf7-submit { 
background-color: #E9ECF5;
border: 1px solid #E9ECF5;
color: #1f1f1f;
width: 100%;
}

With that being said, there are several other elements that can be used inside a contact form, which we chose to omit from our example. But if you decide to use them, you can create the appropriate CSS selector for all of them the same way we’ve described above.

Creating form-specific styles

In most cases, creating one type of CSS code to stylize your CF7 forms won’t be enough. Forms with different purposes will require different styles to stand out on your pages. As such, you will need to create additional CSS code for specific forms.

In this section, we will explain several tips on how to create form-specific styles. Since the hardest part in creating these styles lies in finding the appropriate CSS selectors that target specific forms or form fields, we will focus on that aspect the most.

The easiest way to create form-specific styles is to use the specific ID every form has instead of the custom class that is shared by all CF7 forms.

To find out the specific ID of a CF7 form, inspect it and navigate to the HTML element that wraps the form. The element will have the following HTML part:

<div role="form" class="wpcf7" id="form-ID-is-here"

You will find the ID within the quotation marks of the id attribute.

Inspect Elements

Then, to stylize a specific form with that ID, you will need to use the CSS code in the following format:

#form-id {
// CSS rules go here
}

For example, if we wanted to stylize the form shown on the screenshot above, we would use the following pseudocode:

#wpcf7-f1115-p1635-o1 {
// CSS rules go here
}

Furthermore, to reference the fields within that specific form, we would have to change the wpcf7 class with the wpcf7-f1115-p1635-o1 ID, as well. Meaning, if we wanted to apply the previously created CSS to this form only, then the code would look the like this:

#wpcf7-f1115-p1635-o1 {
background-color: #6ec1e4;
padding: 30px;
}
#wpcf7-f1115-p1635-o1 input[type="text"], #wpcf7-f1115-p1635-o1 input[type="email"], #wpcf7-f1115-p1635-o1 textarea {
font-size: 16px;
color: #000000e8;
background-color: #E9ECF5;
border: 1px solid #E9ECF5;
border-radius: 10px;
}
#wpcf7-f1115-p1635-o1 .wpcf7-submit { 
background-color: #E9ECF5;
border: 1px solid #E9ECF5;
color: #1f1f1f;
width: 100%;
}

As we’ve mentioned before, the CSS in this article isn’t meant to be simply copy-pasted. CSS for form stylization should be created on a case-by-case basis. Also, when creating CSS for a specific form, you wouldn’t use the same CSS that is used for all other forms because that will make them identical. Generally speaking, you might use a part of the CSS from one form and edit it to fit another form. The point you need to remember is to use a form-specific ID to narrow down the scope of your CSS. Now that we clarified that, we can move on.

There are two other tricks you can use for creating form-specific styles. The first is to edit the HTML structure of the CF7 form by inserting the appropriate wrapping HTML elements. By adding specific classes or IDs to these HTML elements, you should find creating form-specific styles much easier.

For example, we wrapped fields of a newsletter subscription form with a div element and assigned two custom classes to it: qodef-newsletter and qodef-newsletter-about-us. You can use either of those classes (or even both) to reference that specific contact form.

To add a new custom class, you need to edit the structure of the contact form. To do so, navigate to Contact > Contact Forms, select the form you wish to edit, and wrap it with appropriate HTML elements.

Specific CSS CF

You can then use the assigned classes or IDs to reference that specific form. In the example shown above, we used two custom classes, so you can choose between the following CSS selectors:

  • .qodef-newsletter
  • .qodef-newsletter-about-us
  • .qodef-newsletter.qodef-newsletter-about-us

Additionally, you can even use them in conjunction with the CF7 form class selector we previously discussed—wpcf7 or the form ID, to make them more precise. Doing this can prove useful if you have conflicting CSS that comes from your theme or plugins.

With that being said, the second trick we wanted to mention ties directly into the first one. If you look closely at the screenshot above, you can see that we wrapped the submit button with a div element and assigned a custom class to it—qodef-newsletter-button.

This goes to show that the approach mentioned above isn’t limited to forms only. You can reference specific fields within a specific form by wrapping them with appropriate HTML elements and using the assigned classes or IDs as CSS selectors. For example, to reference the submit button, you could use the following CSS selector .qodef-newsletter-button .wpcf7-submit.

The final thing we want to mention is that you can also add classes and IDs to the form fields directly instead of adding them to the wrapping HTML element. This is done by adding the class:class-name-here or id:id-name-here attributes to the form fields, with the appropriate class and ID names inserted. An example of both can be seen in the screenshot below.

Specific CSS Fields

To reference those fields in your form-specific CSS, you would simply use those classes or IDs. For example, to reference the email field from the screenshot, you can use .specific-email-field as the CSS selector. To reference the submit button, you can use #specific-button as the selector.

This concludes the section on tips you can use to create a form-specific CSS selector. Now that you have a better grasp of this topic, you can style Contact Form 7 forms by applying common CSS rules to those specific selectors.

form-specific-selector {
// CSS rules go here
}
Qode Themes: Top Picks
Bridge New Banner
Bridge

Creative Multi-Purpose WordPress Theme

Stockholm WordPress Theme
Stockholm

A Genuinely Multi-Concept Theme

Startit WordPress Theme
Startit

Fresh Startup Business Theme

Final Thoughts

Having contact forms on your WordPress website is a crucial step in properly interacting with your visitors. However, styling those forms to seamlessly blend with your current brand is a challenge for any webmaster. This is where our article comes in—to provide you with the ideas needed to style any form. Within it, we explore how to use specific classes and IDs to target specific forms or form parts. As a practical example, we created CSS to style a Contact Form 7 form. Whether you’re using that plugin or any other contact form plugins, you will be able to use all the approaches we described to create a custom style for your form in a matter of minutes.

Post your comment

Comments0