How to Add CSS Style Contact Form 7

It’s been driving me crazy lately. Everything is looking great then I go and look at the Contact Form 7 I have on here and I hated the default look. So after doing a lot of research, trial and error, I have not only figured out how to make them look great – but found out all about the inner workings as well! This article explains on how to add CSS style Contact Form 7!

What is Contact Form 7?

Its an awesome free WordPress plugin that allows you to easily add forms to your WordPress site! But it can do so much more than just add a simple form. If you take the time you can set it up for potential customers to sign up for additional information, use re-Captcha to protect your site from getting spammed and more!

What is CSS?

[easyazon-image align=”right” asin=”1449325947″ locale=”us” height=”160″ src=”https://ecx.images-amazon.com/images/I/41Mc93CGTrL._SL160_.jpg” width=”122″]CSS or Cascading Style Sheets are the design elements of your WordPress blog. They tell the browser how things are to be laid out and how they should be displayed. If you are not familiar with adding CSS styles to your site? Don’t worry – I will walk you through what you will need to do to add the styles for Contact 7. If you want to find out more about CSS I suggest you check out the sites I have listed below:

W3Schools CSS – This is where you can learn all about Cascading Style Sheets. I use it as a reference as there is no way I can remember everything.
CSS Zen Garden – This site showcases web developers and CSS examples. Get ready to be inspired and awe over what can be down with the power of just CSS and HTML!

How to add CSS Style to Contact Form 7

Please Note: Although I did my best to make sure this won’t break your site it is always best to backup before making any changes you make to your site!

OK, now down to business! You will need to have the Contact Form 7 you want to use setup already. You will perform a few tweaks to the forms as you move through the tutorial but they are minor. In the end you will have a form that looks like the example below:

What Will Be Changed?

This is going to change the look for ALL of your Contact Form 7 you have setup on your WordPress site. If you have multiple different types of forms you will need to make adjustments accordingly. This will not affect any other styling to other forms on the site. I will include all of the different fields available for you to style as needed as well!

With the example I created you will have the following:

• Remove the Labels and add them into the Form input fields.
• Add a 16×16 icon into the form input fields.
• Create rounded edges  for all of the input fields.
• Change the submit button.

Where to Add the CSS Styles?

You will need to go from your WordPress Admin Menu then go to: Appearance -> Editor and then selecting the ‘style.css’ that applies to your theme and add the CSS code there. For me since I use the Genesis by Studio Press its a snap to get to and make edits. OK, lets get started!

Remove the Labels

First you want to setup the form to be able to accept the new styles you are about to implement. Go to your Contact Form 7:

Click on Contact from your WP Admin then select the form you have setup. Make the following adjustments:

This is the default look of the form when you originally create it:

Then changed it to the following:

Contact Me

[text* your-name placeholder “Your Name (required)” ]

[email* your-email placeholder “Your Email (required)” ]

[text your-subject placeholder “Subject (yes, you need one)” ]

[textarea your-message]

[submit “Send”]

As you can see quite a bit has changed. The first change was removing the labels that would show up next to the form originally. Then I added the ‘placeholder “Enter Text Here”‘ inside of the brackets. This moves the text usually found outside of the form field to inside of it. The only other thing I added is the ‘Contact Me’ at the top of the form. This is optional of course.

Add the Rounded Corners and Border Color

Below is the code to add the border, rounded edges, and a slight drop shadow to the text fields and text area of your form:

I wanted differentiate the size of the text area from the input fields so I used the following code to help re-size them to what I wanted to fit the site’s template better.

Adding the Icons

To add the icons to the form in the example. I first had to find the icons I wished to use. They are 16px by 16px in size. Make sure that you are able to use the icons you find for your own site!

First you will need to put the images in the correct location. You will need to FTP or upload them through your web host control panel to the following location:

This allows you to use the code below to be able to easily find the images and display them properly.

You will need to use the separate code snippets for each field. The important thing to remember here is to make sure to replace the ‘images/’ with the correct name of the icon you wish to use.

Some other field types Contact Form 7 uses that you could implement:

Although the above isn’t complete – you get the idea. You can always inspect the source code to find out another necessary field if you wish to add additional icons.

Changing the Submit Button

I didn’t like the default submit button so I adapted the one I use for the email subscriber form here on the site. You can adjust it any way you like – instead of using an image you can always just use a color instead:

Code Example:

Below is the entire code used to change the style of the Contact Form 7 I use here on avgjoegeek.net. I tested it and it does work on all of major browsers – IE, Firefox, and Chrome.

Questions?

I hope you enjoyed this tutorial. Please keep in mind I’m not a web developer. I’m just a guy who likes to figure things out. If you have an issue with the tutorial? I will do my best to try and answer any questions you might have. Please leave a comment below with your questions.