How to Style Contact Form 7 Forms in WordPress



Contact form 7 is one of the most popular contact form plugins for WordPress. The biggest downside is that the forms start off very plain looking. In this video, we will show you how to style contact form 7.

If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.

Text version of this tutorial:
http://www.wpbeginner.com/wp-tutorials/how-to-style-contact-form-7-in-wordpress/

Check us out on Facebook:
https://www.facebook.com/wpbeginner

Follow us on Twitter:

Join our circle on Google+:
https://plus.google.com/+wpbeginner/

Checkout our website for more WordPress Tutorials
http://www.wpbeginner.com/

Summary of this Tutorial:

We have contact form 7 plugin installed and activated and we are using the default contact form that was added to a WordPress page.

Contact form 7 generates standard compliant code and each contact form uses the .wpcf7 class.

Remember you can play with the css to make it how you want it to look.

If you need to do each form differently, just go to your site and right click the form, use inspect element to find the forms id attribute and add that to the css stylesheet.

If you are new to css and wordPress, you can use a plugin called CSS Hero which makes changing your site even easier.

Related Links:

Contact Form 7

http://wordpress.org/extend/plugins/contact-form-7

CSS Hero

http://www.wpbeginner.com/plugins/css-hero-review-wordpress-design-customization-made-easy/

source

14 thoughts on “How to Style Contact Form 7 Forms in WordPress”

  1. I think there are many on here who are simply frustrated. I do think that it is a good idea to at least touch on where to add/edit the CSS in one of WP's most common themes. I also think it is a good idea to break down the CSS into sections so that those who have not used CSS a lot in their past can better understand what each section of the code does.

    again thank you for the clear and easy to follow video.

  2. OK, Here is a full summary of this video: "To style your contact form, add some CSS code." Well Gee Wizz Batman, I never would of thought of that. Thanks for such informative information. Now, if only I knew what to code and where to code it…..hmmmmmm. I guess it's off to someone else's video now.

Leave a Reply

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