Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Style Contact Form 7 Forms in WordPress

Do you want to customize your Contact Form 7 forms and change their style?

Contact Form 7 is one of the most popular contact form plugins for WordPress. However, the biggest downside is that the out-of-the-box forms you add are very plain-looking.

In this article, we will show you how to style contact form 7 forms in WordPress.

How to style Contact Form 7 in WordPress

Why Style Your Contact Form 7 Forms?

Contact Form 7 is one of the most popular contact form plugins for WordPress. It’s free to use and lets you add a WordPress form using shortcode.

However, Contact Form 7 is very limited in features. One of the problems with Contact Form 7 is that the forms are styled plainly. Plus, the plugin doesn’t offer any built-in options to change the style of your forms.

This makes it difficult to match the contact form’s design with your website theme or if you want to edit the font and background color to make your form stand out.

If you want more customizable forms with advanced features, then we recommend WPForms, which is the most beginner-friendly contact form plugin. It comes with a drag and drop form builder, pre-built templates, and numerous customization options.

That said, let’s take a look at how to style a Contact Form 7 form in WordPress.

Getting Started with Contact Form 7

First, you’ll need to install and activate the Contact Form 7 plugin on your website. If you need help, then please see our guide on how to install a WordPress plugin.

Upon activation, you can head over to Contact » Add New from your WordPress dashboard.

Edit Contact Form 7 settings

You can now edit the form for your website and start by entering a title for your form.

The plugin will automatically add the form’s default name, email, subject, and message fields. However, you can also add more fields by simply dragging and dropping them where you want.

When you’re done, don’t forget to click the ‘Save’ button and copy the shortcode.

Copy the shortcode

The next thing to do is add it to your blog post or page.

To do that, simply edit a post or add a new one. Once you’re in the WordPress editor, go ahead and click the ‘+’ sign at the top and then add a Shortcode block.

Add a shortcode block

After that, simply enter the shortcode for your Contact Form 7 form in the shortcode block. It will look something like this:

[contact-form-7 id="117" title="Contact Form"]

Now, go ahead and publish your WordPress blog post to see the contact form in action. For the sake of this article, we have used the default contact form and added it to a WordPress page. This is how the contact form looked on our test site.

Contact form 7 preview

Now, are you ready to customize your Contact Form 7 form in WordPress?

Styling Contact Form 7 Forms in WordPress Using Custom CSS

Since Contact Form 7 doesn’t have built-in style options, you’ll need to use CSS to style your forms.

Contact Form 7 generates standard-compliant code for forms. Each element in the form has a proper ID and CSS class associated with it, making it easy to customize if you know CSS.

Each Contact Form 7 form uses the CSS class .wpcf7 that you can use to style your form.

In this example, we will use the custom font called Lora in our input fields and change the background color of the form.

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

If you need help adding the custom CSS, then please refer to our guide on how to easily add custom CSS to a WordPress site.

This is how our contact form looked after applying this CSS.

Custom CSS preview

Styling Multiple Contact Form 7 Forms

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. The problem with the CSS we used above is that it will be applied to all Contact Form 7 forms on your website.

To start, simply open a page containing the form you want to modify. Next, take your mouse to the first field in the form, right-click and select Inspect.

The browser screen will split, and you will see the page’s source code. In the source code, you need to locate the starting line of the form code.

Inspect form and get form id

As you can see in the screenshot above, our contact form code starts with the line:

<div role="form" class="wpcf7" id="wpcf7-f113-p114-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 the form id and the post id where this form is added.

We will use this ID in our CSS to style our contact form and replace .wpcf7 in our first CSS snippet with #wpcf7-f113-p114-o1.

div#wpcf7-f113-p114-o1{
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
#wpcf7-f113-p114-o1 input[type="text"],
#wpcf7-f113-p114-o1 input[type="email"],
#wpcf7-f113-p114-o1 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, "Open Sans", sans-serif;
font-style:italic;
}
#wpcf7-f113-p114-o1 input[type="submit"],
#wpcf7-f113-p114-o1 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}

You can now repeat the step for all your forms and replace the form ID for each Contact Form 7 form you want to customize.

Styling Contact Form 7 Forms with CSS Hero

An easier way you can change the style of Contact Form 7 forms is by using CSS Hero. It lets you edit your forms without the need to write CSS.

Simply install and activate the CSS Hero plugin on your website. You can follow our guide on how to install a WordPress plugin.

Next, go to the page containing your form and click on the ‘Customize with CSS Hero’ option in the toolbar at the top.

Customize with CSS hero

CSS Hero will provide you with an easy user interface to edit the CSS without writing any code.

Using the plugin, you can click on any field, heading, and other elements on your form and edit the background color, font, borders, spacing, and much more.

CSS hero interface

After you’ve customized your form, simply click the ‘Save & Publish’ button at the bottom.

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 create an email newsletter and the best live chat software for small businesses.

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

47 CommentsLeave a Reply

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

      Admin

  1. 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.

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

      Admin

  2. 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…

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

      • 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!

  4. 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?

  5. 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.

  6. 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.

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

  8. 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.

  9. 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.

  10. 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!

  11. 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

  12. 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.

  13. 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

  14. 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.

  15. 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, 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.

Leave a Reply to Deborah 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.