Contact Form 7 tag syntax

This page explains the syntax of Contact Form 7‘s tag. If you are not familiar with basic usage of Contact Form 7, please see the plugin’s homepage.

Contact Form 7 uses “tags” for two purposes; one is for form content and the other is for mail (to, from and subject fields and message body). Tags for form content has different syntax from ones for mail.

Example of a tag used in form content:
[email* your-email 60/200 "your-email@example.com"]

Example of a tag used in mail:
[your-email]

As seen in above examples, a tag for form content generally has more complicated syntax and many options. In the rest of this page, I write mainly about the syntax and options of form content tag.

Custom layout for checkboxes and radio buttons (Contact Form 7 tips)

This is a tip for Contact Form 7 plugin.

In default, a tag of checkbox type (checkbox and checkbox+) and radio button type (radio) are rendered as inline, like

You can reverse checkbox-label order by using label-first option with those tags.

A replaced HTML source of checkbox in default case looks like below (I added line breaks for better viewing):

<span style="position: relative;">
 <span class="wpcf7-checkbox">
  <span class="wpcf7-list-item">
   <input name="your-checkbox" value="ウインダム" 
     class="exclusive" type="checkbox">&nbsp;
   <span class="wpcf7-list-item-label">ウインダム</span>
  </span>
  <span class="wpcf7-list-item">
   <input name="your-checkbox" value="ミクラス" 
     class="exclusive" type="checkbox">&nbsp;
   <span class="wpcf7-list-item-label">ミクラス</span>
  </span>
  <span class="wpcf7-list-item">
   <input name="your-checkbox" value="アギラ" 
     class="exclusive" type="checkbox">&nbsp;
   <span class="wpcf7-list-item-label">アギラ</span>
  </span>
 </span>
</span>

You can customize the layout with CSS trick.

If you want block layout instead of original inline one,

span.wpcf7-list-item { display: block; }

If you want table layout,

span.wpcf7-list-item { display: table-row; }
span.wpcf7-list-item * { display: table-cell; }

(combined with label-first option)

Notice: { display: table* } properties are not supported in Internet Explorer (even in IE7). I hate IE.