avgjoegeek.net

Geek Gamer Blogger

  • Home
  • About
  • Geek
  • Games
  • Blog
  • Contact
You are here: Home / Blog / How to Add CSS Style Contact Form 7

How to Add CSS Style Contact Form 7

August 27, 2013 by Jason Mathes

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:

contact-7-form-example

Forms with Style!

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?

wp-appearance-editor

Access your Editor!

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:

1
2
3
4
5
6
7
8
9
10
11
12
[text 1="your-name" language="*"]
 
Your Email (required)
[email* your-email]
 
Subject
[text your-subject]
 
Your Message
[textarea your-message]
 
[submit "Send"]

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:

Contact Form 7 Borders, Drop Shadow, Formatting
1
2
3
4
5
6
7
8
9
10
11
12
.wpcf7 input, textarea {
border: 1px solid #ccc;
font-size: 14px;
margin: 0 10px 10px 0;
padding: 8px 10px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: 0 2px 2px #ddd;
-moz-box-shadow: 0 2px 2px #ddd;
-webkit-box-shadow: 0 2px 2px #ddd
}

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.

Contact Form 7 - Declaring Custom Widths
1
2
3
4
5
6
7
.wpcf7 input {
width: 200px;
}
 
.wpcf7 textarea {
width: 80%;
}

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:

Location of where to place images 16x16 icons for Contact 7
1
public_html -> WORDPRESS INSTALL DIRECTORY -> wp_content -> themes -> YOUR THEME -> images

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

Adding Icons to Contact 7 Form
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* Icon for the Name field */
.wpcf7 .your-name input[type="text"], .name {
background: #fff url(images/user_icon.png) no-repeat 10px center;
padding-left: 35px
}
 
/* Icon for the Email field */
.wpcf7 .your-email input[type="text"], .wpcf7 .your-email input[type="email"] {
background: #fff url(images/mail_2_icon.png) no-repeat 10px center;
padding-left: 35px
}
 
/* Icon for the Subject field */
.wpcf7 .your-subject input[type="text"], .subject {
background: #fff url(images/notepad_icon.png) no-repeat 10px center;
padding-left: 35px
}

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:

Additional Contact Form 7 Fields for CSS Styles
1
2
3
4
5
6
7
.your-number
.website
.keyword
.page
.company
.budget
.your-address

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:

Contact Form 7 Submit Button Changes
1
2
3
4
5
6
7
8
9
10
11
12
.wpcf7 input[type="submit"] {
background: #217b30 url(images/green.png) repeat-x top;
border: 1px solid #137725;
color: #fff;
cursor: pointer;
font-size: 14px;
font-weight: bold;
padding: 3px 5px;
text-shadow: -1px -1px #1c5d28;
text-transform: uppercase;
width: auto
}

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.

Contact Form 7 Style - Complete Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
/* Contact Form 7 Styles */
 
/* Add Drop Shadow, Rounded Corners, and Background to Contact Form 7 */
.wpcf7 input, textarea {
border: 1px solid #ccc;
font-size: 14px; margin: 0 10px 10px 0;
padding: 8px 10px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: 0 2px 2px #ddd;
-moz-box-shadow: 0 2px 2px #ddd;
-webkit-box-shadow: 0 2px 2px #ddd
}
 
/* Adjusting Widths for Input and Text Area fields to Contact Form 7 */
 
.wpcf7 input {
width: 200px;
}
 
.wpcf7 textarea {
width: 80%;
}
 
/* Adding Icons to Text Fields for Contact Form 7 */
 
.wpcf7 .your-name input[type="text"], .name {
background: #fff url(images/user_icon.png) /* name.png */ no-repeat 10px center;
padding-left: 35px
}
 
.wpcf7 .your-email input[type="text"], .wpcf7 .your-email input[type="email"] {
background: #fff url(images/mail_2_icon.png) /* email.png */ no-repeat 10px center;
padding-left: 35px
}
 
.wpcf7 .your-subject input[type="text"], .subject {
background: #fff url(images/notepad_icon.png) no-repeat 10px center;
padding-left: 35px
}
 
/* Customizing the Submit Button for Contact Form 7 */
 
.wpcf7 input[type="submit"] {
background: #217b30 url(images/green.png) repeat-x top;
border: 1px solid #137725;
color: #fff;
cursor: pointer;
font-size: 14px;
font-weight: bold;
padding: 3px 5px;
text-shadow: -1px -1px #1c5d28;
text-transform: uppercase;
width: auto
}
 
/* Optional For Genesis Users that use a Global margin-bottom variable for the
 
tag */
.wpcf7 p {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: .45rem;
}

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.

Previous Article: Has Your Website Been Flagged for Spam?
Next Article: How to Add Twitter Cards for Your WordPress Site

About Jason Mathes

Single Dad, Geek, Gamer. I share my passion for gaming, technology, and WordPress. You will find reviews, tutorials, and more inside!

Subscribe for Free Updates

Want to stay up to date with avgjoegeek.net? Sign up and never miss another post!


Advertisements

AJG Recommends

BigScoots Genesis Framework by StudioPress

About Me

Jason Mathes
Single Dad, Geek, Gamer, and now grumpy old man. I write about things on the internet.
Read more about me here.

Subscribe for Free Updates

Want to stay up to date with avgjoegeek.net? Sign up and never miss another post!


Copyright, Privacy, Legal, Etc.

This blog is hosted on Big Scoots. The Domain is maintained by GoDaddy.com. avgjoegeek.net proudly uses the Genesis Framework.

Privacy and Disclosure Policy
Do not Copy or Re-Use anything found on this site without the express permission of the owner. avgjoegeek.net © 2010-2020