Radio & Checkbox Styles: Formidable Forms

Radio Button & Checkbox Styles: Formidable Forms

Creating custom styles for your checkboxes and radio buttons can be extremely difficult, especially as we cannot style them using CSS. Or can we?

This guide will cover a neat workaround on how you can style radio buttons and checkboxes when using Formidable Forms and we have included a live demo below which will show you everything we’ll cover in this guide along with various options on how to implement these styles.

Radio & Checkbox Styles: The Code

Before we can implement any of the styles above we need to add some custom JavaScript and CSS to our site. We’ll be using JavaScript to target our radio button and checkbox elements and add additional CSS to to style them.

We have provided 3 different style examples for you to choose from and the CSS for each one can be implemented in a number of ways depending on your needs. Also outlined are a few scenarios that you may find useful.

The JS

Start by adding the following JS to the ‘Before Fields‘ section of your form or, if you want to apply the style to all forms on your website, then globally in your theme’s JS files. If your theme doesn’t have anywhere to add custom JS then you can edit your theme files or use a plugin such as the Custom Snippets plugin.

<!-- Formidable Button Script -->
<script type="text/javascript">
jQuery(document).ready(function($){
   $('.with_frm_style .frm_radio input[type=radio]').after('<span>'); // Remove this line if you do not wish to style radio buttons
   $('.with_frm_style .frm_checkbox input[type=checkbox]').after('<span>'); // Remove this line if you do not wish to style checkboxes
});
</script>

What it does: As we can’t re-style the existing radio buttons and checkboxes we are going to use a workaround to hide them and add in a new html element that we CAN style as we see fit. This snippet of JS will add a blank <span></span> element after each of the <input> fields in the form HTML which will allow us to create our own styles. In other words, all of the styles below will work by hiding the default <input> html element and creating a new <span> element in its place which we can control and re-style.

The CSS

Below is the CSS for each of the 3 versions in the demo above. There are multiple ways of implementing these depending on your needs and we have outlined some instructions for implementing them in 3 common scenarios but you may still need to make some adjustments for your theme & styling.

Radio & checkbox styles: How to install

There are quite a few ways of installing these styles to your forms and it can vary depending on how you’d like to use them. However, we’ve come up with 3 of the most common scenarios to help guide you to changing the styles of your radio and checkbox fields.

Scenario 1

Apply the same style to all radio buttons & checkboxes across your entire site.

If you’d like all your forms to have a consistent look and feel then you may wish to utilise the same styles for all the forms across your website. In this case, you can follow the steps below:

1. Copy and paste the JS snippet globally to your theme options or plugin. If your theme does not allow you to
2. Copy and paste the CSS of your chosen style globally to your theme’s CSS files.

The CSS here will hide the <input> element which ships with the default radio button and checkboxes and create new styles for the <span> and their pseudo elements we created with our JS snippet from Step 1.

Scenario 2

Apply the same style to all radio buttons & checkboxes in individual forms.

Unlike in the first scenario, you may only want a custom style to your radio buttons and checkboxes on individual forms. In this case, you can follow the steps below:

1. Copy and paste the JS snippet to the ‘Before Fields’ of the form you wish to style. Although, if your theme allows you to add JS to the theme files directly, you may wish to add this code here if you’d like to apply styles on multiple forms.
2. Copy and paste the CSS of your chosen style either globally to your theme’s CSS files or to the individual forms/pages.

Similar to the previous scenario, this will hide the default <input> elements and create new styles for the <span> elements. However, the only difference here is that the styles will only apply to the form(s) you’ve added the JS/CSS to.

If you’re adding the CSS globally then you may want to specify a class name to target only the form(s) you wish to style. Therefore, this will prevent overwriting radio/checkbox styles on any other form(s) within your site that you may want to leave as default or style differently.

In relation to this, we recommend setting class names to the HTML form element you’d like to apply the styles to. This can be done under the form Settings > Customize HTML > Form Classes.

Once this is complete, you’ll then need to add the class name to each of the CSS rules we imported for Step 2. For example:

/* Targeting our Custom Form */

.custom_form .frm_checkbox,
.custom_form .frm_radio {
    margin-left: 0px;
    margin-bottom: 15px !important;
}

Here, we have given our form a class of .custom_form and targeted all radio and checkbox fields within these forms.

Scenario 3

Apply mixed styles to a single form.

You may want to implement multiple styles to your form. For instance, you may want different radio button styles to your checkbox styles or perhaps even different styles depending on the section of your website. For example, you may want to use the Material Design as the radio buttons and the Flat Design for checkboxes or perhaps you’d like to use Material Design for Section 1 of the form and Flat Design for Section 2.

As a result, this method requires a bit more development but can be followed using the steps below:

1. Copy and paste the JS snippet either globally or to the ‘Before Fields’ of the form you wish to style.
2. Copy and paste the CSS of your chosen styles either globally or to the individual forms/pages.
3. You will need to add a class name to the CSS to differentiate both styles we’re going to use. We’ve gone for .version_1 and .version_3 in the example below.
4. Lastly, we will need to add these class names to the section or fields in the HTML where we want the styles to appear. This can be added under Settings > Customize HTML as seen below.

/* Differentiating Both Styles */

.version_1 .frm_radio input[type=radio] + span:before,
.version_1 .frm_radio input[type=radio] + span:after {
  /*
  * Styles go here
  */
}

.version_3 .frm_radio input[type=radio] + span:before,
.version_3 .frm_radio input[type=radio] + span:after {
  /*
  * Styles go here
  */
}

.version_3 .frm_checkbox span:after,
.version_3 .frm_radio span:after{
  /*
  * Styles go here
  */
}

<!-- Customize HTML / Section 1 -->
<div id="frm_field_[id]_container" class="version_1 frm_form_field form-field [required_class][error_class]">
  <!-- Section markup goes here -->
</div>


<!-- Customize HTML / Section 2 -->
<div id="frm_field_[id]_container" class="version_3 frm_form_field form-field [required_class][error_class]">
  <!-- Section markup goes here -->
</div>

Remember: You’ll need to differentiate the two styles you imported in Step 2 when using this method to avoid your CSS from being overwritten. A live demo of this example can be seen below.

Mixing Styles

If you would like to add multiple styles to your forms (as mentioned above) it’s possible to do so and have a different style for radio buttons and checkboxes. There are many ways to achieve this using the code above so we won’t go into too much detail here but we have included another demo showcasing mixed uses below.

Optional Extra

We can also include some CSS to animate in any conditional fields or form sections to adda a nice animation effect to our forms. This can be added to the Formidable > Styles > Custom CSS section which will apply it ‘site-wide’ or you can add it to individual pages and forms.

Click on the ‘Tick Me‘ option in the above demo to see it working.

/* Animate in Fields */

.form-field, .frm_submit {
	-webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

Radio & checkbox styles – Summary

This should be enough to give you fully custom checkbox & radio button styles.

If you liked this tutorial, visit our blog for more ways to improve your websites and workflow.

Enjoy.