🎉 Biggest Summer Promo Up to 70% Off Lifetime Plans + 50% Off Membership Deals!  Learn more >>

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

By
Fabrizio Van Marciano

Welcome back to another WordPress tutorial. Do you enjoy using the Contact Form 7 plugin for your web forms? Are you struggling to add simple customizations to your forms? Well, you’ve hopefully arrived in the right place. In this tutorial, I’ll show you how to make your contact forms look clean and sleek by using some simple CSS.

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

What is Contact Form 7?

Well, the clue is in the name. It’s a very simple plugin designed for adding a contact form to your WordPress website. It’s free and probably the simplest contact form plugin there is.

The forms are easily customizable using simple markup. Contact Form 7 is installed on over 5 million WordPress websites (at the time of writing this tutorial), so you’re in good hands.

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

Recommended: How to customize WPForms in WordPress using Simple CSS

OK, so let’s get started with customizing the forms using CSS.

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

This depends on your setup and whether you are using a regular theme or a website builder plugin such as Oxygen or Bricks Builder.

You have a few options when it comes to adding CSS code snippets to your website –

  1. Add CSS to your theme’s stylesheet, although I don’t recommend doing this unless you have a child theme installed.
  2. Add CSS to the Additional CSS field under Customizer (This is the easiest way)
  3. Install a plugin called WPCodeBox to add CSS snippets, which you can find here.
  4. If you are using Oxygen Builder, you can simply add the CSS to your stylesheet.

For this tutorial, I will be using option 2, adding CSS to the Additional CSS field provided.

From your WordPress dashboard, you should be able to find this by navigating to Appearance > Customize > Additional CSS. (See images below).

Add CSS to Contact Form 7

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 adding this piece of 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.

/* 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 over on the FVM blog.

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 knowledge of CSS, you can play around with the values in each property to personalize your contact forms further. If you’re new to all of this, the more practice you have, the better.

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 subscriber, you’ll get access to support with implementing the tutorials via email and chat, not to mention access to over 250 combined course topics, videos, and expert tutorials on Van Marciano Pro.

Go straight to the main video