Radio buttons are used in form to let users select a single option out of multiple alternatives. It is possible to change layout as well as 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
How to Divide Radio Inputs into Multiple Columns
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 backend and then navigate to Advanced section . Here you will get the option with title “CSS class name“. This is the place where CSS Ready Classes should be entered.
To divide the radio inputs into 2, 3, 4, 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 horizontal layout without equal spacing.
How to change the design of Radio buttons
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.
- 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 form.
- font-size: This will set the font size for radio input choices. You can set its value in pixels, percentage 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 colour names, hex codes or RGB values.
- width: This will set the maximum width for the radio input choices. If the text is larger then the width then it will automatically shift to next line.
- padding: padding is used to add space between adjacent radio input choices.
Changing Design of radio buttons using Styles and Layouts Plugin
With Styles and Layouts for Gravity Forms plugin it is possible to do all the above design without writing a single line of code. Moreover this plugin is not limited to designing of mere radio fields but it covers all the segments of the form like header, sutbmit button, title and description styling and much more.
Follow these Steps to Change the Styling of Radio Inputs using Plugin
- Download and activate it in your WordPress installation from here.
- Now open customizer on the post where the form is embedded.
- Click on the Styles & Layouts Gravity Forms panel and then select the form.
- Now navigate to Radio Inputs section. Here you will see all the designing options for radio buttons. Simply edit the settings preview the changes live on your website.
- You can set maximum width, font color, font-size and padding from here.
- Once you have finalized the display, click on Save and Publish Button to publish the changes.
There are no additional steps required. If you will open the form without login then it will look exactly the same way you designed it.
Here is the video tutorial to show you how easy it is to use
Leave a comment for any question regarding this tutorial.