3 Best Plugins for Customizing Contact Form 7 Forms in WordPress

3 Best Plugins for Customizing Contact Form 7 Forms in WordPress

Contact Form 7 is an incredibly popular plugin for building WordPress contact forms with over 3 million active installs. It supports the building of forms without HTML coding. Forms can include CAPTCHAs, file upload, and quiz fields.

While Contact Form 7’s default markup and style are fine for most basic contact forms, often you’ll want to change it.

Improving Contact Form 7 Accessibility: A Quick Note

One plugin I recommend installing shortly after adding Contact Form 7 is Joe Dolson’s Contact Form 7: Accessible Defaults.

This changes the structure of the default form to make it more accessible by associating form labels with the form controls.

It also adds the [response] shortcode above the form so that if there’s an error submitting the form it’s reported above the form itself.

For the standard form, the code generated by the plugin is:

If you’re interested in finding out more about accessibility, check out The Ultimate Guide to Accessibility and WordPress.

Easy Contact Form 7 Styling With Plugins

If you want a quick form style, there are plugins that can do the hard work so you don’t have to.

Contact Form 7 Style

Contact Form 7 Style has a number of preset styles to choose from including Valentine’s and Christmas styles.

6 of the styles available in Contact Form 7 Style
Six of the styles available in the Contact Form 7 Style plug.

For Twenty Fifteen theme users, there’s also a style to match.

To apply a style, go to Contact Styles > Quick Edit, check the form you want to apply the style to and click Update.

Valentine Style Contact Form
The Valentine Style contact form.

Contact Form 7 Style Custom Styles

Add your own styles and see the results on the fly by going to Contact Styles > Add New.

Using this tool you can customize just about any aspect of your form, including:

  • Margins
  • Borders
  • Padding
  • Colour and background – including hover states
  • Fonts – a range of Google Fonts are included

When you add a value to (for example) padding, the editor sensibly copies across the value you have chosen, generating the same value for top, right, bottom and left padding. You can, of course, adjust the values. There’s a dropdown to choose between pixels, em or % too.

The custom style you can create also stretches to error and success messages too.

The preview area is at the bottom of the screen; scroll down to see your changes.

Here’s my finished form, using the Cherry Swash font:

Contact Form 7 Cherry Swash
Contact Form 7 styling with the Cherry Swash font.

Contact Form 7 Skins

To use Contact Form 7 Skins, create a new contact form and scroll down the page to the Skins section. There you can choose a template and a style for your form.

Templates include forms for events, registration, and suggestion.

Some of the available templates in Contact Form 7 Skins
Some of the available templates in Contact Form 7 Skins
Some of the available styles in Contact Form 7 Skins
Some of the available styles in Contact Form 7 Skins

Here’s what the Survey form looks like with Topaz styling using the Twenty Fifteen theme.

Contact Form 7 skin
Contact Form 7 skin

Material Design For Contact Form 7

This plugin styles forms in the Material Design style.

The plugin suggests that you remove the default form and use its shortcodes.

Here is an example with Hestia theme. Note the floating label when the cursor is moved to a particular form field.

Material Design for Contact Form 7 example
Material Design for Contact Form 7 example

A style customizer is available in the plugin’s Pro version.

Styling Contact Form 7 to Match Your Theme

Most of the time, Contact Form 7 will inherit styling from the theme selected. See this example with Coral Dark theme.

Contact Form 7 inherits the dark form fields and button with light labels from Coral Dark theme
Contact Form 7 inherits the dark form fields and button with light labels from Coral Dark theme

A Bespoke Contact Form 7 Design for ColorMag Theme

Here is the form with no styling applied. It inherits the blue button colour from ColorMag theme.

Contact Form 7 in ColorMag theme, no styling applied
Contact Form 7 in ColorMag theme, no styling applied.

I started by uploading a photo to use as a background image for the form and changing the code for the form labels from grey to white with a blue text-shadow.

The next changes were to increase the margins between the form labels and form fields, change the submit button hover color and add a border when the cursor enters the form fields.

The display of error/success messages when the form is submitted needed to be changed too so they would show up properly.

The spinning GIF when the form is submitted didn’t show up too well so I found an alternative at Loading.io and referenced it with CSS.

This is the final form:

Custom Colour Contact Form 7 for ColorMag theme
Custom Colour Contact Form 7 for ColorMag theme

