FormidablePro – Fancy Radio/Checkbox Buttons

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

This tutorial assumes that you are familiar with the FormidablePro framework, CSS & HTML. The CSS styling provided was written for the latest version of Firefox only. Additional styling may be required for compatibility with other web browsers. Please visit http://www.w3schools.com/ for additional resources.

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.

Finished Product