How to Change Style and Layout of Radio Inputs Gravity Forms

March 13, 2016 - By 

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.

add css ready classes

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.

radio inputs 3 columns

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

inline display radio inputs

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.

 

Code Explanantion:

  • 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.

 

Attributes used:

  • 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.

open customizer

  • Now open customizer on the post where the form is embedded.

styles & layouts menu

  • Click on the Styles & Layouts Gravity Forms panel and then select the form.

radio inputs section

  • 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.

styling radio inputs

  • 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.

Posted In:  Gravity forms
1  comment
1 Comment
  • how do you put a 2 column radio button next to a form field?

    eg. Phone number is the field, the radio button tells if it is a home or cell number.

  • Leave a Reply

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

    Subscribe to Blog via Email

    Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 1 other subscriber