Styling Contact Form 7 in WordPress

For most people creating a WordPress website, a contact form is one of the most important pieces of the puzzle. An effective contact form doesn’t need to be fancy, it just needs to serve it’s purpose. As long as email is still around – contact forms are something that most websites should have. Displaying links to your social media accounts and an email address is fine, but contact forms make things even easier for people to contact you. You can use your contact list for lots of useful things like building marketing purposes, customer support issues and more.

If you decide to dive into WordPress without a whole lot of background knowledge (like I did), one of the first things you will end up fiddling with is a contact form plugin. Contact Form 7 has been downloaded over 6 million times! With over 1 million active installs, it is by far the most popular contact form plugin for WordPress. It works great and it is free. One of the best things about it is that you can use it to learn.

Just like the plugin author Takayuki Miyoshi, I like to use plugins and themes to learn about front end web design. In a recent blog Miyoshi wrote…

Before I started developing Contact Form 7 in 2007, I was an avid user of Ryan Duff’s WP Contact Form and Chip Cuccio’s Contact Form ][. I learned how to implement contact forms as WordPress plugin by looking at their code. These developers were like teachers.

While I may not be the best student, I enjoy looking at source code to learn. Even if you don’t become a designer or developer it can help you understand the tools you are using. If you are looking for a free and simple contact form, check it out it and start playing with it. Aside from being a tool for learning, Contact Form 7 is easy to use and it works great.

I have done a few web projects so far and it can be frustrating at times. The more I learn, the more complex things seem to get. While I don’t think my foray into front end development will lower my blood pressure anytime soon, it has made things that used to be intimidating feel like child’s play (with middle school students all over the world brandishing their HTML/CSS skills, it basically is child’s play). This post will show you how ridiculously simple it is to style a contact form so it matches your site.

The contact will go from this…

To this…

CSS Styling Contact Form 7

Okay, now I will go over the steps that I took to style my contact form. I am using an Enfold Child theme and I did everything directly from the WordPress dashboard. Child themes are great for adding custom CSS without any unexpected problems. For more on that checkout our post on  how to create a Child Theme.

Styling your form will only take you a few minutes – and you may just need to play around with things until they look right. I ought to warn you that I am not super talented or efficient with CSS. So I doubt you will be seeing any industry best practices here. This tutorial is designed to help beginners understand how to customize their contact form quickly. You will have to go a little further than the scope of this post to make sure that your form is fully responsive and cross browser compatible. The tools I used are:

• Chrome Web Browser (DevTools)
• An installation of WordPress with an Enfold Child Theme active
• Windows Notepad

Here are some very helpful resources I pulled directly from the contactform7 website to check out:

http://www.w3.org/Style/CSS/learning
http://www.w3schools.com/css/
https://developer.mozilla.org/en-US/learn/css

There are only 2 main things we need to do to accomplish or task today:

1. Add the contact form to page via shortcode
2. Add CSS styles from the dashboard

Step 1 – Adding the Contact Form via Shortcode

Once you install Contact Form 7, you will see the Contact item on the dashboard menu. Click that to create and edit your contact forms. After you create a form, you can add the shortcode to any area of your site. Below we will create a new form and add the shortcode to a section of the website.

Step 2 – Finding the Right Styles

All modern web browsers have a handy set of developer tools to make things easier. I don’t have Dreamweaver or a local server environment to develop on at the moment, so I just use Chrome’s DevTools to figure things out. For a primer on that, see my post on Adding Custom CSS to WordPress. In the video clip below, you can see that I am able to change the CSS directly from the web browser to see how my changes will look.

There’s not much to this contact form. I just wanted to make it match the site. So once I have the changes I want I will simply paste those into the style.css file of my child theme by going to Appearance > Editor.

Step 3 – Change the Font Color and Links

As I mentioned earlier in this post, you may have to play with things a little bit to get everything to your liking. There are a couple more things I need to do here. Change the font color and the color of the links. Even though Contact Form 7 has it’s own class id, I will add my own to do this. This may not be the best idea if you have tons of fields. Below you can see I just created a class and added it to the specific <p> elements I wanted to change.

For the links I will just do some simple inline CSS styles since there are only two. I ended up changing the color of the links to #AAAAAA after this. I also added the text: How Can We Help? at the top and applied some inline CSS styles.

Below is the finished result.

Hey…it’s no work of CSS art but at least it matches the site that I am trying to put it on.

Final Words

Easy enough? I’m sure there are better ways to code this and I will end up reorganizing my child theme’s style.css file so it’s not such a mess. I know that the inline styles are a big no no by many CSS professionals, but I have a very small site to manage. My solution may be quick and dirty but it got the job done.

I hope this post helps you find out how to customize your contact forms. If you want something fancy and modern without having to do any CSS, PHP or Javascript, there are other contact forms available. Check out Looks Awesome’s very own Ninja Kick Contact. Do you have any contact form tips or insights to share? Feel free to let us know in the comments section. You can also contact us, we use Ninja Kick for this.