With over 1 million active users, Contact Form 7 is one of the most popular contact form plugins for WordPress. Their biggest downside is that the out of the box forms you add are very plain looking. Thankfully, Contact Form 7 can be easily styled using CSS in your WordPress theme. In this article, we will show you how to style contact form 7 forms in WordPress.
Note: We don’t recommend Contact Form 7 plugin anymore. Instead, we recommend WPForms, which is the most beginner friendly contact form plugin. You can also download WPForms Lite for free.
We have a step by step guide on how to create contact form in WordPress.
Video Tutorial
If you don’t like the video or need more instructions, then continue reading.
Getting Started
We are assuming that you have already installed Contact Form 7 plugin and have created your first contact form. The next step is to copy the shortcode for your contact form and paste it in a WordPress post or a page where you would like your form to appear.
For the sake of this article, we have used the default contact form and added it into a WordPress page. This is how the contact form looked on our test site.
As you can see that the contact form inherits some form styles from your WordPress theme. Apart from that it’s very basic.
We will be styling Contact Form 7 forms using CSS. All the CSS goes into your theme or child theme‘s stylesheet.
Styling Contact Form 7 Forms in WordPress
Contact Form 7 generates a very useful and standard compliant code for the forms. Each element in the form has a proper ID and CSS class associated with it.
Each contact form uses the CSS class .wpcf7
which you can use to style your form.
In this example we are using a Google font Lora in our input fields. See how to add Google Fonts in WordPress.
div.wpcf7 { background-color: #fbefde; border: 1px solid #f28f27; padding:20px; } .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea { background:#725f4c; color:#FFF; font-family:lora, sans-serif; font-style:italic; } .wpcf7 input[type="submit"], .wpcf7 input[type="button"] { background-color:#725f4c; width:100%; text-align:center; text-transform:uppercase; }
This is how our contact form looked after applying this CSS.
Styling Multiple Contact Form 7 Forms
The problem with the CSS we used above is that it will be applied to all Contact Form 7 forms on your website. If you are using multiple contact forms and want to style them differently, then you will need to use the ID generated by contact form 7 for each form.
Simply open a page containing the form you want to modify. Take your mouse to the first field in the form, right click and select Inspect Element. The browser screen will split, and you will see the source code of the page. In the source code, you need to locate the starting line of the form code.
As you can see in the screenshot above, our contact form code starts with the line:
<div role="form" class="wpcf7" id="wpcf7-f201-p203-o1" lang="en-US" dir="ltr">
The id attribute is a unique identifier generated by Contact Form 7 for this particular form. It is a combination of form id and the post id where this form is added.
We will use this ID in our CSS to style our contact form. We will replace .wpcf7 in our first CSS snippet with #wpcf7-f201-p203-o1
.
div#wpcf7-f201-p203-o1{ background-color: #fbefde; border: 1px solid #f28f27; padding:20px; } #wpcf7-f201-p203-o1 input[type="text"], #wpcf7-f201-p203-o1 input[type="email"], #wpcf7-f201-p203-o1 textarea { background:#725f4c; color:#FFF; font-family:lora, "Open Sans", sans-serif; font-style:italic; } #wpcf7-f201-p203-o1 input[type="submit"], #wpcf7-f201-p203-o1 input[type="button"] { background-color:#725f4c; width:100%; text-align:center; text-transform:uppercase; }
Styling Contact Form 7 Forms with CSS Hero
Many WordPress beginners don’t have any experience of writing CSS, and they don’t want to spend time learning it. Luckily, there is a wonderful solution for beginners that will allow you to not just style your contact form but almost every aspect of your WordPress site.
Simply install and activate the CSS Hero plugin and go to the page containing your form. Click on the CSS Hero toolbar and then click on the element you want to style. CSS Hero will provide you an easy user interface to edit the CSS without ever writing any code.
See our complete review of CSS Hero and how to use it to style anything on your WordPress site. You can use CSS Hero coupon code WPBeginner to get exclusive 34% off discount.
That’s all we hope this article helped you learn how to style Contact Form 7 forms in WordPress. You may also want to see our guide on how to add a contact form popup in WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
I’m a novice, but determined to figure this out! So, please – give me baby steps if you answer.
I have a contact7 form on my website. The font is showing up as white on a white background for the labels (Your name, Your email, etc).
How do I change the color – where do I go to tell it to change color?
I tried copying and pasting some of the codes ya’all had in your answers above, but they just showed up on my page, but didn’t change the font.
You can target the lable area like this-
.wpcf7 form p label {
color: white;
background: black;
font-family: sans-serif;
}
Thanks!
I want to reduce gap between name and email boxes…how to do it.
Thanks for a great post, was very helpful.
This helped heaps. Thanks!
My contact form has a dark image background so I need “your name”, “your email” and “your message” to be white. I can’t find a class or id for those elements, I tried with inspect element but I can’t find anything that works. This is the only contact form on this site. I’m using css on the stylesheet of my childtheme and I tried different options but can’t change the color. Can anyone help me?
I’m pretty new to WordPress and Plugins in general but have this Plugin installed and everything is working correctly but instead of seeing the person’s message, it just shows [your-message] in the body of the email. I have everything set up like above and spelled correctly so i’m not sure what the problem is. Any help would be much appreciated! Thanks!
I have the same problem. I’m only new to forms on WP but I’m stuck too. I’m trying to build a Registration page with business name, address, etc along with personal contact information and a drop down to make their choice and of course a comment field. After testing this numerous times I get the same as you; the content of the comment field.
Wish there had been an example or two on the Docs page of Contact 7; something besides only the default Contact Form.
I don’t think Contact Form 7 is the most popular. It comes pre-installed with many themes and wordpress instalations, that’s the reason they have so many users. It is so frustrating to edit anything in this plugin.
Hello if some one want contact form with transparent background or want to add contact form 7 on the big banner image with transparent background then add this code to your custom css.
.wpcf7 input[type=”text”],
.wpcf7 input[type=”email”],
.wpcf7 textarea
{
background-color: Transparent;
color: BLUE;
width: 100%;
}
div.wpcf7 {
color: white;
margin: 0;
padding: 0;
}
You are an absolute life saver. I’ve been battling with this for hours.
One point I’d make that others might find it useful to know, is that I was trying to style the submit button, which was on a contact form 7 I’d put on my sidebar.
This worked for the first page it was on but then wouldn’t on subsequent pages. However, I then noticed that the f2 code on the second page had a suffix of ‘o2’, and when I added this to my css, the styling on this page worked too.
Thank you again.
Glad you found it helpful.
Thanks for a great post, was very helpful. One thing still bothering me and it’s that i haven’t found a way to customize checkboxes. Have you found a way how it would be possible to change checkbox size for example so that it would work on every browser?
Seems like the input structure isn’t modified so no extra spans could be added to fake the checkboxes an i right?
Glad if you have time to help me out, cheers.
Oh my gosh! You have no idea how grateful I am for this post! THANK YOU!
I simply wanted to change the font used in the Submit button. I searched and searched for hours and tried various CSS code variations and nothing worked until I came across your code and then added a font element to it. Problem solved!
contact-form-7/includes/css/styles.css (inactive) this appears above my css edit file,,by which none of changes are applied to website help me how to make it active
You should not edit the core plugin files. Instead you should add your CSS to your theme’s stylesheet.
ya i understood then can you please help me how can i do it..please help me in detail
thanks a lot sir very much helpfull will suscribe your channel
means i hould copy this code in my themes css file righht??
Hello,
I am wondering if any one can help me fix the contact form for mobile. I am able to see the form but it is too wide and gets cut off.
Thank you.
this very helpful realy nice tutorial
I find your website very helpful.just a suggestion it would be great if u could launch an app for your website soon…apps are more convenient than following emails
Sound like a good idea. Meanwhile, you can access WPBeginner using Feedly app on your mobile device.
Top most features in WordPress you can own style easily no need deeply knowledge for manage your site in WordPress. In Contact 7 form, you can your own structure that you have already design in HTML or other one.
If working with CSS is a little beyond your current skill levels you might also consider using https://wordpress.org/plugins/contact-form-7-skins/ .
Contact Form 7 Skins which works right within the normal Contact Form 7 interface, making it easier for regular WordPress users to create professional looking Contact Form 7 forms using a range of compatible Templates and Styles – even if you don’t have HTML and CSS skills.
thanks Neil
Thanks Neil, I think that’s just what I needed. I got excited and installed it then wiped out my existing form, so I had to restore a backup of my site to get it working again, I’ll look into it more when I have time, I guess i’ll have to copy my current form into it or start from scratch with a new one. Off to watch some tutorials. Hopefully this is still the best one to use. I know it’s an old post here but it does say it was recently updated on the plugin page.
Fantastic article. I will use this to style one my website.
Another good article where you do not end up using yet another plug in.