Styling Contact Form 7

Here we demonstrate how to style using CSS Contact Form 7.

Divi Theme with Contact Form 7

Looking to integrate Contact Form 7 with Divi theme, let’s start! Contact for 7 is a very established plugin and well used Free WordPress Contact Form. With over 5 million installs Contact Form 7 is huge. Combine with Divi theme from elegant themes one of the most popular themes, magic can happen.

Note: Some of the code (HTML, CSS or PHP) within this blog are from other blog posts, forums and may have been modified from other web sources. Always verify the code prior to using it on a live website.

Plugin Break down

Contact Form 7 is a very versatile plugin allowing customisation of many aspects, including:

  • Custom form entries
  • Drop-down menu boxes
  • Tick boxes and radio boxes
  • Text entry formatting, such as email, telephone number etc.
  • Email templates in HTML format
  • Auto email confirmations
  • Upload attachments
  • Acceptance validation (terms and conditions etc)
  • Security and spam CAPTCHA

Add-ons & extra Plugins

To add more functionality extra add-on plugins can be installed:

  • Conditional formatting (hide or show extra entry fields, plugins: Contact Form 7 Conditional Fields)
  • Store all submitted forms in database (Plugins: Advanced CF7 DB, Flamingo, or Contact Form CFDB7)
  • Export all forms in a database to Excel etc
  • CRM customer database import function
  • Re-direct to another page (used for easy conversion tracking, plugin: Redirection for Contact Form 7)
  • Google V2 CAPTCHA (Plugin: ReCaptcha v2 for Contact Form 7)

Is it all good? Maybe not!

So why isn’t everyone using Contact Form 7. The interface and method of styling the forms is not intuitive. Many other plugins with similar functionality and are much easier to use, yet they are not free. A great example of an easy to use Contact Form plugin is “WP Forms“. But to enable some functionality such as allowing attachments it may cost a fee.

Website loading speed due to plugins and code

The other drawback to Contact Form 7, is the issue with slowing the website loading speed. With the he main plugin and all the add-on plugins, it can impact the load time and response time. This is not good for users, and as we know speed matters as a SERP ranking factor. One way to prevent the java script and CSS on all pages of the website then the following script can be modified to only the required pages. Note: Do NOT use this if using Google CAPTCHA V3. Google CAPTCHA V3 requires tracking the user’s interactions on the website. However, if working with Google V2 CAPTCHA, this works.

/** Remove Contact Form 7 js and css unless on the contact page or contact page 2. To enable on a page use the page name, example /page-XX'
**/
add_action( 'wp_enqueue_scripts', 'sr_remove_cf7_scripts' );
function sr_remove_cf7_scripts() {
    if ( !is_page('contact','contact-2') ) {
        wp_deregister_style( 'contact-form-7' );
        wp_deregister_script( 'contact-form-7' );
    }
}

Example Contact Form 7 with Divi theme styling!

Let’s get started! Contact Form 7 CSS code styles!

Firstly you will need to edit your Style.css code. Always make a full back-up prior to making any changes! This guide we are focussing on making Contact Form 7, look like a Divi style contact form. If you have Divi already installed but have not yet created a child theme, we recommend creating a Divi child theme now! In the next section, the code can be added to your child theme or style.css code. The code has markup to help you style the form, to your liking. Some parts are not required, so pick and choose what you need. The validation styling really is optional.

Basic Divi theme styling for Contact Form 7

