Overview

Radio buttons are used in the form to let users select a single option out of multiple alternatives. It is possible to change the layout as well as the style of Gravity Forms radio buttons. By the end of this tutorial, you will be able to

• Divide radio button choices into multiple columns
• Set font size for choices
• Set font color for choices
• Set width for choices
• Set Padding
• Use font-awesome icons inside radio input boxes
• Change radio inputs to switches
• Convert radio inputs to buttons
• Change the size of radio input boxes

Styling Gravity Forms Radio Input Boxes

Styling radio input boxes is not straightforward if you plan to do custom CSS. Browsers like Chrome, firefox, edge, and Safari have their default styling which is used to display them. This is the reason why most of the sites have similar-looking radio input boxes.

However, we have plenty of easy-to-use addons for Gravity Forms that let you style radio input boxes without any CSS coding.

Gravity Forms Checkbox & Radio Styler Addon

The Checkbox & Radio styler addon for Gravity Booster is specifically created to give you endless design and customization options for radio input boxes. The addon will let you do the following things

• Divide radio options into two, three, four, or five-column layouts.
• Use font-awesome icons inside radio input boxes
• Convert radio inputs to buttons
• Change the shape of radio input boxes to curve or round.
• Change the checked style to fill or thick.
• Change the unchecked radio input color to any color of your choice.
• Change the checked color of the radio input box to any color of your choice.
• Set animation when the radio input boxes are checked. You can choose from smooth, tada, jelly, rotate, and pulse animations.

You can also check the demo form below to see all the styling and customizations.

Radio Styler Demo Form

We also have a detailed step-by-step guide for using the Checkbox & Radio styler addon.

Gravity Forms  Material Design Addon

Material design addon is another way to change the styling of radio input boxes without any coding. Once you enable material design on your form then it automatically changes the radio inputs to a modern and sleek design. 

The new radio input box design will show a shadow around the input boxes when clicked and also has a thick circular dot to represent that the radio option is checked. It is a colored radio input box whose color can also be changed.

You can check the demo form below to see how radio input boxes look with material design enabled.

Material design demo form

We also have a detailed tutorial for using Material Design on Gravity Forms.

Gravity Forms Bootstrap Design Addon

Bootstrap design addon has also the ability to change the design of gravity forms radio input boxes. Similar to material design it will also apply to all form fields along with radio inputs. It also adds a highlight around the radio input box when clicked.

To highlight that the radio input is checked, it adds a thick ring-shaped design to the radio input box. The color of the ring can be changed using color picker control.

You can check the demo form below to see how radio input boxes look with bootstrap design enabled.

Bootstrap design demo form

We also have a detailed guide for using the Bootstrap Design addon on Gravity Forms.

Styling Gravity Forms Radio Options Labels

In the previous steps we have seen how different addons can be used to style the gravity forms radio input boxes. Now we will discuss how to style the radio option label text. It can be done with plugins as well as custom CSS.

Styling Radio Labels with Gravity Booster

Gravity Booster is your easy-to-use and free gravity form styler plugin. It lets you make your forms look the way you want without the need to hire a designer. The booster screen has a live preview of the form that immediately reflects the design changes you make. Follow the steps mentioned below

• Install and activate the Gravity Booster plugin.
• Go to Forms -> Booster and then select the form for which you want to change radio input option labels.
• Go to the Styler panel and then select the Radio section.

Under the Radio section set the following settings for radio option labels

• Width: This setting controls the width the labels can take. If you make the width too small then it will break the option into multiple lines.
• Font style: It can be used to make the option labels bold, italic, underlined, or uppercase.
• Font Size: Usually the font size of option labels is small. However, you can change its value from here.
• Line Height: If your options are too close to each other then this will add up the space between them.
• Font Color: This option can help you differentiate the option label color from the rest of your form. You can use the built-in color picker control to set the color.
• Padding: It adds space around the option labels. You can also set top, right, bottom, and left paddings separately.

After you are happy with design changes then click on the Save button.

Custom CSS for Styling Radio Option Labels

For changing the design of radio buttons without any plugin you need to add the following lines of CSS code in your WordPress website’s stylesheet.

Code Explanation:

• body #gform_wrapper_1 => This code will locate the main form wrapper element in HTML whose form ID is ‘1’. Its value should be changed to the actual form ID. If you want to have the same styling for all the forms then you can leave ‘_1’ from the above code and the styling will now work on all the Gravity Forms.
• .gform_body .gform_fields .gfield .gfield_radio li => This code is used to find the radio inputs present inside the form.

Attributes used:

• font size: This will set the font size for radio input choices. You can set its value in pixels, percentages, or em. In the above example, I have set the font size to 19 pixels.
• color: This attribute will set the color of radio input choices. You can give standard English color names, hex codes, or RGB values.
• width: This will set the maximum width for the radio input choices. If the text is larger than the width then it will automatically shift to the next line.
• padding: padding is used to add space between adjacent radio input choices.

Divide Radio Inputs in Multiple Columns

There are two methods to divide gravity from radio inputs into multiple columns. One option is to use the Checkbox & Radio Styler plugin and the option requires you to add custom CSS classes on the radio field. Below you will find both options in detail.

Radio Inputs Multiple Columns Using Checkbox & Radio Styler

• After you have installed and activated the Checkbox & Radio styler addon then navigate to Forms-> Booster.
• Here select your desired form and then go to the Checkbox & Radio panel.
• Under the Radio section select the number of columns you want to divide radio inputs. It allows you to divide it into up to 5 columns.
• Save your changes and it’s done.

Radio Input Columns Using CSS Ready Classes

To change the layout of radio inputs we can use CSS Ready Classes that are built into Gravity Forms 1.5 and later versions.

To use CSS-ready classes edit the form field in the backend and then navigate to the Advanced section. Here you will get the option with the title CSS class name. This is the place where CSS Ready Classes should be entered.

To divide the radio inputs into 2, 3, 4, and 5 columns use gf_list_2col, gf_list_3col, gf_list_4col, and gf_list_5col classes respectively. This will divide the choices into columns so that they are equally spaced from each other.

Use gf_list_inline  and the choices will have a horizontal layout without equal spacing.