Is your Contact form 7 looking very simple and you want to customize your contact form 7 forms on your WordPress website?
With over 5 million installs, Contact form 7 is one of the most popular form building plugins on WordPress and you can download it for free. Forms can be easily created and can be used as a pop-up anywhere in your website.
Contact form 7 generates a simple shortcode which can placed anywhere in the page, post or widget area.
But by Default, it will look like this:
But thanks to CSS, which helps you to modify it similar to your website theme by applying some design elements into it. It is so simple that anyone can customize it.
Before this, you need to install contact form 7 on your WordPress website. then i’ll show you how to style Contact Form 7 in easy 6 steps.
Styling Contact Form 7
Contact form 7 generates a standard code in accordance with the forms. Every form has an ID and CSS connected to it. Each form uses the CSS class .wpcf7 that would help you to style your form.
Step 1: Background, Box Shadow and Padding
.wpcf7{
box-shadow: 1px 1px 5px #ccc;
padding: 20px;
background: #47b7b3;
}
Step 2: Styling heading
.wpcf7 h2{
color: #fff;
padding-top: 5px;
font-weight: bold;
}
Step 3: Styling Labels
.wpcf7 label{
color: #fff;
}
Step 4: Textbox, Email Field, Subject field and Textarea
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea{
color: #333;
font-weight: bold;
font-family: courier;
width: 100%;
}
Step 5: Textarea Height
.wpcf7 textarea{
height: 85px;
}
Step 6: Styling Button
.wpcf7 input[type="submit"]{
background:#222;
width: 100%;
padding: 16px 0;
}
After applying above written CSS code, our contact form 7 form will look like this:
But the code is completely flexible. You can change it or can even apply more styling options according to your website theme.
I hope this article has helped you to customize your contact form. Please drop comment if you face any issue.
Arun Kumar
This is very good article. The ScreenShot of every step makes it very easy to understand. I hope this article help me to customize my contact form 7.