Do you enjoy using the Contact Form 7 plugin for WordPress? Are you struggling to add simple customizations to your forms? Well, you’ve hopefully arrived in the right place. In this post, 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 to start with.
What is Contact Form 7?
Well, the clue is in the name. It’s a very simple plugin for adding a contact form to your WordPress website. The forms are easily customizable using simple markup. Contact Form 7 is USD on over 5 million WordPress websites, so you’re in good hands.
The plugin also supports CAPTCHA and Akismet for spam control and filtering.
Recommended: How to customize WPForms in WordPress using Simple CSS
OK, so let’s get started with customizing the forms using CSS.
Contact Form 7 CSS Video Tutorial
In addition to the notes below, I recommend watching the short video tutorial. The video is a few years old now, but the process of form customization has not changed in WordPress. You will also find the CSS code snippets for the forms below.
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 WordPress theme builder plugin such as Oxygen or Thrive Theme Builder.
You have a few options when it comes to adding CSS to your forms –
- Add CSS to your theme’s stylesheet, although I don’t recommend doing this unless it is a child theme for a parent framework.
- Add CSS to the Additional CSS field under Customizer (This is the easiest way and most recommended)
- Install a plugin called Simple Custom CSS to add CSS, which you can find here.
- If you are using Oxygen Builder, you can simply add the CSS to your custom 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 image below).
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 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 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 does, if you’re not familiar.
- input – This is the state of the button before any action has taken place on it.
- input:hover – This is the state of the button when someone hovers their mouse pointer over the top of it.
- 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 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.
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.
If you run into any problems implementing the techniques or the CSS code into your website, or if something isn’t working right, please do let me know so that I can update the code and content of this post.
OK, so that’s it. I’ll be sure to update this post in the near future. You can subscribe to my email newsletter here for updates.
For now, though, enjoy.
Psst! Need a reliable website designer that specializes in WordPress for your website project? Click here to see how I can help you bring your ideas to life. Or check out my Ultimate WordPress + Oxygen Builder Website Building Video Course here.