Format Radio Buttons as Text Blocks

Problem

Data Scie posted the following question in the "How To" channel of Formidable's Slack Community.

Anybody able to style FF radio buttons like blurbs: sections with icons and styled text that act like radio buttons instead of the default style ?

This image is attached to the question to illustrate Data Scie's target design.

Example of radio button blurbs with image

While Formidable doesn't provide a direct method for achieving this type of format "out of the box", it does provide the infrastructure where you can easily create this format my adding some custom CSS, jQuery, and HTML.

Since this question has been asked several times in the Slack community, here's our solution.

Solution

Let's start with the demo form that illustrates the radio button solution. Click any radio button to display the selected value.

Radio Button Formatted as Text Block
I would like to...

Radio Button Values

First, choose 'Use separate values'. Then, add the text content, including HTML markup, as the radio button labels and the values you want stored in the database.

This is the label content used in the demo form. We've added HTML span tags so we can creatively use CSS to style the text.

<span class="label_line1">Lose Fat</span><br><span class="label_line2">Get leaner and increase your stamina</span>

<span class="label_line1">Gain Muscle</span><br><span class="label_line2">Build muscle strength</span>

<span class="label_line1">Maintain Weight</span><br><span class="label_line2">Eat and train for optimum health</span>

HTML

Next, edit the Formidable generated radio button HTML. Editing means changing the [input] shortcode to use individual inputs and wrap them in HTML to create the flex box design with CSS with this code block to achieve the flex box design.

Lines 6 through 17 (highlighted) are the code we've added. Notice data-target="#field_[key]-0" and beyond. This is used by the jQuery to change the checked property for the selected value to true. The reason we use this is because we want the entire "flex-display" div to be clickable. The input itself takes up a small portion of the space in this div and is hard to click unless you know exactly where the input is located.

In this example, we're using Font Awesome icons as the images. You can just as easily use any image you'd like here.

jQuery

This jQuery is added to the After Fields area on the form's Customize HTML page.

The jQuery first retrieves the data-target so we can apply the checked=true property. Then, to highlight the selected text box with the blue color, we first have to loop through all of the text boxes to remove the "is_selected" class from any box that was selected previously. Last, we apply the "is_selected" class to the currently selected value text box.

CSS

This CSS is added to the Before Fields area on the form's Customize HTML page.

The CSS we used is customized for this demo form only. We suggest you modify it for your aesthetics. Lines 2 through 17 establish the flex box display, adjust the bottom margins between the text boxes, and apply selected colors for various pseudo-classes. Line 18 adjusts the text indent Formidable applies to the label so that line 1 and line 2 are even at the left margin. Line 21 hides the radio button. Line 27 sizes the Font Awesome icons.

Reader Interactions

Leave a Reply

Your email address will not be published. Required fields are marked *