Contact Form 7 Style Templates – CSS [Easy]

Home Forums Contact Forms Contact Form 7 Style Templates – CSS [Easy]

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • This topic is empty.
Viewing 0 reply threads
  • Author
    Posts
    • #437
      admin
      Keymaster

      Contact form 7 style templates plugin is providing CSS customization option. This plugin providing 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 developer – Just $39 for it (Contact us).

      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:

       

      Contact form 7 style templates

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

      chrome inspect contact form 7 - WordPress

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

      Contact form 7 custom checkbox (acceptance) style:-

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

      How to convert HTML to contact form 7 shortcodes?

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

Viewing 0 reply threads
  • You must be logged in to reply to this topic.