FormidablePro – Fancy Radio/Checkbox Buttons

Last Revised 1/31/2017

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(index) {
  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(index) {
  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;
}

/* 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