Blog

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

12 Comments

  • Владимир Фадеев on September 16, 2015

    Thanks a lot!

  • hibneiwih on July 3, 2016

    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.

  • Jhon Duran on September 18, 2016

    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

  • Marosi Lehel on December 6, 2016

    Greetings, can I suggest another alternative for styling Contact Form 7 forms?

  • Bernhard Rieder on February 4, 2017

    this was totally useless…

  • Zone07 on May 8, 2017

    So many questions!

  • Fri Chakir on September 30, 2017

    Bad bad teacher !! useless video !

  • Noah Kim on June 12, 2018

    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

  • RichiRicheh on September 24, 2018

    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.

  • Innozilla Web Solutions on September 1, 2019

    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.

  • bonsimonz on September 29, 2019

    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..

  • Manish Shrestha on December 5, 2019

    Finally after few hours of researching, i found you. Thank You!

WhatsApp us
Live Chat

Office hours operation Mon-Sun 8:00 am ET – 4:00 pm ET

To start your Premium WP or Cpanel service, use our domain search engine, if the domain you want is available, contact us by Whats app to activate your project.

The easiest, fastest, and most secure way to communicate with us.
loading
Please enter your domain.
Please verify that you are not a robot.

Terms Privacy

 

 

WEBFI NETWORK OFFICE HOURS 

Mon-Sun from 8:00 am /4:00 pm USA-ET

WhatsApp us

Small Business – WordPress – CPanel – Hosting

© Webfinet Affordable Private Small Business Solutions All Rights Reserved 2021 - Powered By Marquez.Group
error: WEBFINET SECURITY IS ON