The very popular Contact Form 7 WordPress Plugin.
Some popular addons for Contact Form 7.
Flamingo
Contact Form 7 Honeypot
Easy Contact Form 7 Widget
Contact Form 7 Datepicker
Contact Form 7 to database extension
Contact Form 7 PayPal Add on
——
Please not that contact form 7 does not have a style.css file. Check right below for information about this.
Contact Form 7. Is one of the most popular contact form plugins for WordPress.
WordPress plugin repository Contact Form 7
It is very easy to use, but it takes a little while to get into how to customize the plugin. In HD for a better full screen viewing experience.
Begin by installing the plugin.
Go to the settings (Contact tab) and a default contact form is already created.
To customize the form. What I did was to copy the css styles file. In the installed plugins you can click Edit and the files will show on the right side. Close to the bottom is the styles.css file. These are some of the codes used. I copied and pasted these to my css file. Made some minor adjustments. Looked higher up in the duplicate of the theme css file that I am using and found a section on forms. Here I made some additional adjustments to the contact form.
The Contact Form 7 CSS file is not listed under the plugin edit area any longer.
But there is a way to find the CSS tags used.
In Chrome/Firefox (Safari and Operas has something similar as well) right click and use Inspect Element.
Here you can see the html div tags used and the CSS as well.
Click this link to go to the post showing how Inspect Element works.
You can also use the below CSS code, but check and see if the tags are correct. Most likely you will need to change the div tag names I have used in my example.
For additional help check:
[Docs](http://contactform7.com/docs/)
[FAQ](http://contactform7.com/faq/)
[Support Forum](http://wordpress.org/support/plugin/contact-form-7)
Helpful web sites:
http://www.ejhansel.com/style-the-contact-form-7-wordpress-plugin/
http://www.wpsnippet.com/styling-contact-form-7/
http://contactform7.com/tag-syntax/
http://www.ehow.com/how_8425125_tweak-css-contact-form-7.html
http://voodoopress.com/configuring-contact-form-7-to-work-perfectly-with-a-twentyten-child-theme/
Here is the CSS I use for the below form:
From the form section in the style.css (which I copied into a new style css file – the form section is closer to the top below headings in my css file). It will vary for each css file.
NB! The below CSS div tag names can be different for you then what I have below. If you are using Chrome then right click any place in your form and select Inspect Element and then check out the CSS on the right side to locate the Div tag names used. You can then paste code into the CSS section on the right to check out what it looks like. Notice the Div tag names and copy the code into your own CSS style sheet. Do also check out my comment further below.
/* text area */
textarea { /* Message box */
line-height: 150%;
width: 94%;
}
/* form input:focus */ /* Clicking into a text box it gets focus */
textarea:focus, input[type=password]:focus, input[type=text]:focus, input[type=search]:focus {
outline: none;
background-color: #f9f9f9;
}
/* form button */ /* Send button */
input[type=reset], input[type=submit], button {
background: #761716; /* CHANGED #333 to #761716 */
color: #fff;
border: none;
padding: 7px 20px;
cursor: pointer;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* form button:hover */
input[type=reset]:hover, input[type=submit]:hover, button:hover {
/* background: #000; */
color: #fff;
/* ADDED */
background-color: #761716;
-moz-box-shadow: inset 0 0 15px #888;
-webkit-box-shadow: inset 0 0 15px #888;
box-shadow: inner 0 0 10px #888;
}
I pasted the css code into the bottom my customized style.css.
/************************************************************************************
Contact Form 7
*************************************************************************************/
/* the form */
div.wpcf7 {
margin: 10px; /* CHANGED 0 to 10px – a margin around the whole form*/
padding: 0 0 0 2.5em; /* CHANGED 0 to 0 0 0 15px to 2.5em create more distance */
/*ADDED*/
width: 70%; /* ADDED*/
}
/* Bottom response output box*/
div.wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
}
/* Sent ok box */
div.wpcf7-mail-sent-ok {
border: 2px solid #398f14;
}
div.wpcf7-mail-sent-ng {
border: 2px solid #ff0000;
}
div.wpcf7-spam-blocked {
border: 2px solid #ffa500;
}
/* Bottom message box */
div.wpcf7-validation-errors {
border: 0px solid #f7e700; /* CHANGED from 2px to 0px to remove the yellow border */
}
span.wpcf7-form-control-wrap {
position: relative;
}
/* Not Valid – smaller pop up boxes */
span.wpcf7-not-valid-tip {
position: absolute;
top: 20%;
left: 20%;
z-index: 100;
background: #fff;
border: 1px solid #ff0000;
font-size: 10pt;
width: auto; /* Changed from 280px to auto */
padding: 2px;
}
/* Some of the below code is from: http://www.wpsnippet.com/styling-contact-form-7/ */
/* Various input boxes */
.wpcf7-form input, .wpcf7-form textarea {
border-color: #808080 ;
border-style: solid;
border-width: 2px;
padding: 4px;
line-height: 16px;
font-size: 14px;
-webkit-border-radius: .4em;
-moz-border-radius: .4em;
border-radius: .4em;
-webkit-box-shadow: 0 8px 6px -7px black;
-moz-box-shadow: 0 8px 6px -7px black;
box-shadow: 0 8px 6px -7px black;
}
.cap {
margin: 0 0 2em 0;
}
The result:
If your not able to view the youtube video I have also added it directly to the site:
To download right click and save as.
thank you for useful article
Great article! We are linking to this particularly great content on our website.
Keep up the great writing.
Hi,
Thanks for sharing.
Have you guys tried to style the form with Ninja Kick? Check it out — http://looks-awesome.com/portfolio/wordpress-plugins/nks-wordpress-contact-form/
No coding required, but 3 styles only, no custom styling allowed. Overall design (styling) looks great.
Tx. for this very helpful information. Do u have a solution for implementing two or more forms with different styles?
tx
Hey Arno
I had to do a bit of digging into my notes.
In your Form where it lists the various field (Edit the contact form)
Add a class around the form. Here is an example without < brackets > to make sure that it is visible.
div class=”form1″
—Here is the form fields like your-name etc etc—-
/div
OPS! Add brackets around the div tags.
Next step is to define them in the CSS Style Sheet.
An example:
.form1 input {
background: yellow;
}
The input fields will now have a yellow color in them. Do right click in Chrome or Firefox etc and select Inspect Element to check that it is the correct CSS for your form.
I plan on creating another video tutorial soon.
And also sorry for not reading all the info in the page. It was going to save you some time. Really appreciate your help.
Regards
Your welcome Stefan! 🙂
Yeah i got now really thx. And also i found some info witch says that the defauly style.css file is in the local host ( where your cpanel is —-> file manager – wp-content – plugins – contact for 7) Thx you very much.
Hello. I really need some help. I like the video i watched it 2 times but i can’t customize my contact form like you do in the video cause i cant finde the style.css file in the edit contact form 7 menu. In the video it’s 3.3.1 version, and now days it’s 3.7.2. I really want to customize my contact form like you do in the video but it is since 2012 … so pls give me some advice what can i do. Thanks in advance.
Regards.
Hey Stefan
There is no style.css file in contact form 7. One needs to right click in Chrome/Firefox (Safari and Opera has something similar) and then select Inspect element. Do check what I write right under the embeded video above.
Hi Bajamin. This is what I do. Since div tag names will likely be different. In Chrome as it is the browser I mostly use right click an element and select Inspect Element. The HTML code shows up right below. To the right you will see the CSS. Check out this video: http://www.youtube.com/watch?v=dH8mjPZEJ34
Since the div tag names have changed you will need to check out the names of the ones you use. For instance the general text area: wpcf7-form input, .wpcf7-form textarea in your form it is named textarea.textarea. This I could see with the above procedure. In Inspect Element or if you use another browser check out how it is done there. I could see the name in the css on the right. I copied what I used above into your textarea.textarea and saw how it changed. Just remember that what you paste in there you will also need to paste it directly into your css stylesheet.
Happy New Year!
Hi Paal, a very helpful tutorial. I got a question hope you can help. I copy the above css code (form section and custimzed style css), I just wanna give it a try, but it did not show result effect the same as yours, could you give a little help? pls check my website contact page is http://www.toppstrap.com
Thank you!
And here’s the link to it. http://jonbalagot.zz.mu/easy-styling-of-contact-form-7-with-twitter-bootstrap/
Please share..:) as you’d like.
Btw Nice and simple tutorial!
Very helpful tutorial. By the way just asking if I could post another version. I created a tutorial with the same purpose to style the Contact Form 7 but with the use of Twitter Bootstrap. If interested to install Bootstrap, other tutorials regarding the installation is there at my site.
Hi
You may download the videos to give your website
In Iran, we do not have access to YouTube
I have added a video link to the bottom of the content area in this page. So that you and others that do not have access to youtube can view and download it directly from this site.