/* START - Contact form 7 formatting to make it look like DIVI form */
.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {
background-color: #eee !important;
border: none !important;
width: 100% !important;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
font-size: 14px;
color: #999 !important;
padding: 16px !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wpcf7-submit {
color: #f0853b!important;
margin: 8px auto 0;
cursor: pointer;
font-size: 20px;
font-weight: 500;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 6px 20px;
line-height: 1.7em;
background: transparent;
border: 2px solid;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.wpcf7-submit:hover { 
background-color: yellow; 
border-color:yellow; 
padding: 6px 20px !important; 
}

.wpcf7 .wpcf7-form .wpcf7-select {
background-color: #eeeeee !important;
border: none !important;
border-radius: 0 !important;
box-sizing: border-box;
color: #999999 !important;
font-size: 14px;
padding: 16px !important;
width: 100% !important;
box-shadow: none !important;
}
/* FINISH - Contact form 7 formatting to make it look like DIVI form */

Much more Contact Form 7 stlying!

/* START - Contact form 7 formatting to make it look like DIVI form */

/*General contact form 7 styling and border*/
.wpcf7
{
 background-color: #ffffff00; 		/*Form background colour. Example: White smoke colour #F0F0F0 for none. Can also remove this line for none */ 
 border: 1px solid #ffffff00; 		/*Form border colour. Example: Dim grey colour #666666 or blue like text #0c71c3 or #ffffff00 for none. Can also remove this line for none*/
 border-radius: 5px;				/*How rounded the edges of the form border is, 3px to 50px is nice */
 color: #0c71c3 !important; 		/*Font colour of form entry field label i.e. text above the entry box. Example: Navy Blue #0c71c3 */
 font-size: 16px;					/*Font size of form entry field label i.e. text above the entry box. Example: 16px*/
}
/*Adding margins around contact form 7 content and the border*/
.wpcf7-form {
 margin-left: 25px;					/*If using a border around the form i.e. above: border: 5px solid #0c71c3; with colour then may want left margin around box */
 margin-right: 25px;				/*If using a border around the form i.e. above: border: 5px solid #0c71c3; with colour then may want right margin around box */
 margin-top: 25px;					/*If using a border around the form i.e. above: border: 5px solid #0c71c3; with colour then may want top margin around box */
 margin-bottom: 25px;				/*If using a border around the form i.e. above: border: 5px solid #0c71c3; with colour then may want bottom margin around box */
}
/*Text area font size and colour*/
.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {
background-color: #eee !important; 	/*Text box background colour, best to use something that contrast the text colour. Example: Very light shade of grey #eee */
border: none !important;			/*Recommended leave none, but can have a border i.e.: border: 1px solid #A9A9A9; */
width: 100% !important;				/*Width of the text box in the allocated portion, recommended 100% */
-moz-border-radius: 0 !important;	
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
font-size: 16px; 					/*Text font size, example 16px inside the text area. */
color: #696969 !important;			/*Text colour, example: Dim grey #696969 or dark grey #A9A9A9 try with red #666*/
padding: 16px !important;			/*Text padding inside the text area, suggested maximum the same as the font size */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;				/* Can leave this! box-sizing: border-box; on an element, padding and border are included in the width and height:*/
}
/*Submit button font size and colour*/
.wpcf7-submit {
color: #f0853b! important;		/*Text colour of submit button, example: Light orange/brown #f0853b or red #FF0000*/
margin: 8px auto 0;				/*Margin below the last form entry box, small amount is good */
margin-bottom: 8px;				/*Margin below the submit button box */
cursor: pointer;				/*Pointer is the hand, default is the arrow, best to use the pointer (hand) as it shows interaction */
font-size: 20px;				/*Submit button font size, Slightly larger than the text size is good i.e. 20px */
font-weight: 500;				/*Submit button weight i.e. normal, semi-bold, super bold etc. 500 is good starting point*/
-moz-border-radius: 3px;		/*CSS - How rounded the edges of the submit button are, 3px to 50px is nice */
-webkit-border-radius: 3px;		/*CSS - How rounded the edges of the submit button are, 3px to 50px is nice */
border-radius: 3px;				/*How rounded the edges of the submit button are, 3px to 50px is nice */
padding: 6px 20px;				/*Padding around the submit button */
line-height: 1.7em;				/*Submit button line height text */
background: transparent;		/*Submit button background colour, can use transparent but yellowgreen etc is also good depending upon font colour */
border: 2px solid;				/*Thickness of the border around the submit button */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;			/*Time for the button hover effect to change */
}
/*Submit button styling*/
.wpcf7-submit:hover { 
background-color: yellow; 		/* Submit button hover background color, can be: yellow or green or a shade of green etc, such as (#90EE90) or whatever you want*/
border-color:#f0853b;      		/* Submit button hover border color, set to above colour for no border, #f0853b to keep the light orange/brown*/
padding: 6px 20px !important; 	/* Padding around the submit button hover */
}
/*Drop down menu styling*/
.wpcf7 .wpcf7-form .wpcf7-select {
background-color: #eeeeee !important; 	/*Drop down menu background colour of submit button, example: Very light shade of grey #eeeeee or red #FF0000 or transparent*/
border: 1px solid #A9A9A9 !important;	/*Drop down menu border, for a small border add something like: 1px solid #A9A9A9 if no border wanted: border: none !important;*/
border-radius: 0 !important;			/*How rounded the edges of the drop down menu are, square edges look good so: border-radius: 0 !important; */
box-sizing: border-box;					/*Can leave this! box-sizing: border-box; on an element, padding and border are included in the width and height:*/
color: #999999 !important;				/*Text colour of submit button, example: medium light shade of grey #999999*/
font-size: 16px;						/*Text font size, example 16px inside the drop down box. */
padding: 16px !important;				/*Text padding inside drop-down box, suggested maximum the same as the font size */
width: 100% !important;					/*Width of the text box in the allocated portion, recommended 100% */
box-shadow: none !important;			/*Box shadow, can look dated, example: box-shadow: 5px 10px #888888;!important;  else for none use: box-shadow: none !important; */
}

/*Validation customisation - Not needed but can make some nice changes. The above code will make the form look like a DIVI contact form*/

/* div.wpcf7-response-output, div.wpcf7-validation-errors { display: none !important; }  /*Can remove the bottom validation error, see below for stlying*/
span.wpcf7-not-valid-tip { display: none; }	/*Remove the "required field" from under each missin box, not needed is already red background and red border! */
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: red; background-color: rgba(153,0,0,0.3) !important; } /*Style the inside of the box with missing fields */
span.wpcf7-form-control-wrap {display:block !important;} /*keeps forms from jumping on render*/
span .wpcf7-not-valid {color: #666 !important; border: 2px solid #ff0000 !important;} /*Add a border and colour to required fields missing information */

/*Start - If you need validation tip */ /*short example:/*span.wpcf7-not-valid-tip {color: #666 !important; border: 0px solid #FF0000;}*/ /*
body span.wpcf7-not-valid-tip {
display: block;
color: #ec3c06;
border: none;
position: relative;
top: auto;
left: auto;
padding: 0;
margin-top: 2px;
background: none;
font-size: 15px;
}
/*End - If you need validation tip */

.wpcf7-form .wpcf7-response-output.wpcf7-validation-errors {
    color: #D8000C;						/*Validation response text colour */
    background-color: #FFBABA;			/*Validation response background colour */
    border: 0;							/*Validation response border size */
    padding: 10px;						/*Validation response padding */
}
.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
    color: #4F8A10;						/*Validation text colour  */
    background-color: #DFF2BF;			/*Validation response background colour  */
    border: 0;							/*Validation response border size n */
    padding: 10px;						/*Validation response padding */
}
div.wpcf7-mail-sent-ok:before,div.wpcf7-validation-errors:before {
    font: 26px/30px dashicons;			/*Validation response customisation */
    margin-right: 16px;					/*Validation response customisation */
    vertical-align: middle;				/*Validation response customisation */
}
div.wpcf7-mail-sent-ok:before {
    content: "\f147";					/*Validation response customisation */
}
div.wpcf7-validation-errors:before {
    content: "\f158";					/*Validation response customisation */
}



/* FINISH - Contact form 7 formatting to make it look like DIVI form */
 

 Find out more about our services

Two boxes per line on desktop and tablet.

So now we have the boxes and the general colour schemes. But you may want to have two smaller entries of the form on the same row! Whilst having a single entry per row for mobile viewing.

This requires two parts:

  • CSS code in stlye.css
  • Additional code in the Contact form 7 form builder

CSS code to be added to style.css:

/* START - Contact form 7 - Display Contact Form 7 Fields on 2 or More Columns */<br /> /* When on screen larger than 767px two boxes side by side in a line, when function called */<br /> .one-half,<br /> .one-third {<br /> position: relative;<br /> margin-right: 4%;<br /> float: left;<br /> margin-bottom: 20px;</p>
<p>}</p>
<p>.one-half { width: 48%; }<br /> .one-third { width: 30.66%; }</p>
<p>.last {<br /> margin-right: 0 !important;<br /> clear: right;<br /> }<br /> /* When on screen larger than 767px one boxe per line, when function called */<br /> @media only screen and (max-width: 767px) {<br /> .one-half, .one-third {<br /> width: 100%;<br /> margin-right: 0;<br /> }<br /> }</p>
<p>/* Finish - Contact form 7 - Display Contact Form 7 Fields on 2 or More Columns */

Within Contact Form 7, Form settings:

<div class=”one-half”><label> Your name (required)
</label></div>

<div class=”one-half last”><label> Your Company (required)
</label></div>