How To Add Custom CSS To Contact Form 7 Web Forms (CSS)

🔔 This tutorial has recently been updated; however, it has now been archived; you may still find value from the content shared below, as the Contact Form 7 plugin has remained unchanged for the most part. Please use any custom code listed below with caution and at your own discretion.

Welcome to the first WordPress tutorial here on Van Marciano Pro. If you’re stuck for ways to customize your Contact Form 7 form, this tutorial is for you. Below, I’ll show you how to make your forms look clean and sleek by using some basic CSS customization.

This tutorial assumes that you have the Contact Form 7 plugin already installed on your website and you also have a contact form embedded somewhere into a page. If you haven’t completed this step, you can find the plugin here.

What is Contact Form 7?

The clue is in the name. CF7 is a bare bones plugin designed to make adding a contact form to your WordPress website easy. It is completely free to use and is currently installed in over 10 million WordPress sites.

The plugin also supports CAPTCHA and Akismet for spam control and filtering, although we will not be covering these in this tutorial.

The forms fields are easily customizable using simple markup, however, making the forms look more clean and modern on the front end requires a little CSS. If you’re looking for some inspiring ways to style your Contact Form 7 Forms, check out the link below.

Recommended: How to customize WPForms in WordPress using Simple CSS

OK, let’s continue with this tutorial.

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

Sadly, the CF7 plugin does not come with any visual customization options. Nor does it have a dedicated sandbox for adding CSS.

The solution are to either use the CSS fields provided in the WordPress customizer, or a dedicated WordPress code snippet plugin. I use and recommend something like WPCodeBox.

Let’s quickly go through some options and steps –

1. Add CSS to your theme’s stylesheet, although I don’t recommend doing this unless you have a child theme installed. This approach is not beginner-friendly.
2. Add CSS to the Additional CSS field under Customizer (This is the easiest approach)
3. Install a plugin called WPCodeBox to add CSS snippets, as mentioned above. You can find here.
4. If you are using a page builder like Oxygen or Bricks, you can simply add the CSS to the native stylesheet.

For this tutorial, we will be using option 2, adding CSS to the Additional CSS field provided, since the other options require you to have those plugins/themes available.

Let’s get started.

From your WordPress dashboard, navigate to Appearance > Customize > Additional CSS. (See images below).

This will open up the CSS sandbox or field.

Now, here are some ways to customize elements within the CF7 plugin.

Contact Form 7 form background and border CSS

Let’s start with the background and border of the contact forms.

The following CSS code snippet 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 this code.

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 prefer to use REM values or Variables, feel free to do so.

If you use the code snippet below without modification, the result you will get is a medium gray background with a solid dark grey border.

You may also use custom variables to style the elements.

/* 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 snippet will style the font size, form input fields, text area, background color, font color, form width, and padding.

Once again, 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 fields and text area 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 snippet 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 of these rules mean, if you’re not familiar.

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

Again here, 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;
     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 add a different style to the submit button, check out this post for more button CSS code snippets styles.

Contact Form 7 Checkbox CSS

Lastly, as shown 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’

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

If you have some basic understand of CSS, you can play around with the values in each property to personalize your contact forms further.

It’s a wrap!

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

Do you need help with this tutorial?

If you run into any problems implementing the techniques or the CSS code into your website, or if something isn’t working right, please consider becoming a member of Van Marciano Pro. As a member, you’ll get access to support with implementing the tutorials via email and chat, not to mention access to over 400 combined course topics, videos, and expert tutorials on WordPress page building.