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 HTML

The default HTML for Contact Form 7 is below:

<p>Your Name (required)<br />
 </p>

<p>Your Email (required)<br />
[email* your-email] </p>

<p>Subject<br />
 </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> </p>

<p>[email* your-email] </p>

<p> </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> </p>

<p>[email* your-email placeholder "Email Address"] </p>

<p> </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.

The CSS

Just add the following:

/* Contact 7 Forms
--------------------------------------------- */

form.wpcf7-form {
background-color: #333;
text-align: center;
}

input#formname, #emailform, #subject, #message {
width:75%%;
margin-top: 5px;
margin-bottom: 5px;
}

input#formname {
margin-top: 20px;
}

input.wpcf7-form-control.wpcf7-submit{
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;
}
  • http://socialogi.ca Shyam

    Awesome work this! I need to try this out because i use a lot of contact form 7 across all my client sites.

  • http://www.winnipegwebguy.ca Todd

    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.

    • https://elioverbey.net Eli Overbey

      Happy to help!

  • Mo

    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.

    • https://elioverbey.net Eli Overbey

      Did you add a class or id so you could style the telephone and email fields?

  • dorumarginean

    Hi,

    Interesting article, but It might be a bit too difficult for some users, maybe you could a style addon http://wordpress.org/plugins/contact-form-7-style/

    Thanks,

  • Ankur

    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…??

  • http://www.pawstoday.com Marco

    Thank you a lot! Excellent tutorial!

  • http://tex39.ru Ravil Sadretdinov

    Thank you!

  • Mahendra Patidar

    checkout this plugin that help to change layout without changing

    http://wordpress.org/plugins/custom-skins-for-contact-form-7

  • http://ppc.halo-media.com/contact-us/ Hayes

    Please Help! For the life of me, I can’t seem to adjust the width of the text inputs. I have followed all instructions. Would really appreciate it if someone can assist with it. Thanks

  • Diego Miglino

    Hi! nWhich plugin did you use for de social media sidebar slider? It’s cool! nThanks!

  • U.s. Man Awan

    very good tutorial