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 1
Views: 1118

Suggest article improvements

Please use this form to suggest improvements and report missing or outdated content. Support requests will most likely not be answered and it's best to use the Support Request Form instead. Thanks!