Notice: Formidable Forms now has built-in options to convert standard radio or checkboxes into buttons. This tutorial is no longer a necessity.
Last Revised 4/20/2018
Here is a demo for some fancy buttons in place of radio and check boxes. Obviously what I show here is rather simple, but it’s also much more elegant than standard radios or check boxes.
Form – Field Options
In your radio or checkbox field options you will need to add a “CSS layout classes” value of: hideinput (defined in the preceding css). This will hide the actual radio or checkbox itself.
Form Custom HTML
The actual HTML is unchanged, but in the form settings the radio and checkbox fields are set to single row as opposed to multiple row.
<div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]">
<label class="frm_primary_label">[field_name]
<span class="frm_required">[required_label]</span>
</label>
<div class="frm_opt_container">[input]</div>
[if description]<div class="frm_description">[description]</div>[/if description]
[if error]<div class="frm_error">[error]</div>[/if error]
</div>
The JQuery
You will need to place this in the “After Fields” section of the customize HTML.
<script type="text/javascript">
jQuery(".horizontal_radio").each(function() {
jQuery(this).find('.frm_radio, .frm_checkbox').each(function() {
jQuery('input[id^="field_"]').hide();
var getID = jQuery(this).find('input[id^="field_"]').attr('id');
var getCheckStatus = jQuery('#'+getID+'').prop('checked');
if(getCheckStatus == true){
jQuery('#'+getID+'').parent().addClass('checked');
}
});
});
jQuery(".horizontal_radio").each(function() {
jQuery(this).find('.frm_radio').addClass('button-mid');
jQuery(this).find('.frm_radio').first().addClass('button-left').removeClass('button-mid');
jQuery(this).find('.frm_radio').last().addClass('button-right').removeClass('button-mid');
});
jQuery(".frm_radio label").click(function() {
jQuery(this).parent().parent().find('.frm_radio').find('label').removeClass('checked');
jQuery(this).addClass('checked');
});
jQuery(".horizontal_radio").each(function() {
jQuery(this).find('.frm_checkbox').addClass('button-mid');
jQuery(this).find('.frm_checkbox').first().addClass('button-left').removeClass('button-mid');
jQuery(this).find('.frm_checkbox').last().addClass('button-right').removeClass('button-mid');
});
jQuery( "input[type='checkbox']" ).click(function() {
jQuery(this).parent().toggleClass('checked');
});
</script>
The CSS
/* Begin Fancy Radio/Checkbox Buttons Styling */
.button-left .frm_radio {
padding: 0px;
margin: 0px !important;
}
.button-mid .frm_radio {
padding: 0px;
margin: 0px !important;
}
.button-right .frm_radio {
padding: 0px;
margin: 0px !important;
}
.button-left {
float: left;
}
.button-mid {
float: left;
}
.button-right {
float: left;
}
.button-left label {
background-color: #F00;
padding: 5px 10px;
float: left;
border-radius: 5px 0 0 5px;
font-weight: bold !important;
color: #fff !important;
margin-bottom: 10px !important;
}
.button-mid label {
background-color: #F00;
padding: 5px 10px;
float: left;
font-weight: bold !important;
color: #fff !important;
margin-bottom: 10px !important;
}
.button-right label {
background-color: #F00;
padding: 5px 10px;
border-radius: 0 5px 5px 0;
float: left;
font-weight: bold !important;
color: #fff !important;
margin-bottom: 10px !important;
}
.button-left .checkbox {
margin: 0px !important;
}
.button-mid .checkbox {
margin: 0px !important;
}
.button-right .checkbox {
margin: 0px !important;
}
div .hideinput input[type="checkbox"] {
display: none;
}
div .hideinput input[type="radio"] {
display: none;
}
.checked {
background-color: green !important;
font-weight: bold !important;
color: #fff !important;
}
.frm_style_formidable-style.with_frm_style .horizontal_radio .frm_radio {
margin: 0px;
}
.horizontal_radio .frm_checkbox {
margin-right: 0px;
}
.with_frm_style .frm_checkbox label input[type=checkbox], .with_frm_style .frm_radio label input[type=radio] {
display: none !important;
}
.with_frm_style select, .with_frm_style .frm_radio input[type="radio"], .with_frm_style input[type="file"], .with_frm_style .frm_checkbox input[type="checkbox"], .with_frm_style .frm_checkbox input[type="checkbox"], #content .with_frm_style input:not([type="submit"]) {
display:none;
}
.frm_style_formidable-style.with_frm_style .frm_checkbox label, .frm_style_formidable-style.with_frm_style .frm_radio label {
text-indent:0px !important;
padding-left: 10px !important;
}
/* End Fancy Radio/Checkbox Buttons Styling */
Note: Some additional styling may have been added to this demo and you may need to make adjustments according to your needs, but this will get you close.