Contact Form 7 1.7.4 (select+ and checkbox+ removed)

I released Contact Form 7 1.7.4. You can download it from WordPress.org’s repository.

In this version, I removed two tag types, select+ and checkbox+, because they were confusing. If you have been using those tags and checkbox, you’ll be needed to edit them manually after upgrading. I’m sorry for the inconvenience.

If you are using select+ tag, replace it with select and add multiple option. Here is an example:

Before: [select+ your-menu “ウインダム” “ミクラス” “アギラ”]

After: [select your-menu multiple “ウインダム” “ミクラス” “アギラ”]

If you are using checkbox+ tag, replace it with checkbox. Here is an example:

Before: [checkbox+ your-checkbox “ウインダム” “ミクラス” “アギラ”]

After: [checkbox your-checkbox “ウインダム” “ミクラス” “アギラ”]

If you are using checkbox tag (exclusive checkbox), add exclusive option. Here is an example:

Before: [checkbox your-checkbox “ウインダム” “ミクラス” “アギラ”]

After: [checkbox your-checkbox exclusive “ウインダム” “ミクラス” “アギラ”]

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.

Contact Form 7 1.7.3

I released Contact Form 7 1.7.3 last week. I added two options for dropdown menu, checkboxes and radio buttons. default: option allows you to set initially selected or checked items. label-first option is for checkboxes and radio buttons; this makes checkbox-label order reverse.

See also: Contact Form 7 1.7 (The introduction of select+, checkbox, checkbox+ and radio typed tags)

Setting default with default: option

For example, this tag:

[checkbox your-checkbox default:2 "ウインダム" "ミクラス" "アギラ"]

makes the second item “ミクラス” checked initially. The integer following default: is the position in the order of items. 1 is the first one.

If you want to make two or more items checked, joint integers with _ (underbar) as:

[checkbox your-checkbox default:1_3 "ウインダム" "ミクラス" "アギラ"]

Changing checkbox-label order with label-first option

By default, checkbox and radio button are put first, and a label last.

By adding label-first option to checkbox and radio button type tags, you can reverse them.

[checkbox your-checkbox label-first "ウインダム" "ミクラス" "アギラ"]