If you are searching for an excellent article about how to style contact form 7, you are in the right place. In today’s blog, we will learn contact form 7 styling by CSS. Though it is a very popular plugin for creating an online form, it has limitation too.
Post Contents
How to style contact form 7 – Contact Form 7 Styling
Contact form 7 is a very powerful Form plugin, but it doesn’t have any build in form styling option. That’s why we need to customize the style by changing the CSS. The good news is, it is easy to change the styling of Contact form 7. Every person who knows CSS can easily modify the styling as per need.
First of all, you have to install Contact Form 7. It is the best plugin for Contact form creation. Please check the other detailed article about installing WordPress Plugin in different ways. Then you can review the other Articles about how to use contact form 7. We tried to explain it clearly.
There are several ways of styling. You can use a plugin if you are not interested in working with codes. But if you are a techie, you can use custom CSS to style Contact form 7. I will discuss both of them.
Contact form 7 Styling by Plugin:
There is a plugin which allows you to style Contact Form 7 without touching any custom codes. The plugin is Contact Form 7 Style. You can install the plugin and see their documentation to get the better idea of using this plugin.
Contact Form 7 Style – WordPress Plugin
At first, install the plugin from the WordPress free plugin directory. Then you will have an additional option in your contact form area.
After completing a form creation, you have to select the desired predesigned styling from the dashboard. That’s it.
A form styling will be added automatically without adding any custom code. It is the ready-made solution for the non-techies. If you want to add any Form styling which is not included in the plugin, you can do it on your own. Please check the second way of styling Contact Form 7.
Contact Form 7 Styling by CSS:
The other best option of styling Contact form 7 is styling by CSS. To apply this option, you must have some knowledge of CSS. If you don’t have any experience of CSS, you may hire a web designer to do this for you. Let’s learn now, how to style contact form 7 by CSS.
I have extracted the CSS classes from the Contact Form 7. You can use those classes to style your form according to your need.
.wpcf7 .wpcf7-form .wpcf7 input[type="text"] .wpcf7 input[type="email"] .wpcf7 input[type="url"] .wpcf7 .textarea .wpcf7 .select .wpcf7 input[type="date"] .wpcf7 input[type="checkbox"] .wpcf7 input[type="radio"] .wpcf7 input[type="file"]
These classes are beneficial to customize your contact form 7 styling. There are other classes which you can also use.
.wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-text .wpcf7-email .wpcf7-url .wpcf7-tel .wpcf7-number .wpcf7-date .wpcf7-textarea .wpcf7-checkbox .wpcf7-radio .wpcf7-acceptance .wpcf7-select .wpcf7-file .wpcf7-submit .wpcf7-validates-as-required .wpcf7-validates-as-email .wpcf7-validates-as-tel .wpcf7-response-output .wpcf7-display-none
You can use both classes to customize the styling of a Contact form 7. They are almost the same. Second classes are just class name, and the first classes are more specified by file type.
Contact Form 7 Styling by CSS – Live Example (Background Change)
Now I will teach you how to change the contact form background with a live example.
I am using a default Contact form 7 code. I have used the following code:
<label> Your Name (required) [text* your-name] </label> <label> Your Email (required) [email* your-email] </label> <label> Subject [text your-subject] </label> <label> Your Message [textarea your-message] </label> [submit "Send"]
Now I will change the background, and I will make the form more eye-catching for the users. So let’s do it.
We have to use the class .wpcf7-form to change the background because this is the main class which contains the entire form. We have added the following codes as CSS in our style.css.
.wpcf7-form {
background: #f4f7f8;
padding: 15px;
text-align: center;
}
That’s it. Now it looks clean and better. You can use your customization to make your form more beautiful. You may check the link to get a better idea about form designing.
HTML and CSS Form Design Examples
In the meantime, if you are still having any trouble to customize the form, you are welcome to contact our developer team. Please fill up the contact form. Our experienced developer will contact you as soon as possible with the possible solutions and quote.
You may also read our previous post: How to create and add Navigation Menu in WordPress
