WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All 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
266 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
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.

266 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

45 Comments

Leave a Reply
  1. hmi says:
    Nov 26, 2019 at 7:37 am

    Hi sir, where can I find the css code of fields ?
    Thank you

    Reply
    • WPBeginner Support says:
      Nov 26, 2019 at 10:30 am

      For finding the current CSS you would want to use inspect element:

      https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/

      Reply
  2. Tony Tran says:
    Oct 13, 2019 at 4:03 am

    i can’t change color background css button submit….please help

    Reply
    • WPBeginner Support says:
      Oct 14, 2019 at 10:47 am

      You may be targeting the wrong object, you may want to take a look at our article here:

      https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/

      Reply
  3. Deshave says:
    Sep 12, 2019 at 2:13 pm

    Submit button in pdf no longer works since uploading form to WordPress website.

    Reply
    • WPBeginner Support says:
      Sep 13, 2019 at 9:47 am

      The pdf embed we’re recommending is for viewing content. For filling out forms we recommend using a form plugin

      Reply
  4. zeeshan alam says:
    Jul 7, 2019 at 3:54 am

    Thanks for sharing Sir

    Reply
    • WPBeginner Support says:
      Jul 8, 2019 at 2:52 pm

      You’re welcome :)

      Reply
  5. Steve says:
    May 7, 2019 at 10:04 am

    Hello is it possible to ad a message if i dont filled out one ore more “Required fields” to get a Message ? Because i Only get the “red arrows” on the “Required fields” that I don’t filled out. In I want additionally a error Message like

    “One or more Required fields have an error. Please check and try again.”
    But i Only have the red arrows, and the Problem is on mobile Phones the red arrows are not in the window and the Client don’t see it.

    Reply
    • WPBeginner Support says:
      May 7, 2019 at 10:29 am

      You would need to reach out to contact form 7’s support for what they currently have available.

      Reply
  6. FRED_VERSATILE says:
    Feb 8, 2019 at 4:24 am

    Hello,
    Thank you for this tutorial.
    I would like to add a custom image at the right of the “send” label, in the button.
    I’ve done it with a :before for the other buttons on my website, but i can’t find the element in the send form to put the CSS…

    Reply
    • WPBeginner Support says:
      Feb 8, 2019 at 11:34 am

      Depending on your form ot would change what to target, if you use inspect element you should be able to see the ID or class of the object:
      https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
      You could also use :after instead of :before as another option

      Reply
  7. Muhammad Tahir says:
    May 27, 2018 at 8:48 pm

    How to change response text color of SPECIFIC contact form

    Reply
  8. waqas says:
    May 15, 2018 at 2:06 am

    Can we add a time field in contact form 7 without plugin?

    Reply
  9. 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
      • Rita Accarpio says:
        Jun 19, 2018 at 6:47 am

        Hi there!

        I’m here struggling with modal headings. I changed the form background to a darker color but now I want to change the heading’s color. Doesn’t seem to change at all with all the different options I tried so far.

        Do you know anyway to do this? Help me please!

        Thanks!

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

    Thanks!

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

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

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

    Thanks for a great post, was very helpful.

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

    This helped heaps. Thanks!

    Reply
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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??

  22. 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
  23. puneet singh says:
    Sep 7, 2015 at 2:49 pm

    this very helpful realy nice tutorial

    Reply
  24. 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
  25. 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
  26. 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
  27. Bhongo says:
    Aug 4, 2015 at 1:36 pm

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

    Reply
  28. 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 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
Smash Balloon
Smash Balloon
Add Custom Social Media Feeds in WordPress. 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]
    • 30 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 2020 (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 (2020)
    • How to Choose the Best Domain Registrar (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
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2020)
    • SiteGround Reviews from 4196 Users & Our Experts (2020)
    • Bluehost Review from Real Users + Performance Stats (2020)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • 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 2020 – Step by Step Guide
Deals & Coupons (view all)
Pretty Links
Pretty Links Pro Coupon
Get up to 35% OFF on Pretty Links Pro WordPress URL shortener and affiliate links cloaking plugin.
MainWP
MainWP Coupon
Get 15% OFF on MainWP WordPress multisite manager plugin.
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).
Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon

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

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress CDN by MaxCDN | WordPress Security by Sucuri.