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