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:
[crayon-6630f6c5de2b8740243226/]
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-controlExample:-
[crayon-6630f6c5de2c2947174407/]
How to change contact form 7 field width?
We need to add the following code in the cf7-style plugin > styles.css file.
[crayon-6630f6c5de2c5587620902/]
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.
[crayon-6630f6c5de2c7188217222/]
How to convert HTML to contact form 7 shortcodes?
We developed an online tool to convert HTML to contact form 7 shortcode. Convert Now.
