How to style Contact Form 7 form’s HTML

You are here:
Estimated reading time: < 1 min

You can copy and paste this code below into the Form’s editor eg: https://d.pr/i/DmbNKw and as seen in that screenshot, you can add as many fields as you want.

<label> Your Name (required)</label>
    [text* your-name]

<label> Your Email (required)</label>
    [email* your-email] 

<label> Your Message</label>
    [textarea your-message] 

[mc4wp_checkbox "Please keep me updated on events, new products or new collections."]

[submit class:btn class:btn-primary "SEND MESSAGE"]

What’s different from the default form.

  1. Labels don’t contain the actual input.
  2. The [mc4wp_checkbox .. ] shortcode which generates a checkbox to subscribe into MailChimp. Needs MailChimp for WP plugin.
  3. Submit button contains 2 css classes, btn and btn-primary. More about CF7 tags and attributes .
Was this article helpful?
Dislike 0
Views: 6

Join the conversation