Styling WordPress Contact Form 7

July 12, 2015   /   by Marco  / Categories :  Business, Websites, Wordpress
If you want to change the style of the WordPress plugin Contact Form 7 then read on.

Styling a contact form can be a difficult task, especially for those like me that have very little programming experience but with some persistence (more like trial and error), I managed to style the contact form. The website is built using WordPress and the theme that was used is Unik.

300-250 V3

The theme also had a built in Contact Form but it wasn’t customisable especially the way it sends out the information in the form so I decided not to use it. It was one of the reason why I had to use  the plugin Contact Form 7.

Firstly, lets have a look at the default style for the Contact Form 7 – it looks like this:

WordPress Contact Form 7 Default Style

As you can see the default style of the form is pretty boring and it actually doesn’t match the style guide of the website.

So the first step is to change the layout of the form. I wanted the Name, Your Email and Subject to be in the same row. The Your Message field and the Send button I wanted these to also be in a separate row. To do this, I ended up using the table syntax (yes I know most of you will say its best to use CSS but I didn’t have enough time to work this out so I used tables instead). Anyways, here’s the code that I used:

[codesyntax lang=”php”] [/codesyntax]

You need to paste the code in the Form Tab in Contact Form 7.

WordPress Contact Form 7 Settings Form

Make sure to click Save. After these changes the form should look like this:

WordPress Contact Form 7 Adding Columns in table

You will notice that the second and third row is not displaying full width for the second table and this is caused by some CSS syntax. So I wanted to make the following changes:

  • Display full width
  • Changed background colour
  • Removed the borders around each field
  • Changed the button and text colour
  • Changed the text for each field and the button to be all uppercase.

Here’s the CSS code I used:

[codesyntax lang=”php”] [/codesyntax]

I pasted this CSS code in the Unik theme’s Custom CSS section as shown below:

Theme Unik Custom CSS

So after all the above changes the final Contact Form looked like this:

Contact Form using WordPress Contact Form 7

If you need to put a captcha box on the Contact Form then you need to install the plugin called Really Simple Captcha and add the code like below:

WordPress Contact Form 7 Really Simple Captcha

Press save and you will now see the Captcha box on the form:

WordPress Contact Form 7 with Really Simple Captcha Example

RESOURCES
List of resources related to this article:

WordPress – Popular Content Management System

Unik – Awesome WordPress Theme

Contact Form 7 – WordPress Plugin for contact forms

Really Simple Captcha – WordPress Captcha Plugin compatible with Contact Form 7

FEEDBACK
I hope this has helped some of you. If you need any further help, please let me know by leaving a comment.
DO YOU LIKE WHAT YOU'VE READ?
Join our subscription list and receive our content right in your mailbox. If you like to receive some Great deals our Freebies then subscribe now!

Our Sponsors

  • Follow us:

OTHER ARTICLES YOU MAY LIKE


Digital Signage for displaying digital content

Digital Signage for displaying digital content

Digital signage is an innovative way to display dynamic digital content. For those of you who don’t know what it is, basically think of the screens that you have seen in retail stores and shopping centres that display advertisements. That is digital signage! Here’s an example: There are three main components that make up a […]

read more
BEST FORM BUILDER FOR WORDPRESS

BEST FORM BUILDER FOR WORDPRESS

Are you looking for the best form builder for WordPress? We have the answer for you and it’s called WPForms. As the name of the product clearly indicates it’s a WordPress Forms builder. There are many form builders out there for WordPress but WPForms is one of the best because it has such an easy […]

read more

Subscribe

Receive the latest news and awesome deals via email

Like our Page

site auditing tools