Latest Tech and Tips

How to Style Contact Form 7 Forms in WordPress

9

With over 1 million energetic individuals, Contact Form 7 is just one of one of the most preferred contact form plugins forWordPress Their most significant disadvantage is that the out of package forms you include are really ordinary looking. Thankfully, Contact Form 7 can be quickly styled making use of CSS in your WordPress style. In this short article, we will certainly reveal you how to style contact form 7 formsin WordPress

Note: We do not advise Contact Form 7 plugin any longer. Instead, we advise WPForms, which is one of the most beginner pleasant contact form plugin. You can additionally download and install WPForms Lite totally free.

We have a detailed overview on how to produce contact formin WordPress

Video Tutorial

Subscribe to WPBeginner

If you do not such as the video clip or require even more directions, after that proceed analysis.

Getting Started

We are thinking that you have actually currently set up Contact Form 7 plugin as well as have actually developed your initial contact form. The following action is to replicate the shortcode for your contact form as well as paste it in a WordPress blog post or a web page where you would certainly like your form to show up.

For the benefit of this short article, we have actually made use of the default contact form as well as included it right into a WordPress web page. This is how the contact form viewed our examination website.

Default Contact Form 7 form on a WordPress site using  default WordPress theme

As you can see that the contact form acquires some form designs from your WordPress style. Apart from that it’s really standard.

We will certainly be styling Contact Form 7 forms making use of CSS. All the CSS enters into your style or youngster style’s stylesheet.

Styling Contact Form 7 Forms in WordPress

Contact Form 7 creates an extremely valuable as well as typical certified code for the forms. Each component in the form has an appropriate ID as well as CSS course connected with it.

Each contact form utilizes the CSS course wpcf7 which you can utilize to style your form.

In this instance we are making use of a Google font style Lora in our input areas. See how to includeGoogle Fonts in WordPress

.
div.wpcf7 {
background-color: #fbefde;.
boundary: 1px strong #f 28f27;.
cushioning:20 px;.
}
. wpcf7 input[type="text"],
. wpcf7 input[type="email"],
. wpcf7 textarea {
history: # 725f4c;.
shade: #FFF;.
font-family: lora, sans-serif;.
font-style: italic;.
}
. wpcf7 input[type="submit"],
. wpcf7 input[type="button"] {
background-color: # 725f4c;.
size:100%;.
text-align: facility;.
text-transform: capital;.
}

This is how our contact form cared for using this CSS.

Styling Contact Form 7 forms with CSS in WordPress

Styling Multiple Contact Form 7 Forms

The trouble with the CSS we made use of above is that it will certainly be used to all Contact Form 7 forms on your internet site. If you are making use of numerous contact forms as well as desire to style them in different ways, after that you will certainly require to utilize the ID produced by contact form 7 for every form.

Simply open up a web page having the form you desire to customize. Take your computer mouse to the initial area in the form, appropriate click as well as chooseInspect Element The web browser display will certainly divide, as well as you will certainly see the resource code of the web page. In the resource code, you require to find the beginning line of the form code.

Finding the element ID for your contact form

As you can see in the screenshot over, our contact form code begins with the line:

<< div duty ="form" course ="wpcf7" id ="wpcf7-f201-p203-o1" lang ="en-US" dir ="ltr">>

The id characteristic is a special identifier produced by Contact Form 7 for this certain form. It is a mix of form id as well as the blog post id where this form is included.

We will certainly utilize this ID in our CSS to style our contact form. We will certainly replace.wpcf7 in our initial CSS bit with #wpcf 7-f201-p203-o1

div #wpcf 7-f201-p203-o1 {
background-color: #fbefde;.
boundary: 1px strong #f 28f27;.
cushioning:20 px;.
}
#wpcf 7-f201-p203-o1 input[type="text"],.
#wpcf 7-f201-p203-o1 input[type="email"],.
#wpcf 7-f201-p203-o1 textarea {
history: # 725f4c;.
shade: #FFF;.
font-family: lora, "Open Sans", sans-serif;.
font-style: italic;.
}
#wpcf 7-f201-p203-o1 input[type="submit"],.
#wpcf 7-f201-p203-o1 input[type="button"] {
background-color: # 725f4c;.
size:100%;.
text-align: facility;.
text-transform: capital;.
}

Styling Contact Form 7 Forms with CSS Hero

Many WordPress newbies do not have any type of experience of creating CSS, as well as they do not desire to hang around discovering it. Luckily, there is a fantastic remedy for newbies that will certainly permit you to not simply style your contact form yet virtually every element of your WordPress website.

Simply set up as well as trigger the CSS Hero plugin as well as go to the web page including your form. Click on the CSS Hero toolbar and afterwards click the component you desire to style. CSS Hero will certainly supply you a very easy interface to modify the CSS without ever before creating any type of code.

Styling Contact Form 7 Form Using CSS Hero

See our total evaluation of CSS Hero as well as how to utilize it to style anything on your WordPress website. You can utilize CSS Hero discount coupon code WPBeginner to obtain unique 34% off price cut.

That’s all we wish this short article assisted you find out how to style Contact Form 7 formsin WordPress You might additionally desire to see our overview on how to include a contact form popup in WordPress.

If you liked this short article, after that please subscribe to our (*7 *) for WordPress video clip tutorials. You can additionally discover us on Twitter as well asFacebook

.