The Problem
How can I style the background color of individual radio buttons to highlight the one that's selected?
—Formidable Slack Community member
The Approach
There are a several ways for doing this and Formidable Forms makes it easy to implement any method you choose. This tutorial walks you through two solutions. The first is rather simple and works without customizing the form's HTML. All you have to do is use a small jQuery snippet and some CSS.
The second solution is a little more complex and requires customizing the form's HTML. It also uses a more robust jQuery snippet and CSS. Depending on your imagination and technical skill, it can be used to render some seriously awesome effects. Either technique works equally well for radio buttons or checkboxes.
Demo Form
This form demonstrates the two solutions outlined below. Solution #1 is shown on the left and Solution #2 is on the right. Select any of the options on either side of the form to view the highlight effect.
Solution #1
Both of these solutions requires a basic understanding of Formidable's Customize HTML templates. First, let's examine the Formidable radio button template used for rendering the HTML in the browser. Examine highlighted line 5 carefully. Notice that there is only a single [input] shortcode. This single shortcode generates the four inputs we see on our demo form.
The rendered HTML as seen in the browser:
Solution #1 jQuery
The jQuery binds our code to the radio button's change event (line 4). This works fine since we don't have any default values set on this form. If you use default values, which means that an option is pre-selected when the form loads, you'll need to bind the functionality to both the load and change events.
The next section of code loops through all of the radio button options to remove the highlight class from previously selected options. If we don't do this step, you'll end up with multiple options highlighted even though only one can be selected.
The last step adds the highlight class to the selected input's parent div and label. Why the parent div and label? Because for this demo, we chose to highlight the entire input by changing the parent div's background color and adding a border. The label is the actual radio button text.
Solution #1 CSS
The CSS for creating the highlight effect is very simple consisting of just two blocks of code, one for the selected input's parent div, and one for its label.
Solution #1 Checkbox jQuery
Because checkboxes allow for the selection of multiple options at once, the loop used for the radio button jQuery needs to be altered slightly to assure we correctly apply the highlight class to all checked options. The HTML template and CSS classes remain the same as for the radio buttons.
Solution #2
As mentioned earlier, this solution is a little more complex. Following the guidelines in Formidable's Customize HTML knowledge base article, we modified the radio button template to change the single [input] shortcode to 4 option based shortcodes, one for each of our options. Look closely at line 5 (highlighted). Scroll to see the entire line.
In each of the individual option shortcodes, we've added a class property. Why a class? There's no specific reason for this. It could just as easily be a data attribute. In fact, any valid HTML property will suffice as long as it's unique to the specific option.
Examine the highlighted lines in the rendered HTML. Scroll to see the class property in each of the rendered input fields. We'll be using that property to construct the appropriate class for each input's parent div and label.
Solution #2 jQuery
As with the Solution #1 jQuery, this jQuery binds our code to the radio button's change event (line 4). Again, this works fine since we don't have any default values set on this form. If you use default values, you'll need to bind the functionality to both the load and change events.
The first step is to create the variables we need further down in our loop. Line 5 extracts the selected option's class property and appends "-highlight" to it. For each of the options, this will produce the class names of red-highlight, green-highlight, blue-highlight, and yellow-highlight respectively. Line 6 is an empty variable, we'll use in the loop.
The loop to remove previously used classes begins at line 9. Just as we did in line 5, line 10 constructs a new class name based on the class property. The balance of the loop functions the same as the first jQuery. We remove the previously selected option's highlight class from its parent div and label.
Last, as we did in the first example, we assign the new highlight class to the currently selected option's parent div and label.
Solution #2 CSS
This solution's CSS requires separate classes for each option's parent div and label.
Leave a Reply