- Create a new form or edit an existing form
-
Click to add the field to the form or drag the field from the tools menu into position inside the form.
NEX-Forms Documentation
Documentation & Tutorials for NEX-Forms version 8.0 and above
Radio Buttons
Radio Button Fields in NEX-Forms provide a simple and effective way to allow users to select a single option from a predefined set of choices. This field type is ideal for scenarios where only one response is needed, such as multiple-choice questions, preference selections, or yes/no questions.
This article will explain how to fully utilize the NEX-Forms Radio Button Field.
How to add a Radio Buttons to a form
Radio Buttons are found in the draggable fields and elements toolbar under the "Selection Fields" section and is represented with this icon:
Radio Buttons input settings
This section provides a comprehensive guide to understanding and effectively utilizing all the input settings available for NEX-Forms Radio Buttons. Learn how to configure Radio Buttons to suit your needs.
- Edit the field by hovering over it and then click on the Edit Icon which will bring up the field settings panel.
-
Click on the "INPUT" tab from the settings panel.
General settings
The below table shows all General Input settings, their functions and actual NEX-Forms input field examples where applicable.
| General Radio Buttons setting definitions | ||
| Setting | Definition | |
| Input Name | Sets the name of the input field itself. By default when you enter a field's Main Label the Input Name will reflect that text in an input name format. IMPORTANT:
• One form can not have 2 or more fields with the same input names. • All input names in a single form needs to be unique. • An input field name can not be blank. TIP: If you need two or more fields to have the same label then you can edit these field's input names to be unique while still having the same labels for the fields.
NOTE: Reserved WordPress terms (parameters) like name, page, post, category, id will be prefixed with an underscore to avoid conflict, for example: name will become _name |
|
| Setting | Definition | Example |
| Disabled | ||
 |
Sets the field enabled - The Radio Buttons is made selectable to the user. | |
 |
Sets the field to be "Disabled" - The Radio Buttons is made unselectable to the user. | |
Radio Button Styling
The below table shows all the Radio Button styling options, their functions and actual NEX-Forms Radio Button field examples.
| Radio Button Styling Definitions | ||
| Setting | Definition | Example |
| Selectors | ||
| Checked Icon & Icon Class Name | Sets the Checked Icon for the radio button group. Paste or type an icon class name or select the icon from a pre-set list of 1700+ Font Awesome Icons. Default icon class = fa fa-circle |
|
| BG (Uncheck) | Sets the Background Color of the radio buttons while not selected. | |
| BG (Check) | Sets the Background Color of the radio buttons when selected. | |
| Icon (color) | Set the Color of the selected radio button's Icon. | |
| Border (color) | Sets the Border Color of the radio buttons while not selected. A checked radio button's border is defined by its checked BG Color. | |
| Labels | ||
| Label Font Size | Sets the Font Size of the radio labels. In this example the font size it set to 18px. Default = 14px | |
| Label Color | Sets the Color of the radio button labels. | |
| Radio Size | ||
 |
Small - Sets the Radio Button size to small. | |
 |
Normal - Sets the Radio Button size to normal size. | |
 |
Large - Sets the Radio Button size to large. | |
| Layout | ||
| Inline | ||
| Stacked | ||
| 2c 2 Columns | ||
| 3c 3 Columns | ||
| 4c 4 Columns | ||
| Alignment | ||
| (Align Left) | If active aligns the radio buttons to the left. | |
| (Align Center) | If active aligns the radio buttons center. | |
| (Align Right) | If active aligns the radio buttons to the right. | |
Radio Button Selection Setup
This section provides a comprehensive guide to add options to the dropdown select. These option are the choices offered by the dropdown for the user to choose from.
- Edit the field by hovering over it and then click on the Edit Icon which will bring up the field settings panel.
-
Click on the "INPUT" tab from the settings panel.
- See the "Selection Setup" section.
Auto-Advance (Auto-Stepping)
NOTE:
This setting is only relevant when using single selection dropdown selects in a multi-step form.
This setting is only relevant when using single selection dropdown selects in a multi-step form.
IMPORTANT:
DO NOT delete the "NEXT STEP BUTTON" when enabling the field's auto-advance option. The Button will be automatically hidden when the field is set to auto-advance.
DO NOT delete the "NEXT STEP BUTTON" when enabling the field's auto-advance option. The Button will be automatically hidden when the field is set to auto-advance.
| Auto-Advance Setting Definitions | |
 |
|
| Setting | Definition |
 |
Will make the form to automatically go to the next step once the user have made a selection. |
 |
The form will stay on the current step and the user need to click on the "NEXT" button to continue to the next step. |
Adding, Removing & Editing Radio Button Options
This is where you add, edit and remove the actual Radio Buttons.
-
Editing:
Each line represents a Radio Button. Edit a single line to edit the radio button. -
Adding:
To add a new radio button to the group type a new Radio label into a new line or create a new line between existing radio buttons. -
Removing:
Remove the line from the radio button list.
| Examples | ||
| Option Setup | Radio Buttons Example | |
| 1. | Set Options
Radio 1 Radio 2 Radio 3 |
|
| 2. | Set Options
Male Female |
|
| 3. | Set Options
Pear Orange Lemon Banana |
|
Was this article helpful?
Still having trouble? How can we help you?
This article was last updated on 19 November 2024
Popular Articles
Stay in Touch
Get the latest NEX-Forms news and info by following us on:
In this article