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/

Shares
|ShareTweet

Leave a Reply

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


*