Custom Contact Form 7 CSS Styling Tutorial

So you installed Contact Form 7, generated a form, and dropped the shortcode in your page expecting a glorious contact form that would earn the admiration of the masses.

Not so much…

Contact Form 7 by Takayuki Miyoshi is a great free WordPress plugin for allowing your visitors to contact you via a web form. But the default styling for the form is pretty basic. Luckily, the plugin is flexible enough to allow you to customize the code and create some fantastic forms with a little bit of tweaking.

This tutorial will give you some new Contact Form 7 code and CSS styles that will spruce up your forms and look great in any WordPress theme.

This tutorial was written using Divi theme by Elegant Themes. The code provided in this tutorial, however, can be used with just about any theme to create your own customized Contact Form 7 form styles.

Just copy and paste the provided code into your theme’s CSS stylesheet. But we do recommend creating a child theme specific to your theme in order to preserve customizations if you update the theme. The WordPress Codex has instructions on creating WordPress child themes.

Divi Child Theme

The recommended way to customize Divi (or any theme) is to create a child theme. This allows you to add your CSS, functions.php, or page-specific customizations to the child theme and avoid having your changes overwritten when you update Divi.

We won’t go into the specific of HOW to create a child theme here (see Codex link above), but rather you can just download this pre-made Divi child theme and upload and activate it on your site.

The child theme includes a blank stylesheet, a footer.php file from Divi version 2.6.4.4, and a functions.php file that loads up the custom style.css file. These are the three main files that are used to customize Divi.

Once the child theme has been uploaded and activated, you can then edit the files as needed using the WordPress editor (Appearance > Editor), edit the files locally and upload via FTP, or use any number of editor plugins, we prefer WPide.

What you’ll see in the child theme style.css file in the default WP editor:

Theme Editor

Default Contact Form 7 Style

If you have activated Contact Form 7 and dropped the shortcode for your form into a page or post, you will see something like this:

Contact 7 stock form

Nothing to really write home about. It’s just a basic form with minimal styling. Your theme may have some styling built in already for forms, but Divi theme uses the Contact Form module for building styled forms, and therefore there are no styles built in for generic forms like CF7. So let’s get to work adding some new CSS styles and spruce that puppy up.

What You Will Be Creating

Here’s what we are going to end up with once we have added the new code into the style.css file of the Divi child theme:

New Contact Form 7 style

 

Customizing Your Contact Form Code

The first step is to change the default code that Contact Form 7 uses. If you noticed in the finished screenshots above, I’ve removed the titles above each field and instead am using placeholder text that disappears when the field has focus. That requires a small change to each field shortcode.

The default contact form code looks like this:

And our finished form uses this code:

You can see there are some new classes added to the paragraph tags on the first two fields.  This enables them to sit side-by-side rather than span the full width of the page.

The stock submit field has been removed and replaced by a button that is styled using the classes provided in the Divi theme. We do add some custom CSS styling to the button colors in the forthcoming CSS though. So you can easily change the normal and hover colors for the button.

If you are not using Divi, you can remove all the classes from the submit button (or leave them, we don’t care).

Adding in the Custom CSS code

If you have a child theme installed (or installed the one we provided above), then go into your favorite code editor and open the style.css file that is included.

Be sure to not make any changes to the top of the file, as those lines are required so that WordPress can identify the child theme. In our provided Divi child theme, begin editing the file below the line that says ‘Begin Divi Customizations Below’.

And without further ado, here is the CSS code that powers our finished form:

After saving the style.css file, if you copied the form code into a new Contact Form 7 form and properly inserted it into your page, you should see a form similar to the finished product screen shots above. 

Your font style and size may be different, as the form inherits those from the values you set in the Divi theme customizer.

Additional Form Customizations

You don’t have to stop with the customizations we provided.  Here are some other changes you can make to further customize your form.

Change Submit Button Color

To change the normal and hover color of the submit button, change the hex color values for the background properties in the code below. This code is contained in the full CSS code above, so just find these selectors and change the hex values (or change them to rgb or rgba values if you prefer).

The !important declaration in the first selector code is to override the default Divi button CSS. So make sure you leave that intact if you change the text color value.

If you are using button icons and their hover effects in Divi theme, they will be retained if you use the submit button code we provided. The default Contact Form 7 code does not have the required classes that enable the icons or effects.

If you want to remove the custom button behavior in Divi and use the stock button style, simply remove the two selectors above from the code.

Add Dark Background to Form

Sometimes a dark form gives more pop to your page, so here is the code to add to the style.css file to transform the form to a dark version. This code can be added right before the ‘End’ comment of the main form code provided earlier.

After adding this code, you should see something like this:

Dark Contact Form 7 Version

Did you Notice the Form Submit Message Customization?

Also included with the first block of CSS code were a few lines of code that customize the message Contact Form 7 provides after you submit the form. If you click the submit button, you will either see a successful send message, a required field message, or a failed send message. Try it and see how the additional styles look on your form.

Here is what you’ll see if required fields are not completed:

Contact Form 7 Validation Error

The styles that control the appearance of the field border color, the message below each field, and the message at the bottom of the form are shown below. These were included in the original CSS code provided above, so there’s no need to add these again.

Feel free to customize any of the colors to match your form color scheme.

Customizing the Ajax Spinner

When you submit the form, you’ll notice a little spinning arrow just to the right side of the submit button while the form is processed. You can easily customize the graphic that is used by creating and downloading a new one from a site like PreLoaders.net

Choose the new spinner style you want to use, customize the settings, and download the animated GIF. If you are using a dark form background, the default spinner provided by Contact Form 7 doesn’t look very good, but when creating a custom spinner, you can make it white or any other color that looks good on a dark background.

Below are some examples we created. They are sized at 46px by 46px, which is about the ideal size for the submit button on our form.

335

482

712

335-dark

712-dark

482-dark

FYI: The background color we used on the dark form style is #5D6777 if you are creating a custom spinner

Once you have downloaded your custom spinner GIF, upload it to your media library in WordPress. Once uploaded, copy the full image URL. You can get that by clicking on the new image in the library, and then on the ‘Attachment Details’ page, look on the right side for the URL field. That’s what you want to copy.

Then go into your Contact Form 7 form editor and replace the image URL that was provided in our original form code.  That code looks like this:

You can use the full URL in the src parameter, just replace the link to the Contact Form 7 spinner.

Save your contact form, preview your page, and submit your form.  You should see your new spinner graphic next to the submit button when clicked.

Tutorial Wrap Up

That should give you a good start in building your own custom Contact Form 7 styles in Divi theme or any other WordPress theme. A helpful tip for customizing forms or any other elements on your page can be read in our Using Browser Tools to Customize CSS Code tutorial.

We hope you enjoyed our tutorial, and happy coding!

Enjoy the Read? Share some Love!