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):

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:

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 />
[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:

 

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

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