Tuesday, December 1, 2020
Home Blogging How to Style Contact Form 7 Forms in WordPress

How to Style Contact Form 7 Forms in WordPress

With over 1 million energetic customers, Contact Form 7 is without doubt one of the hottest contact type plugins for WordPress. Their greatest draw back is that the out of the field varieties you add are very plain wanting. Fortunately, Contact Form 7 may be simply styled utilizing CSS in your WordPress theme. On this article, we’ll present you tips on how to fashion contact type 7 varieties in WordPress.

Notice: We don’t suggest Contact Form 7 plugin anymore. As an alternative, we suggest WPForms, which is essentially the most newbie pleasant contact type plugin. You can even obtain WPForms Lite at no cost.

We’ve got a step-by-step information on tips on how to create contact type in WordPress.

Getting Began

We’re assuming that you’ve already put in Contact Form 7 plugin and have created your first contact type. The following step is to repeat the shortcode in your contact type and paste it in a WordPress publish or a web page the place you prefer to your type to seem.

For the sake of this text, we’ve got used the default contact type and added it right into a WordPress web page. That is how the contact type seemed on our take a look at website.

As you’ll be able to see that the contact type inherits some type kinds out of your WordPress theme. Aside from that it’s very primary.

We might be styling Contact Form 7 varieties utilizing CSS. All of the CSS goes into your theme or youngster theme‘s stylesheet.

Styling Contact Form 7 Types in WordPress

Contact Form 7 generates a really helpful and customary compliant code for the varieties. Every component within the type has a correct ID and CSS class related to it.

Every contact type makes use of the CSS class .wpcf7 which you should use to fashion your type.

On this instance we’re utilizing a Google font Lora in our enter fields. See tips on how to add Google Fonts in WordPress.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
div.wpcf7 {
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, sans-serif;
font-style:italic;   
}
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}

That is how our contact type sorted making use of this CSS.

Styling A number of Contact Form 7 Types

The issue with the CSS we used above is that it will likely be utilized to all Contact Form 7 varieties in your web site. In case you are utilizing a number of contact varieties and wish to fashion them otherwise, then you have to to make use of the ID generated by contact type 7 for every type.

You May Also Like : How to Disable Self Pingbacks in WordPress

Merely open a web page containing the shape you wish to modify. Take your mouse to the primary discipline within the type, proper click on and choose Examine Ingredient. The browser display will cut up, and you will note the supply code of the web page. Within the supply code, you might want to find the beginning line of the shape code.

As you’ll be able to see within the screenshot above, our contact type code begins with the road:

<div position="type" class="wpcf7" id="wpcf7-f201-p203-o1" lang="en-US" dir="ltr">

The id attribute is a singular identifier generated by Contact Form 7 for this specific type. It’s a mixture of type id and the publish id the place this kind is added.

We’ll use this ID in our CSS to fashion our contact type. We’ll substitute .wpcf7 in our first CSS snippet with #wpcf7-f201-p203-o1.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
div#wpcf7-f201-p203-o1{
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
#wpcf7-f201-p203-o1 input[type="text"],
#wpcf7-f201-p203-o1 input[type="email"],
#wpcf7-f201-p203-o1 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, "Open Sans", sans-serif;
font-style:italic;   
}
#wpcf7-f201-p203-o1 input[type="submit"],
#wpcf7-f201-p203-o1 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}

Styling Contact Form 7 Types with CSS Hero

Many WordPress rookies don’t have any expertise of writing CSS, and so they don’t wish to spend time studying it. Fortunately, there’s a great answer for rookies that may will let you not simply fashion your contact type however virtually each facet of your WordPress website.

Merely set up and activate the CSS Hero plugin and go to the web page containing your type. Click on on the CSS Hero toolbar after which click on on the component you wish to fashion. CSS Hero will present you a straightforward person interface to edit the CSS with out ever writing any code.

 

See our full evaluate of CSS Hero and tips on how to use it to fashion something in your WordPress website. You need to use CSS Hero coupon code WPBeginner to get unique 34% off low cost.

That’s all we hope this text helped you learn to fashion Contact Form 7 varieties in WordPress. You might also wish to see our information on tips on how to add a contact type popup in WordPress.

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

How to make money with Toluna surveys

Toluna is most well-known for its surveys, however there are an entire host of different methods to earn rewards on the location. Our assessment...

6 Best Free Alternatives To Camtasia 2020 For Mac And Windows

I really like Camtasia and have been an avid person of Camtasia ever since 2012. Recently, the Camtasia workforce launched the 2019 model of Camtasia which...

List of Travel Affiliate Programs For Travel Bloggers

For me, touring is freedom. If you're a journey blogger, I offer you a standing ovation. Being a digital nomad, I perceive how powerful it's to weblog whereas touring. I additionally...

Social Warfare Review: Explode your Social Shares

Everybody is aware of that having social media sharing buttons is important for each weblog within the Blogosphere. Why? Well, social media sharing buttons assist us...

Recent Comments