How to Tweak a CSS Contact Form 7

Written by jason whitaker
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Tweak a CSS Contact Form 7
Customise the styling of Contact Form 7 fields using CSS. (Comstock/Comstock/Getty Images)

Contact Form 7 is a plugin for the WordPress publishing platform. It allows users to quickly create customised contact forms anywhere on their WP website. While the forms are easy to create and implement, the fields within them are styled minimally, allowing them to blend in with any website. Create your own custom-style overrides and apply them to the fields within forms generated by this plugin.

Skill level:
Moderate

Other People Are Reading

Things you need

  • Access to WordPress stylesheet

Show MoreHide

Instructions

  1. 1

    Open your WordPress theme's stylesheet and scroll to the very end. Create a commented area so that you can locate your custom code easily. Here is an example:

    / Here is where my custom CF7 code begins /

  2. 2

    Customise the styles for your text fields and text areas. Create an entry in your stylesheet for the text fields and text areas in your CF 7 form. Here is an example:

    .wpcf7 input[type="text"], .wpcf7 textarea {

    }

    Add customized borders, backgrounds, borders, padding and sizes to the text elements. Here are some samples:

    .wpcf7 input[type="text"] {

    background: none repeat scroll 0 0 #F9F9F9;
    
    border: 1px solid #8E9BA9;
    
    padding: 5px;
    
    width:200px;
    

    }

  3. 3

    Customise the styles for your drop-down/select menus. Create an entry in your stylesheet for the select menus in your CF 7 form. Here is an example:

    .wpcf7 input[type="select"] {

    }

    Style your select fields similarly to your text fields. Select fields do not appear as wide as text fields, so add a few extra pixels to their width. Here is an example:

    .wpcf7 input[type="select"] {

    background: none repeat scroll 0 0 #F9F9F9;

    border: 1px solid #8E9BA9;
    
    padding: 5px;
    
    width:210px;
    

    }

  4. 4

    Customise the styles for your submit button. Create an entry in your stylesheet for the submit button on your CF 7 forms. Here is an example:

    .wpcf7 input[type="submit"] {

    }

    Style the submit button to compliment the look and feel of your website, while still standing out from the background of your form. Here is an example of a red submit button:

    .wpcf7 input[type="submit"] {

    background-color: #990000;
    
    border: 4px solid #B34040;
    
    color: #FFFFFF;
    

    }

  5. 5

    Save the changes to your stylesheet and upload them to your theme folder.

Tips and warnings

  • Experiment with different border colours and styles.
  • Double-check your forms in Firefox, Safari and Internet Explorer, as each browser renders input fields slightly different.
  • Add the custom CSS to your theme's stylesheet, not the stylesheet for the plugin. When the plugin is updated, you may lose customisation to files in its folder.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.