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:

checkbox default layout

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"]

checkbox layout reversed

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; }

checkbox layout 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; }

checkbox layout table(combined with label_first option)

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

See Also

Just another contact form plugin for WordPress. Simple but flexible.