How To Add Custom CSS To Your Contact Form 7 Forms (Video)

Written by Fabrizio Van Marciano
Updated on 
July 19, 2019

If you love using the Contact Form 7 plugin for WordPress but struggling to customize your forms to make them look just the way you want them to, well, you're in mega luck! In this short tutorial, I'll show you how to make your contact forms look clean, modern, and fresh!

I will assume that you have the Contact Form 7 plugin already installed on your website and have a contact form embedded into your contact page. If you don't, then you can find the plugin here.

Right, let's get started with this.

Contact Form 7 CSS Video Tutorial

I recommend watching the short video tutorial below. You will find the CSS code for the forms below too.

Where to add the custom CSS to style your Contact Form 7 forms

You have a few options -

  1. Add CSS to your theme’s stylesheet, although I don't recommend doing this unless it is a child theme for something like Genesis Framework.
  2. Add CSS to the Additional CSS field under Customizer (Recommended)
  3. Install a plugin called Simple Custom CSS to add CSS, which you can find here.

For this tutorial, I will be using option 2, adding CSS to the Additional CSS field provided. You should be able to find this by navigating to Appearance > Customize > Additional CSS from your WordPress dashboard (See image below).

Contact Form 7 form background and border CSS

Right, let’s start with the background of your actual forms.

The following CSS code below will style your Contact Form 7 container background sitewide. This means all the forms on your website will be affected.

If you don’t wish to add a custom background or border, just skip adding this piece of code entirely.

A quick note on the padding values: These values help to add space between your input fields and the surrounding edges of the background colored container. Again, you can adjust these accordingly for your forms.

If you use the code below without modifying it, you should end up with a medium gray background with a solid dark grey border.

/* Contact Form 7 Form Background And Border CSS
 -----------------------------------------------*/
 .wpcf7 {
     background: #A3A3A3;
     border: 10px solid #494949;
     width: 700px;
     padding: 20px 20px 20px 50px !important;
 }

Contact Form 7 input fields and text area CSS

The following CSS code will style the font size, form input fields, text area, background color, font color, form width, and padding.

If you use the code below without modification, you should see each of the form fields in a light grey shade.

/* Contact Form 7 Input CSS 
 ---------------------------*/
 .wpcf7 input[type="text"],
 .wpcf7 input[type="email"],
 .wpcf7 input[type="tel"],
 textarea {
     font-size: 16px;
     background-color: #f5f5f5;
     border: none;
     width: 95%;
     padding: 2%;
 }

Contact Form 7 ‘Submit Button’ CSS

The following CSS code below will style the Submit Button of your Contact Form 7 forms.

There are three rules here: input, input:hover, and input:active. Let me explain what each one does if you’re not familiar.

  1. input – Is the state of the button before any action has taken place on it.
  2. input:hover – Is the state of the button when someone hovers their mouse pointer over the top of it.
  3. input:active – Is the state of the button when someone clicks on the button itself.

If you use the code below without modification, you should see a red button, and it should change to a grey shade when you hover your mouse cursor over the top of it.

/* Contact Form 7 Submit Button 
 -------------------------------*/
 .wpcf7 input[type="submit"] {
     color: #ffffff;
     font-size: 18px;
     font-weight: 700;
     background: #E2272E;
     padding: 15px 25px 15px 25px;
     border: none;
     border-radius: 5px;
     width: auto;
     text-transform: uppercase;
     letter-spacing: 5px;
 }
 .wpcf7 input:hover[type="submit"] {
     background: #494949;
     transition: all 0.4s ease 0s;
 }
 .wpcf7 input:active[type="submit"] {
     background: #000000;
 }

If you want to try out various other CSS codes for styling the submit button, check out this post.

Contact Form 7 Checkbox CSS

Lastly, as in the video tutorial above, the following CSS code will style the checkbox by making it slightly larger, as well as align the text label with the rest of the elements in your contact form.

/* Checkbox CSS
----------------*/
input[type="checkbox"] {
    transform: scale(1.3);
    margin-left: 5px;
}

span.wpcf7-list-item {
margin: 0;
padding-bottom: 20px;
}

Output for the entire CSS code provided above ‘as is’

Right, if you used all of the above CSS code provided without modifying a single thing, your forms should look something like this (without the background and border CSS).

It's a wrap!

So there you have it, a quick and easy tutorial for adding some simple custom CSS to your Contact Form 7 forms. I hope it worked out for you.

If you have some basic or even intermediate CSS coding skills, you can play around with the values in each property to personalize your contact forms further.

Is messing around with bits of code isn't your cup of tea, there is a plugin available called the Contact Form 7 Style plugin. Perhaps I should have mentioned that at the start of the tutorial, but it's always best to use custom CSS rather than install yet another WordPress plugin, the choice is yours.

You can download the Contact Form 7 Style plugin here.

OK, so that's it. I will be updating this tutorial post in the near future, no doubt, so be sure to subscribe to my email newsletter for updates.

For now, though, enjoy.

Psst! Are you in need of a reliable, creative, passionate, and design-savvy web designer for your next website project? Click here to see how I can help you bring your ideas to life.

Posted in ,

Are you ready to kickstart your web design project?

Let's work together to turn your website design and creative marketing ideas to life. Hit the 'Start Project' button to book your free 30-minute strategy consultation with me.
© Fabrizio Van Marciano Web Design Services. A division of Magnet4Blogging Media. All Rights Reserved.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram