WEBFI-WordPress-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:
http://twitter.com/wpbeginner
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
Thanks a lot!
Where do i find the css editor for plugin 7, i want to change the box around the message you get when you've send an email or when an error occured.
Why do all this web programmers are such a bad teachers???? HOW do you go to step 0:36 to 0:37 ??? In the video she only turns the screen black and then it magically appears on the code editor… wdf
Greetings, can I suggest another alternative for styling Contact Form 7 forms?
this was totally useless…
So many questions!
Bad bad teacher !! useless video !
why tf dont u show how to get to the code part where we can edit the css. Useless asf thanks for making me type in the url
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.
just my 2 cents i have recently created this plugin called "Innozilla Skins for Contact Form 7" and it will really help you style your "contact form 7" Form.
Just my 2 cents. i have recently uploaded this wordpress plugin called "Innozilla Skins for Contact Form 7" this really helped me on my CF7 Form..
Finally after few hours of researching, i found you. Thank You!