WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
  • Deals
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Tutorials» How to Style Contact Form 7 Forms in WordPress

How to Style Contact Form 7 Forms in WordPress

Last updated on December 16th, 2016 by Editorial Staff
255 Shares
Share
Tweet
Share
Special WordPress Hosting offer for WPBeginner Readers
How to Style Contact Form 7 Forms in WordPress

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

Subscribe to WPBeginner

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.

Default Contact Form 7 form on a WordPress site using  default WordPress theme

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 Contact Form 7 forms with CSS in WordPress

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.

Finding the element ID for your contact form

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.

Styling Contact Form 7 Form Using CSS Hero

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.

255 Shares
Share
Tweet
Share
Popular on WPBeginner Right Now!
  • Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • Step by Step Guide: How to Start a Podcast with WordPress

    How to Start Your Own Podcast (Step by Step)

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

The Ultimate WordPress Toolkit

30 Comments

Leave a Reply
  1. Mary Lou Hoffman says:
    Dec 20, 2017 at 8:44 pm

    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.

    Reply
    • Karu Price says:
      Mar 12, 2018 at 8:02 am

      You can target the lable area like this-

      .wpcf7 form p label {
      color: white;
      background: black;
      font-family: sans-serif;
      }

      Reply
  2. Chris says:
    Dec 4, 2017 at 9:54 pm

    Thanks!

    Reply
  3. Abhijeet says:
    Oct 19, 2017 at 6:00 am

    I want to reduce gap between name and email boxes…how to do it.

    Reply
  4. Naveen says:
    Apr 12, 2017 at 5:19 am

    Thanks for a great post, was very helpful.

    Reply
  5. Josh says:
    Feb 8, 2017 at 8:34 pm

    This helped heaps. Thanks!

    Reply
  6. Joel Desrosiers says:
    Jan 21, 2017 at 9:47 am

    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?

    Reply
  7. Merriann Fu says:
    Jan 2, 2017 at 8:07 pm

    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!

    Reply
    • Don Walley says:
      Feb 27, 2017 at 1:04 pm

      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.

      Reply
  8. Miguel Ceballos says:
    Dec 10, 2016 at 6:54 pm

    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.

    Reply
  9. Osama Ali Khan says:
    Nov 1, 2016 at 7:51 am

    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;
    }

    Reply
  10. Deborah says:
    May 6, 2016 at 6:55 am

    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.

    Reply
    • WPBeginner Support says:
      May 8, 2016 at 7:59 pm

      Glad you found it helpful. :)

      Reply
  11. Mikko says:
    Feb 19, 2016 at 4:07 am

    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.

    Reply
  12. Wendy says:
    Dec 21, 2015 at 8:36 am

    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!

    Reply
  13. pranav shinde says:
    Dec 21, 2015 at 7:05 am

    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

    Reply
    • WPBeginner Support says:
      Dec 21, 2015 at 8:38 am

      You should not edit the core plugin files. Instead you should add your CSS to your theme’s stylesheet.

      Reply
      • pranav shinde says:
        Dec 30, 2015 at 10:12 am

        ya i understood then can you please help me how can i do it..please help me in detail

        Reply
        • pranav shinde says:
          Dec 30, 2015 at 10:36 am

          thanks a lot sir very much helpfull will suscribe your channel

        • pranav shinde says:
          Dec 30, 2015 at 10:49 am

          means i hould copy this code in my themes css file righht??

  14. Monique says:
    Nov 1, 2015 at 7:09 pm

    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.

    Reply
  15. puneet singh says:
    Sep 7, 2015 at 2:49 pm

    this very helpful realy nice tutorial

    Reply
  16. Jiniya says:
    Aug 7, 2015 at 2:50 am

    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

    Reply
    • WPBeginner Support says:
      Aug 7, 2015 at 2:55 pm

      Sound like a good idea. Meanwhile, you can access WPBeginner using Feedly app on your mobile device.

      Reply
  17. Anee says:
    Aug 6, 2015 at 6:21 am

    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.

    Reply
  18. Neil Murray says:
    Aug 5, 2015 at 11:15 pm

    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.

    Reply
    • Sam says:
      Aug 14, 2015 at 2:39 am

      thanks Neil

      Reply
    • Andrew Wilkerson says:
      Mar 23, 2018 at 6:43 am

      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.

      Reply
  19. Bhongo says:
    Aug 4, 2015 at 1:36 pm

    Fantastic article. I will use this to style one my website.

    Reply
  20. Mark says:
    Aug 4, 2015 at 11:54 am

    Another good article where you do not end up using yet another plug in.

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 600,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
WPForms Logo
WPForms
Drag & Drop WordPress Form Builder Plugin. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 25 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2018 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2018)
    • Which is the Best WordPress Slider? Performance + Quality Compared
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • 5 Best VPN Services for WordPress Users (Compared)
    • HostGator Review - An Honest Look at Speed & Uptime (2018)
    • SiteGround Reviews from 1032 Users & Our Experts (2018)
    • Bluehost Review from Real Users + Performance Stats (2018)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Start a Podcast with WordPress (Step by Step)
    • How to Choose the Best Domain Name (8 Tips and Tools)
    • How to Setup a Professional Email Address with Google Apps and Gmail
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2018 – Step by Step Guide
Deals & Coupons (view all)
Pippity
Pippity Coupon
Save 25% off on Pippity, the ultimate lead generation plugin for WordPress.
Soliloquy Logo
Soliloquy Coupon
Get 10% off Soliloquy, the best responsive WordPress slider plugin available in the market.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • List25
  • Awesome Motive
  •  

Copyright © 2009 - 2018 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

WordPress hosting by HostGator | WordPress CDN by MaxCDN | WordPress Security by Sucuri.