style contact form 7
how to style contact form 7

 

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 Form easily. It has 5+ Millions Active installation according to WordPress Repository, in this article I will guide how to style contact form 7 in WordPress.

Table of content:

  • How to style contact form 7
  • Css Styling of Input Field
  • Contact form 7 label color
  • Textbox CSS style examples
  • Contact form 7 placeholder select
  • How to Add class to input
  • Contact form 7 submit button CSS

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 setup contact form 7 and Create your first form to embed it in your website for further Styling if you add a contact form 7 in your website and want to
further style it Go to your WordPress customization Tab from Frontend or Go to Appearance > Customize from BackEnd side

style contact form 7

REMEMBER?

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

.wpcf7{

}

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

.wpcf7-form
{

padding-top:30px;
margin-left:40px;

}

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
{

width:50%;
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
{
width:500px;
height:700px;
background-color:grey;

}

To give width, Height, Bg color 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

input[type=”text”]
{

}

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

input[type=”email”],
input[type=”tel”],
input[type=”date”]

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

{
color:orange;
background-color:grey;

}

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=”classname”

[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”]

{
background-color:orange;
margin-left:40%;
}

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

{
background-color:black;
margin-left:40%;
color:white;

}

Conclusion:
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
happy to help You

 

 

                     Watch this tutorial on how to style contact form 7

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here