Custom Layout for Checkboxes and Radio Buttons

In its default settings, Contact Form 7 renders checkboxes and radio buttons as inline boxes. This can be customized with some options of form tag and simple CSS style settings. I’ll show you some tips in this article.

Reversing checkbox-label order

In default, Contact Form 7 renders checkbox first and its label last as shown below:

You can reverse this order by adding label_first option to the checkbox tag.

[checkbox your-cb label_first "Option 1" "Option 2" "Option 3"]

Rendering checkboxes as block instead of original inline

To render checkboxes as block boxes, add a line to the CSS stylesheet in your theme like below:

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

Rendering checkboxes as a table

To render checkboxes as a table, add these lines to the CSS stylesheet in your theme like below:

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

(combined with label_first option)

Note: some legacy browsers (i.e. IE) do not support display: table* properties.