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:

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.

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.

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:

Internet Marketing Tips

Get organic, direct, referral, and social goodness delivered straight to your inbox.

Just add your email address above, and I'll be in touch soon.

  • 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

  • alan

    Great find, works as stated, clean design, nice job. I do wish I could darken the temporary grey label type within the fields. People state that it’s just too faint to read. Is that possible? Thanks.

  • Elliot

    Please help: all I want to change is my button, for submitting the form. It currently looks like this:
    Submit your form
    I want it to have a box around it, so its more obvious to people that its a link. Can you please help me– or anyone else?

  • Marie Maille

    I have Created a an application form and it looks fine on my website. However, when it is filled in and sent by email when it gets to the recipients there is only HTML the replies are not visible. What have I missed?

  • William

    I don’t know if it’s just me but did this guy specify where to add the CSS? He says “Just add the following”

    • Andrew Lopez

      Hi William! You can add the CSS to the style.css – preferably to the child themes CSS file. Hope this helps!

      • William

        Thanks Andrew. I figured it out already. Great work!

  • tier3labs

    How do you style the error messages?

  • Neil White

    Hey there, firstly what a fantastic tutorial, really easy to follow. Just one thing, is the field font color defined in the theme CSS or is there a custom hack?

    • Dan Miler

      Hi Neil! Did you tried this plugin Contact Form 7 Style https://wordpress.org/plugins/contact-form-7-style/ , it’s easy to use and provide customization for styling. Hope this helps!

      • Neil White

        Hi Dan, thanks for your reply, some themes override the custom css for contact form 7 but I found a way round it using this code and it worked perfectly:

        ::-webkit-input-placeholder { /* WebKit browsers */
        color: black !important;
        }

        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: black !important;
        opacity: 1;
        }

        ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: black !important;
        opacity: 1;
        }

        :-ms-input-placeholder { /* Internet Explorer 10+ */
        color: black !important;
        }

  • durdenjo

    Hi, how can i change the color of the input text ?

    • Andrea

      Hey! That could work setting 75% of width, the problem is that maybe that class is overwritten by another one. Try to replace the line with this:

      width:75%% !important;

      If that doesn’t work either you have to write the size you want, for example:

      width: 200px;

      And then use media items to fix for the other resolutions (also mobile) like this:

      @media screen and (min-width: 768px) and (max-width: 979px){

      input#formname, #emailform, #subject, #message {width:150px !important;}
      }

      That’s it! You just put the min width of the screen and the max width, and you do this for every different resolution and set the width you want, the website will follow that.

  • Helene

    Hi, I bought a theme with a contact form that did not work. Now I am trying to implement contact form 7 in the theme template. Is it possible?

  • Angel

    hi, i am using contact form 7 for pagelines and i´d like to know how can i change the banner color that appears when a user submit the form with a green banner and message thanks about your email, i hope anyone can help, thanks a lot and best regards

  • Gibson

    but where to add the css..please help
    thanks in advance