Customize and Style the Contact Form 7 WordPress Plugin


Contact 7 form is one of my favorite plugins for WP – in fact – I use it on all the sites I run. Gravity forms is an awesome alternative, but since it is free, and runs on WP Multisite, I stick with contact form 7. The only problem: Contact Form 7 needs customization and style. This tutorial will teach you how to create a contact form that goes from (the default css):

Contact Form 7 Customize and Style

To something a little more eye catching. This tutorial will add a bit of style and color to Contact Form 7. Feel free to change the colors in the process:

Contact Form 7 Customized

Let’s begin! First, you need to download the Contact Form 7 plugin.

Installing Contact Form 7

Installing the WordPress plugin could not be easier. Always make sure you have a recent backup of your database before you install or update anything on your site (I say this, but hardly every do it). After you backup you site, here’s how to install Contact Form 7.

  1. Log-in to Your WordPress website.
  2. Under “Plugins” click on “Add New”.
  3. Under ”Search” enter “Contact Form 7” .
  4. After the page reloads Click on “Install Now” under Contact Form 7.
  5. Click “OK” when you get the “Are You Sure” alert.
  6. After the plugin downloads click “Activate Plugin”.
  7. You’ll now have a “Contact” tab in the menu on the left side of the screen.
  8. Click the “Contact” tab.

We are going to be working with the default contact form. If you need to add fields, that is fine — just make sure they are in the same class.

Customizing the Contact Form 7 Plugin

Here’s the code to get it looking good.

There are a few things you need to keep in mind.

  1. You may need to adjust the width of the input and textarea. Every theme is different.
  2. Make sure you change the border color of the input, textarea, and .text to match your site.


The default HTML for Contact Form 7 is below:

<p>Your Name (required)<br />
[text* your-name] </p>
<p>Your Email (required)<br />
[email* your-email] </p>
<p>Subject<br />
[text your-subject] </p>
<p>Your Message<br />
[textarea your-message] </p>
<p>[submit "Send"]</p>

We want to change that too: Below, are we are doing is removing the Titles. We removed “Your Name (required)”, “Your Email (required)”, “Subject”, and “Message”. It is okay to remove those. We are going to add text inside the input boxes. Contact Form 7 calls this “placeholder text” – but we will get to that shortly.

<p>[text* your-name] </p>
<p>[email* your-email] </p>
<p>[text your-subject] </p>
<p>[textarea your-message] </p>
<p>[submit "Send"]</p>

Now, if you are following along, your form should look something like this:

Contact Form 7 Styled


You will notice that all of the titles have been removed. We did this to streamline everything. When working with customers, the shorter the CTA (the form), the better. If there are unneeded breakspaces and text, remove them.

Next up: Add the placeholders. The placeholders are the text that go inside the input boxes. They are “suggestions”. If you are confused, just look down below and it will make more sense.

<p>[text* your-name placeholder "First and Last Name"] </p>
<p>[email* your-email placeholder "Email Address"] </p>
<p>[text your-subject placeholder "Subject"] </p>
<p>[textarea your-message placeholder "Please leave us a short message."] </p>
<p>[submit "Send"]</p>

You will notice in this step all we did was add placeholder text. Placeholder text goes inside the input areas and give hints or suggestions. These placeholders replace the need for “Titles”.

Contact Form 7

At this point, we are ready to start styling the form. Don’t worry if your form doesn’t look just like mine (each theme has different default stylings)! We will get to that in the next step. The important part is that we have the structure down.


Just add the following:

/* Contact 7 Forms
--------------------------------------------- */
form.wpcf7-form {
background-color: #333;
text-align: center;
input#formname, #emailform, #subject, #message {
margin-top: 5px;
margin-bottom: 5px;
input#formname {
margin-top: 20px;
margin-bottom: 20px;
background-color: #00529b;
width: 50%;
input.wpcf7-form-control.wpcf7-submit input:hover[type="button"], input:hover[type="reset"], input:hover[type="submit"], .button:hover, .entry-content .button:hover {
background-color: #f15123;

Want More Posts Via Email?


  1. Todd says

    Hey, thanks a lot for this.

    I was fried doing a website, and wasn’t really wanting another 3 hours to figure out how to style that thing. I appreciate it.

  2. Mo says

    Doesn’t work for me.. Only does the name, message and send button. Telephone and email field I made is just plain windows style format.

  3. dorumarginean says


    Interesting article, but It might be a bit too difficult for some users, maybe you could a style addon


  4. Ankur says

    Good tutorial.but how can we delete a field from the form.and how to reflect the changes to the mail template below the form panel…??

Leave a Reply