You don’t need any fancy plugins to turn your checkboxes or radiobuttons into actual buttons. Just good old CF7 with some basic CSS will do.
Simply create your form like this:
<p>What's your gender (radiobuttons)</p>
[radio your-gender use_label_element class:togglebuttons "Male" "Female" "Other"]
<p>What are your favorite fruits (checkboxes)</p>
[checkbox your-fruits use_label_element class:togglebuttons "Apple" "Banana" "Orange"]
[submit]
It’s very important to include: use_label_element
and class:togglebuttons
.
Then add these CSS style rules to your theme (or via the Customizer):
.togglebuttons .wpcf7-list-item {
margin: 0 2px 0 0;
display: inline-block;
}
.togglebuttons > span input {
opacity: 0;
position: absolute;
}
.togglebuttons > span .wpcf7-list-item-label {
cursor: pointer;
display: block;
color: #333;
border-radius: 2px;
background: #ffffff;
padding: 2px 8px;
background: #efefef;
box-shadow: 0 1px 1px rgba(0,0,0,.2);
border: 1px solid #e0e0e0;
}
.togglebuttons > span input:checked + .wpcf7-list-item-label {
background: #0193c2;
border: 1px solid #0193c2;
color: #ffffff;
font-weight: bold;
}
Extra: tabs
Did you notice how these toggle buttons feel a bit like tab-controls? Well, with Conditional Fields for Contact Form 7, you can easily create a tab-like experience like this:
[radio choose-tab use_label_element class:togglebuttons default:1 "Tab 1" "Tab 2" "Tab 3"]
[group tab-1 class:tab]
<!-- Content of tab 1 -->
[/group]
[group tab-2 class:tab]
<!-- Content of tab 2 -->
[/group]
[group tab-3 class:tab]
<!-- Content of tab 3 -->
[/group]