How to Tweak a CSS Contact Form 7

Save

Contact Form 7 is a plugin for the WordPress publishing platform. It allows users to quickly create customized 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.

Things You'll Need

  • Access to WordPress stylesheet
  • 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 /

  • Customize 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;

    }

  • Customize 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;

    }

  • Customize 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;

    }

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

Tips & Warnings

  • Experiment with different border colors 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 customization to files in its folder.

References

  • Photo Credit Comstock/Comstock/Getty Images
Promoted By Zergnet

Comments

Resources

You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!