• Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

Easy Web Design Tutorials

WordPress Tutorials and more

  • Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

25 March - 2013 By Paal Joachim 17 Comments
Last updated on: April 9, 2017

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](https://contactform7.com/docs/)
[FAQ](https://contactform7.com/faq/)
[Support Forum](https://wordpress.org/support/plugin/contact-form-7)

Helpful web sites:
https://www.ejhansel.com/style-the-contact-form-7-wordpress-plugin/
https://www.wpsnippet.com/styling-contact-form-7/
https://contactform7.com/tag-syntax/
https://www.ehow.com/how_8425125_tweak-css-contact-form-7.html
https://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: https://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:

WordPress plugin Contact Form 7 css styled form

If your not able to view the youtube video I have also added it directly to the site:

https://www.easywebdesigntutorials.com/wp-content/uploads/Contact-Form-7-Wordpress-Install-and-customization-tutorial.MP4

To download right click and save as.

Share this:

  • Email

Categories: Plugins, WordPress Tagged: Contact Form 7

Paal Joachim Romdahl

I enjoy teaching and creating tutorials. As well creating web sites.
I help people gain WordPress knowledge through my easy to follow tutorials and specialized training. Contact me for more information on how I can improve your WordPress skills and to help get your web site quickly up and running.

Comments

  1. joe says

    4 April - 2015

    thank you for useful article

    Reply
  2. CAT Results says

    29 November - 2014

    Great article! We are linking to this particularly great content on our website.

    Keep up the great writing.

    Reply
  3. Peter says

    31 May - 2014

    Hi,
    Thanks for sharing.

    Have you guys tried to style the form with Ninja Kick? Check it out — https://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.

    Reply
  4. Arno says

    21 May - 2014

    Tx. for this very helpful information. Do u have a solution for implementing two or more forms with different styles?
    tx

    Reply
    • easyweb says

      2 June - 2014

      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.

      Reply
  5. Stefan says

    11 April - 2014

    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

    Reply
    • easyweb says

      11 April - 2014

      Your welcome Stefan! 🙂

      Reply
  6. Stefan says

    11 April - 2014

    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.

    Reply
  7. Stefan says

    26 March - 2014

    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.

    Reply
    • easyweb says

      28 March - 2014

      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.

      Reply
  8. easyweb says

    1 January - 2014

    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: https://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!

    Reply
  9. Bajamin So says

    30 December - 2013

    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!

    Reply
  10. Jon Balagot says

    3 November - 2013

    And here’s the link to it. https://jonbalagot.zz.mu/easy-styling-of-contact-form-7-with-twitter-bootstrap/

    Reply
    • easyweb says

      3 November - 2013

      Please share..:) as you’d like.
      Btw Nice and simple tutorial!

      Reply
  11. Jon Balagot says

    3 November - 2013

    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.

    Reply
  12. mehdi says

    19 September - 2013

    Hi
    You may download the videos to give your website
    In Iran, we do not have access to YouTube

    Reply
    • easyweb says

      20 October - 2013

      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.

      Reply

Leave a Comment Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2021 · By Easy Web Design Tutorials · Built on the Genesis Framework · WordPress · Log in · ⇪

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.