And this is the code:

Contact Form 7 Styling for Upfront Spirit Theme

Upfront is WPMU DEV’s front-end builder, which comes with a number of themes. To learn more about Upfront and get started, read this post on Upfront basics.

The Spirit theme has its own inbuilt contact form, but should you want to use Contact Form 7 instead, it’s possible to style it to match with a bit of work.

Here’s the form style we will recreate.

Spirit theme contact form.

To start, create your form and add the Contact Form 7 shortcode on the page you want the form to appear via Upfront’s front-end customizer.

Open the Theme Settings and go to the Edit Global CSS button, which opens up the CSS editor.

It’s best to add your form styles to the end of the file to keep things tidy.

You won’t be able to view your contact form via Upfront as it will show the Contact Form 7 shortcode, so keep the relevant page open in a new tab as you save your changes.

If you will have multiple contact forms on different pages, it’s a very good idea to add a form class or id to your form to make your custom style only apply to a single instance of the form. You can do this by modifying the form shortcode.

This turns my form shortcode of:

into:

This is the code for the initial form:

And this is what it looks like on the front end. It’s too narrow, and not very pretty yet.

Contact Form 7 on Spirit theme, initial form
Contact Form 7 on Spirit theme, initial form

Step 1 is to add placeholder text to the form fields to resemble the Upfront contact form.

Rather than deleting the form labels, we can hide them instead using the visuallyhidden class which is already built into Upfront. This means that any users reliant on a screen reader will still hear the labels read out.

The final form HTML is this:

On the front-end the placeholders are there but there are large gaps between the form fields and the form isn’t wide enough. Let’s see what we can do to fix that.

Contact Form 7 on Spirit theme with placeholders

The obvious thing to try is to make the form 100% width:

Unfortunately, this doesn’t work.

We need to style the individual form elements instead. This style will take care of the width:

The CSS box model is different for block-level and inline elements. The box-sizing: border-box; is necessary to match the width property of the text fields and textarea with the submit button. Otherwise, the submit button is the right width and the others are a little wide.

With a bit more styling of the submit button and the placeholders, the form looks like this:

Contact Form 7 styling on Spirit theme 100% width
Contact Form 7 styling on Spirit theme 100% width

The next part is to move the fields closer together with the use of zero and negative margins. Also, the max-height of the message textarea was set to 170px.

The form is now pretty close to the Upfront contact form – but there’s a problem!

Submitting invalid data on the original contact form puts all the errors in a box above the form, whereas Contact Form 7 displays errors inline.

Upfront’s contact form on Spirit theme with validation errors above the form

When submitting our form without completing the fields correctly, the error messages are positioned wrongly relative to the form fields. The Name error is covering the Name field, and the Message error is too low down.

Contact Form 7 error message
Contact Form 7 error message display with wrong spacing.

That means we need to space out the error messages in between the form fields to leave room for the errors, and add some remedial styling to change the font and error display.

We need to change the style for the success message too.

Here’s the final Contact Form 7 form compared to the original. Not perfectly identical, but pretty close.

Contact Form 7 styled form compared to Upfront contact form on Spirit theme.

Contact Form 7 styled form compared to Upfront contact form on Spirit theme

This is how the form displays if completed incorrectly.

Contact Form 7 Spirit theme validation errors
Contact Form 7 on Spirit theme with validation errors spaced out.

Here’s the final CSS.

One point to note: if you create a new form on another page using Spirit theme with a white background, the form fields won’t show up.

A second Contact Form 7 form on a new page on Spirit theme: form fields don't show
A second Contact Form 7 form on a new page on Spirit theme: form fields don’t show

You can get around this by adding a style such as this. Using the .wpcf7 means it will apply to all Contact Form 7 forms:

Just remember to add it before your Spirit form style so it doesn’t override the style on your contact page!

Customizing Contact Form 7 With the Right Tools

For a free plugin, Contact Form 7 is powerful, especially when you start styling it with CSS. Hopefully the plugins in this tutorial will help you get started with your own styling. The great thing about these plugins is that they’re free, so you can give them a go and see how they work before committing.

Claire Brotherton
Do you use Contact Form 7? Which approach do you prefer for styling contact forms - use a plugin, or do it yourself? Let us know in the comments below.