Contact Form 7 Style Templates - CSS [Easy]

This topic is empty.

Viewing 0 reply threads

Author

Posts

August 3, 2020 at 12:20 pm #437

Keymaster

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"]

<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:-

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

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

.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.

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

#wpcf7-f5-p6-o1 input[type="checkbox"]{