How to Style Contact form 7 in WordPress

Contact form 7 is the most popular free WordPress form plugin used to create different types of Forms easily. It has 5+ Million Active installations according to WordPress Repository, in this article I will guide how to style contact form 7 in WordPress.

How To Style Contact Form 7

By default Contact form 7 does not available in style form and the basic form looks very simple and mainly not matched with your Website color combination but before we start styling our contact form7 keep in mind that don’t add your custom CSS to the stylesheet in contact form 7 on your Parent theme And the reason for this once you update your Parent theme or plugin you will be lost all of the changes you made so instead you can add change to your child theme.

In this guide, I will use the Built-in feature of WordPress customization ADD CSS area

Let’s get started

First of all, you need to set up contact form 7 and Create your first form to embed it in your website for further Styling if you add a contact form 7 to your website and want to
further style it Goes to your WordPress customization Tab from Frontend or Goes to Appearance > Customize from BackEnd side


We use General Styling of CSS just to show you How you can Style your form this CSS will be applied to All Contact form 7 plugin forms in your website If you want to style One by one with different styling then you need to Define class and then style it.

You can style the body of contact form 7 using class



This is the body of your contact form 7 Now if you add everything in CSS to this class that will be applied to your contact form 7 form.

You can style your form inside your Body of contact form 7




In this class, you can add Styling which will be applied to Form inside the body.

Now You can style your form Textarea means normally your message box area

.wpcf7 textarea

border:1px solid #fff;

You can add this class to your customization panel to style your Textarea of contact form 7

How To Style Input Fields

You can style your Input box also by adding this class

.wpcf7 input


To give width, Height, Bg-colour to your input box but this way all the input box style will be change equally if you want to change every input box Different then you can to define one by one  in CSS and give them style Here is textbox CSS style examples



Now here you can define everything will be applied only to Text fields same for


How To Change Contact Form 7 Label Color

Like a few examples above we change the appearance of our contact form 7 now, you can easily change Label color in WordPress contact form 7 for that you need to follow the same method

.wpcf7 label



How To Add Contact Form 7 Placeholder

Placeholder is a text that you see inside the input fields you can add it very easily in contact form 7, just follow this method.

For Example:
[text* your-name]

This one is a text input field without Placeholder if you want
to add it here you can simply write placeholder =” Your text”
after your-name to add a placeholder in this type of input field
you can revise the same method for other fields also

Final Result:
[text* your-name placeholder = “Name”]

How To Add Class To Input

You can add class  to input fields by going to your fields and write Class=”class name”

[text text-589 class:new]

Now if you want to style this class: new input field you can write CSS code and style will be applied to only this field.

Contact Form 7 Submit Button CSS

.wpcf7-form input[type=”submit”]


.wpcf7-form input[type=”submit”]:hover




I wish that you will learn how to style contact form 7 if you have any problem regarding this tutorial you can comment I will be happy to help you.


We are a team of Digital content writers we write about technology, gadgets, reviews & much more. Techvam.com is a trusted tech blog working for good purposes. We hope for your support to make a healthy world.

Related Articles

Leave a Reply

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

Back to top button