Radio inputs are a great choice when you want the user to select an option among a small set of options. If you want to provide more than 10 options to choose from then you can consider using drop-down fields as well. Here is the tutorial to design dropdown fields. In this tutorial, you will know how to change the styling of radio fields using freestyle builder plugin as well as by using custom CSS.

How to Style WPForms Radio Inputs with Free plugin

Styler for WPForms is a free WordPress plugin with 5000+ active installs. It is built on WordPress customizer so, you will get a live preview of all the changes. The plugin has over 150 design options to customize the display of form components like form wrapper, labels, inputs, etc. I don’t want to do CSS coding then this is the best way to design your form.

Steps to Style WPForms Radio Inputs

Click on Add new under plugin to download “Styler for Wpforms”

Download and install Styler for WPForms from the official WordPress plugin repository. You can find it under Plugins -> Add New and then searching for ‘Styler for WPForms’.

Before you can start styling you need to add the form in a post or page. Open the page which contains the form in frontend and then open customizer. You can check our tutorial about how to open customizer if you need help with it.

Now navigate to ‘Styler for WPForms‘ section and select the form.

“Styler for Wpforms” panel

After the design options are loaded then navigate to Radio section. You will get the following styling options for dropdowns

Radio panel.

These settings allow us to style the radio input fields. It contains the following properties:

• • Width: You can set different widths for desktop, tablets, and mobiles.
  • Font Style: It lets you change the styling of font radio inputs to bold, italics, uppercase and underline.
  • Font Size: You can add font size in px, em or %. The values can be different for desktops, tablets, and mobiles.
  • Line-Height: Similar to font size it has options to set responsive values and in different units as well.
  • Font color:  Using this option you can choose the color for the radio input text.
  • Padding: Using the padding property you can provide the space between the different radio input fields. you can use any properties like padding-top,padding-right,padding-bottom and padding-left.

Design options for Radio field.

Here is the video tutorial for styling Radio font color

Steps to Style WPForms Radio Inputs with CSS

You can also style the radio inputs of WPForms using custom CSS. The custom CSS code can be added under customizer -> Aditional CSS.

How to Divide WPForms Radio inputs into Multiple Columns

WpForms has inbuilt support for creating multi-column layout for radio inputs. To create a 2, 3 or inline layout you have to open the form editor then go Field Options -> Advanced. Here you will get the ‘Column Layout’ option with 2, 3 and inline column layout choices.

Once you have selected the layout you want to implement then click on Save button to publish your changes.

If you need any help with the above tutorial then feel free to leave a comment and I will get back to you.