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:

old-form

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;
}

customize-contact-form-7-background-padding

Step 2: Styling heading
.wpcf7 h2{
color: #fff;
padding-top: 5px;
font-weight: bold;
}

change-contact-form-7-heading

Step 3: Styling Labels
.wpcf7 label{
color: #fff;
}

styling-contact-form7-labels

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%;
}

customize-text-email-phone-contact-form-7

Step 5: Textarea Height
.wpcf7 textarea{
height: 85px;
}

change-textarea-height-contact-form7

Step 6: Styling Button
.wpcf7 input[type="submit"]{
background:#222;
width: 100%;
padding: 16px 0;
}

customize-contact-form7-submit-button

After applying above written CSS code, our contact form 7 form will look like this:

styling-contact-form-7

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.

Sharing is caring!

Rishab Kapoor on FacebookRishab Kapoor on LinkedinRishab Kapoor on TwitterRishab Kapoor on Youtube
Rishab Kapoor
A Blog writer, a Web developer and a passionate teacher. Teaching on YouTube from last 7 years. Like to write articles about Web designing, Web development, Digital Marketing, and Online money making techniques. If you have any question about Web technologies and your career then you can contact me via above my social media profiles.