Style WordPress Contact Form 7 without any CSS

Contact Form 7 is the most popular contact form plugin, installed in over 1 million WordPress sites, including me using it. I always use contact form 7 for my sites. Why? Because it is very reliable and works every time!

There are many types of fields available, you can make a huge form using contact form 7. Not only that, but you can also customize the email you receive, and also set up an auto-respond email which the sender will get. You can embed the form almost anywhere using a shortcode, like in posts, pages, sidebar, etc.

That’s all fine, but what the problem? The biggest problem in contact form 7 is that it doesn’t look so good. It is absolutely stripped down of any kind of style. It is just a bunch of basic fields, it looks bland and boring. It takes the styling of the theme you are running, in some cases, it looks fine, but in other cases, it looks downright awful!

This is how a contact form usually looks like, right out of the box when you directly embed the form using it’s shortcode.

Great, now please follow the steps below to make your contact form 7 look much better, without writing a single line of CSS.

STEP 1

Go to your WordPress dashboard, then hover over plugins and then click on “add new”

STEP 2

Then in the search field type “contact form 7 skins”. Then Install and activate the first plugin. Before you install it, please make sure it is compatible with your version of WordPress. If not, then please install this plugin in a test environment.

STEP 3

Then go to the WordPress dashboard, hover over “Contact” and then click on “Contact Forms”

STEP 4

Then simply, click on the contact form you would like to edit or style

STEP 5

Now, after entering the contact form, if you scroll down a little bit. Now you will find this new interface. From this interface, choose “Template”

STEP 6

Now, from the template you can choose a basic contact from template. This would ensure that all the fields are coded nicely and have a nice structure or skeleton.

WARNING: IF YOUR CONTACT FORM IS ALREADY HAS CONTENTS, FIELDS ETC. THEN DO NOT FOLLOW THIS STEP. SKIP TO STEP 7 INSTEAD!

STEP 7

Now it’s the fun part! From the interface, choose “Style”. Then you find tons of beautiful ready made skins you can apply to your contact form 7. It is really easy. To choose your favorite skin, in the bottom left there is an option called “Select”. Simple click on it, it will turn red, and then turn to “Selected”. Make sure to “Save” the contact form after you are done!

The Result

This is how my contact form looks like after I am done! Looks much better than before, doesn’t it!

Final Thoughts

This is the fastest way in my opinion to quickly style a contact form 7 without writing a single line of CSS. This will not only save you a ton of time, but will also save you a lot of money not hiring a WordPress professional to do it for you!

I styled a contact form in this way for one of my clients and he was really happy about it. I hope it will work fine for you too! If you have any questions, please ask in the comments. If you have found this blog useful, then don’t forget to share this blog post on facebook, pinterest, reddit etc.