Contact Form 7 Style Templates – CSS [Easy]

[admin]

Contact form 7 style templates plugin is providing a CSS customization option. This plugin provides contact form 7 styling examples. No need for coding skills for the basic contact form (cf7). Advanced styling needs CSS coding or you can just hire a developer – Just $39 for it (Contact us).

 

let’s start;

We can change style like contact form 7 text color, contact form 7 field width very easily.

First, download the CF7 style plugin and upload it to your WordPress.

Download CF 7 Style CSS plugin – Download Now

 

 

How to activate plugin contact form 7 style?

Go to wp-admin > plugins > upload zip file and activate it. Then go to your contact form 7 page (front end). You can see some modifications.

Sample CF7 shortcodes:

<label> Your Name* [text* your-name] </label> <label> Your Email* [email* your-email] </label> <label> Subject [text your-subject] </label> <label> Your Message [textarea your-message] </label> [submit "Send"]

1 2 3 4 5 6 7 8 9 10 11 12 13

<label> Your Name*     [text* your-name] </label>   <label> Your Email*     [email* your-email] </label>   <label> Subject     [text your-subject] </label>   <label> Your Message     [textarea your-message] </label>   [submit "Send"]

 

How to add contact form 7 custom CSS?

Find the id of the contact form HTML element.  Press the right button > inspect > find id as in bellow image (chrome).

Now you can see id is “wpcf7-f5-p6-o1“. We can easily add custom CSS for it. Go to wp-admin > plugins > plugins editor > select cf7-style > styles.css after that, you can add css style followed by id (my case #wpcf7-f5-p6-o1).

How to add contact form 7 submit button CSS? 

Find the id of the form (check How to add contact form 7 custom CSS). Add following code in cf7-style plugin > styles.css file. You can add a border (border:1px solid red).

#{id of the form} input[type=button].wpcf7-form-control

Example:-

CSS

#wpcf7-f5-p6-o1 input[type=button].wpcf7-form-control{ /* you can add css style */ color: red; }

1 2 3 4

#wpcf7-f5-p6-o1 input[type=button].wpcf7-form-control{     /* you can add css style */     color: red; }

How to change contact form 7 field width?

We need to add the following code in the cf7-style plugin > styles.css file.

.wpcf7 form input{ width:100%; }

1 2 3

.wpcf7 form input{   width:100%; }

 

Contact form 7 custom checkbox (acceptance) style:-

Contact form 7 checkbox styling with input id. Find the id of the form (check How to add contact form 7 custom CSS). You can change the color, position, etc.

CSS

#wpcf7-f5-p6-o1 input[type="checkbox"]{ /* you can add css style */ color: red; }

1 2 3 4

#wpcf7-f5-p6-o1 input[type="checkbox"]{     /* you can add css style */     color: red; }

How to convert HTML to contact form 7 shortcodes?

We developed an online tool to convert HTML to contact form 7 shortcode. Convert Now.

[Author]

Posts