Contact Form 7 (CF7) is one of the most popular plugins available for WordPress. It allows users to quickly create customised forms, anywhere on a WordPress website.
While the forms are easy to create and implement, the fields within them are styled minimally (allowing them to blend in with most websites). As it turns out, it’s not the ugliest thing in the world, but it’s not all that attractive either.
This article shows users, skilled at using HTML and CSS, how to style CF7 forms to their particular requirements.
- Default Contact Form 7 Form
- The Form Process
- HTML
- Standard HTML Form Elements
- HTML code + CF7 Tags in CF7 Form area
- HTML code on actual website
- Compare these two bits of code
- Use CSS classes & ids generated by CF7
- Use Firebug or Chrome Dev Tools to examine your CF7 form
- CSS
- Default CF7 CSS style
- Appearance of CF7 forms is controlled by CSS in your current WordPress theme
- Use a Child Theme to make changes to your CF7 forms CSS
- Targeting CSS changes to CF7 forms
- Using CSS to change the appearance of the default CF7 form
- Targeting Specific CF7 Forms
You will need to be skilled at using HTML and CSS to follow along in this article. If that description does not fit you, you can learn all you need to know about both HTML and CSS at http://www.w3schools.com/ and come back to this article when you’ve done that.
You will also need to be skilled at using Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail to follow along in this article. If that description does not fit you, you can learn about Firebug at – http://www.evotech.net/blog/2007/06/introduction-to-firebug/ or Chrome Dev Tools at – https://developers.google.com/chrome-developer-tools/ and come back to this article when you’ve done that.
Default Contact Form 7 Form
We use the default CF7 form (installed automatically on every install of the CF7 plugin) as the basis of this article.
The actual look of this default form will depend on the current WordPress theme used on your website and the CSS styling that theme applies to standard HTML form elements.
In this case our website uses the standard WordPress Twenty Eleven theme and the default Contact Form 7 form appears as follows:
The appearance of this default form will depend on the current WordPress theme used on your website and the CSS styling that theme applies to standard HTML form elements.
In this article we’ll be demonstrating how to change the style of this form, using HTML and CSS, to meet particular requirements.
The Form Process
HTML forms are a common part of many websites. While the CF7 plugin makes it quick and easy to create forms with little or no knowledge of HTML, CF7 forms are based firmly on the more general HTML form process – see http://www.w3.org/TR/html401/interact/forms.html.
HTML includes a number of elements which are specifically designed for use in forms – see http://www.w3schools.com/html/html_forms.asp. CF7 provides support for most of the commonly used HTML form elements, including some recently added which some new HTML5 elements.
The appearance of each CF7 form depends on the HTML form elements used and the CSS styling applied to these elements in your current WordPress theme.
HTML + CSS = FORM
HTML for CF7 Form
CSS for CF7 Form
HTML – form content and layout
CSS – form presentation (style).
HTML
The HTML in each CF7 form is created by the CF7 plugin based on information supplied by you in the Form section on the CF7 interface.
Click on image to open larger version
Standard HTML Form Elements:
The default Contact Form 7 form uses paragraph elements (<p>Paragraph Content</p>) as the basis for the form. While this is probably the simpliest way to create a form, it has a number of shortcomings, which we intend to discuss in further future articles.
You can in fact use any HTML elements you want in the Form section on the CF7 interface and this is a key part of building CF7 forms that match your functional and appearance requirements.
With practice you can learn how to create increasingly complex CF7 forms by combining your HTML elements with those added automatically by the CF7 plugin.
HTML code + CF7 Tags in CF7 Form area:
The box below shows the content of the Form section of the CF7 interface for the default CF7 form.
<p>Your Name (required)<br /> </p> <p>Your Email (required)<br /> [email* your-email] </p> <p>Subject<br /> </p> <p>Your Message<br /> [textarea your-message] </p> <p>[submit "Send"]</p> |
As you examine this code you should notice that it includes:
- Standard HTML Elements – <p>Your Name (required)<br />
- CF7 Tags – ‘ text “your-name” ‘
The standard HTML Elements you add in this section are output largely unchanged by the CF7 plugin. CF7 then uses the CF7 Tags to create fully functioning standard HTML elements which can include a number of additional HTML attributes.
If you are not sure how Contact Form 7 uses CF7 Tags you can read all about them at Contact For 7 Tag Syntax.
HTML code on actual website:
The box below shows the complete HTML code generated on the actual website, based on information supplied by you in the Form section on the CF7 interface and the additional HTML code added by the CF7 plugin.
HTML (supplied by you) + HTML (added by the CF7 plugin) = FORM Content & Layout
<div id="wpcf7-f8-p275-o1" class="wpcf7"><form novalidate="novalidate" class="wpcf7-form" method="post" action="/cf7trial.project.buzztone.com.au/development/styling-contact-form-7-forms/#wpcf7-f8-p275-o1">
<div style="display: none;">
<input type="hidden" value="8" name="_wpcf7">
<input type="hidden" value="3.4.1" name="_wpcf7_version">
<input type="hidden" value="wpcf7-f8-p275-o1" name="_wpcf7_unit_tag">
<input type="hidden" value="1cc9dc2c57" name="_wpnonce">
</div>
<p>Your Name (required)<br>
<span class="wpcf7-form-control-wrap your-name"
><input type="text" aria-required="true" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" value="" name="your-name"></span> </p>
<p>Your Email (required)<br>
<span class="wpcf7-form-control-wrap your-email">
<input type="email" aria-required="true" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" size="40" value="" name="your-email"></span> </p>
<p>Subject<br>
<span class="wpcf7-form-control-wrap your-subject">
<input type="text" class="wpcf7-form-control wpcf7-text" size="40" value="" name="your-subject"></span> </p>
<p>Your Message<br>
<span class="wpcf7-form-control-wrap your-message">
<textarea class="wpcf7-form-control wpcf7-textarea" rows="10" cols="40" name="your-message"></textarea></span> </p>
<p><input type="submit" class="wpcf7-form-control wpcf7-submit" value="Send"><img class="ajax-loader" src="http://cf7trial.project.buzztone.com.au/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden;"></p>
<div class="wpcf7-response-output wpcf7-display-none"></div>
</form>
</div>
Compare these two bits of code:
Take a moment to compare these two bits of code and notice where the information from the form section of the CF7 interface has made it into the HTML on the actual website.
As you can see, Contact Form 7 adds a number of CSS classes & ids to the individual HTML form elements. These are added to allow users, skilled at using HTML and CSS, to style their CF7 forms to their particular requirements.
If you unable to understand easily what is going on in the code included in these two boxes, you probably don’t have adequate skills to change the style of CF7 forms, without at least some external support or advice.
In that case you should continue to learn what you need to know about both HTML and CSS at http://www.w3schools.com/ and come back to this article when you’ve done that.
Use CSS classes & ids generated by CF7:
It makes sense for you to target these individual CSS classes & ids within your CF7 forms. Use CSS inheritance to ensure that your CSS changes don’t inadvertently affect other elements on your website.
WordPress theme developers also can use these CSS classes & ids to build support for the CF7 plugin within their theme. As one of the most popular plugins in WordPress, with over 12 million downloads, it makes sense for theme developers to do this.
You can also give your HTML form elements individual classes & ids within the CF7 tags in the Form section of the CF7 interface. This can be very useful when you have number of elements you want to style the same way.
CF7 tag with ID & Class
Use Firebug or Chrome Dev Tools to examine your CF7 form
At this point you should use Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail.
Default CF7 form in Firebug – Click on image to open a larger version
You will need to be skilled at using Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail to follow along in this article.
If that description does not fit you, you can learn about Firebug at – http://www.evotech.net/blog/2007/06/introduction-to-firebug/ or Chrome Dev Tools at – https://developers.google.com/chrome-developer-tools/ and come back to this article when you’ve done that.
Use one of these tools to explore all the HTML form elements in your CF7 form and see how each element is being styled in detail by the CSS in your current WordPress theme. In particular take note of the various style sheets that are contributing to the final style used and how individual style elements are being overwritten (or not) by the CSS hierarchy.
Once you understand how the HTML and CSS is configured in your CF7 form, you can begin to plan the CSS changes you need to change the appearance of the form to suit your requirements.
CF7 Form Structure:
We used Firebug to produce the following diagram which shows the overall structure if the default CF7 form we are using in this article.
Click on image to open larger version
With experience, using Firebug or Chrome Dev Tools should give you all the information you need to change the style of yor CF7 forms quickly and easily, but it may definately help you initially to produce a hand drawn paper sketch similar to this diagram.
CSS
Default CF7 CSS style:
These is a common misconception (particular among users with limited WordPress experience) that the CF7 plugin controls the appearance of CF7 forms though the plugins CSS style sheets.
In truth the Contact Form 7 plugin uses only very minimal CSS styling to allow CF7 forms to blend in with most websites. For a listing of complete style sheet used by the CF7 plugin see Default CF7 CSS style.
Appearance of CF7 forms is controlled by CSS in your current WordPress theme:
The actual look of CF7 forms on your website will depend largely on the current WordPress theme used and the CSS styling that theme applies to standard HTML form elements.
To change the appearance of your CF7 forms to suit your requirements, you will need to:
- Understand what CSS styling is being applied to standard HTML form elements in your CF7 forms via the CSS of your current WordPress theme;
- Adjust the CSS used by your current theme for these HTML form elements.
The appearance of CF7 forms on your website will depend largely on the current WordPress theme used and the CSS styling that theme applies to standard HTML form elements.
Use a Child Theme to make changes to your CF7 forms CSS:
The most common and preferred method to makes changes to CF7 form styling is to create a Child Theme.
For a simple explanation of WordPress Child Themes see http://wplift.com/customise-wordpress-child-theme.
Make any necessary additions to the CSS in the child themes style.css only, rather than directly in the themes styles.css. That way you don’t loose your changes when you update the theme.
The most common and preferred method to makes changes to the CSS styling in your current WordPress is via a Child Theme.
For this article we have created a child theme based on Twenty Eleven. The style.css file of the child theme imports all styling from the parent theme by including the following CSS code at the top of the child theme’s style.css file.
/* Import Parent Theme */
@import url('../twentyeleven/style.css');
Any CSS changes that alter the appearance of our CF7 forms are added below this. Due to the CSS loading heirachy, any CSS changes made here will overwrite styles previously set in the parent theme.
Targeting CSS changes to CF7 forms:
When making CSS changes, to give us the appearance we are looking for in our CF7 forms, we want to make sure that our CSS changes don’t inadvertantly effect other elements on your website.
The preferred way to do this is to use CSS inheritance to target the relevant HTML elements within your CF7 forms only.
For CF7 forms we have several ids & classes which can be used to give us the necessary targeted inheritance:
- .wpcf7
- .wpcf7-form
- .wpcf7-form-control
- .wpcf7-form-control-wrap
- .wpcf7-text
- .wpcf7-email
- .wpcf7-textarea
- .wpcf7-submit
For a list of ids & classes used by the CF7 plugin see CF7 CSS Classes
For example we can use the class .wpcf7-form to change the appearance of all HTML input text elements within the default CF7 form only:
.wpcf7-form input {
background: #fff;
border: 1px solid #bbb;
color: #4F4F4F;
}
To change the background colour of the Send button when the mouse pointer hovers over the button:
.wpcf7-form input:hover[type="submit"] {
background:#4f2a0f;
cursor:pointer;
color:#fff;
}
Using CSS to change the appearance of the default CF7 form:
Using the techniques described in this article, we can use the following CSS to change the appearance of the default CF7 form.
.wpcf7-form { background:#dcc8a5; padding:20px; border:2px solid #f6efdf; margin-bottom:30px; border-radius:7px; } .wpcf7-form input { background:#f6efdf; padding:5px 7px; border:3px solid #ccb58c; margin-bottom:8px; border-radius:7px; } .wpcf7-form textarea { background:#f6efdf; padding:5px 0px 5px 7px; border:3px solid #ccb58c; border-radius:7px; } .wpcf7-form p { color:#4f2a0f; margin-top:10px; } .wpcf7-form .wpcf7-submit { background:#4f2a0f; cursor:pointer; padding-left:15px; padding-right:15px; color:#fff; border-radius:7px; } |
Using the changed CSS given above, the default CF7 form now looks as shown below:
Targeting Specific CF7 Forms
Each CF7 form has a unique id which can be targeted in your CSS changes.
<div id="wpcf7-f47-p339-o1" class="wpcf7"> <form class="wpcf7-form" novalidate="novalidate" enctype="multipart/form-data" method="post" action="/forms/bogart/#wpcf7-f47-p339-o1"> <div style="display: none;"> <input type="hidden" value="47" name="_wpcf7"> <input type="hidden" value="3.4.1" name="_wpcf7_version"> <input type="hidden" value="wpcf7-f47-p339-o1" name="_wpcf7_unit_tag"> <input type="hidden" value="e6484ca73a" name="_wpnonce"> </div>
Use Firebug or Chrome Dev Tools to find this unique id in your CF7 form. Then target only this CF7 form using CSS heirachy as follows:
#wpcf7-f47-p339-o1 {
font-family: Verdana;
}
#wpcf7-f47-p339-o1 .wpcf7-form fieldset {
padding:10px;
background:#fff;
margin-bottom:10px;
border:1px solid #000;
}
A spinning arrow continuing to spin after submitting a CF7 form, is a common symptom of a Javascript conflict.