NEX-Forms Documentation

Documentation & Tutorials for NEX-Forms version 8.0 and above

Docs » Form Fields & Elements » Field Input Settings » Dropdown Selects

Dropdown Selects

Single selection dropdown selects in NEX-Forms are user-friendly dropdown menus that allow users to choose one option from a predefined list. These fields are perfect for scenarios where you need a concise, organized way to present multiple choices without cluttering the form. Users click on the dropdown to reveal the available options and select their preferred choice. You can customize the options, set default selections, and apply styling to match the form's design. Single selection dropdown selects help streamline user input, ensuring data is collected efficiently and accurately.

Dropdown Select Example

In this Article

How to add a Dropdown Select to a Form
Dropdown Select Input Settings
- General Settings
- Default Value & Input Styling
Dropdown Selection Setup

How to add a Dropdown Select to a form

Dropdown Selects are found in the draggable fields and elements toolbar under the "Selection Fields" section and is represented with this icon:

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.

Dropdown Select input settings

This section provides a comprehensive guide to understanding and effectively utilizing all the input settings available for NEX-Forms Dropdown Selects. Learn how to configure Dropdown Selects 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.

NEX-Forms - General Field Settings - Figure 5

General Dropdown Select 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. Input Names are formatted to lowercase with special characters removed and spaces are replaced with underscores. For example: if you have a field called "What's Your Email Address?" the input field will automattically be formatted to whats_your_email_address. When using multi-selection fields the field name will have a [] postfix, for example: your_favourite_animals[] 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
Input ID	Gives the Input an ID. Useful if you need to tager fields by thier id's from 3rd party scripts or CSS (Cascading Style Sheets)
Setting	Definition	Example
Disabled
	Sets the field enabled - The Dropdown Select is made selectable to the user.	Dropdown SelectThis field IS NOT disabled
	Sets the field to be "Disabled" - The Dropdown Select is made unselectable to the user.	Dropdown SelectThis field IS disabled

Default value & input styling

The below table shows all General Input settings, their functions and actual NEX-Forms input field examples.

Default value & input styling definitions
Setting	Definition	Example
Default Value	Sets the default selected option. Remove the option form the option list and use it this setting to set the default selection. See more on allocating values to selection options.
(bold)	If active sets the input text to bold
(Italic)	If active sets the input text to italic
(Underline)	If active sets the input text underlined
Font Size	Sets the font size of the input text
TX (Text color)	Sets the input field's text color
BG (Background color)	Sets the input field's background color
BRD (Border width and color)	Sets the input field's border width (size) and border color
(Align Text Left)	If active aligns the text to the left inside the input field
(Align Text Center)	If active aligns the text center inside the input field
(Align Text Right)	If active aligns the text to the right inside the input field
Input Size
	Small - Sets the input field size to small
	Normal - Sets the input field size to normal size
	Large - Sets the input field size to large
Corners
	Squared - Sets the input field's corners square
	Rounded - Sets the input field's corners rounded
	Pilled - Sets the input field's corners fully rounded (pilled)

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

Searchable Dropdowns

Create a searchable select dropdown by enabling the "Option Search" Setting.

Enable Option Search

Setting	Definition	Example
	Adds a search to the dropdown options. This is usefull when having a large amount of options in the dropdown selection for the user to choose from.	CountryWith Option Search
	Removes the search from the dropdown options. This is the default.	CountryWithout Option Search

Auto-Advance (Auto-Stepping)

NOTE:
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.

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.

Options (Choices) Setup

This is where you add the actual menu options, in other words, the choices that dropdown field will present to the user to choose from.

Editing:
Each line represents an option. Edit a single line to edit an option.
Adding:
To add a new option to the selection menu type a new line or create a new line between existing radio buttons.
Removing:
Remove the line from the list of options.

Examples
	Option Setup	Dropdown Select Example
1.	Default Value --- Select --- Set Options Option 1 Option 2 Option 3
2.	Default Value Choose a Fruit Set Options Pear Orange Lemon Banana
3.	Default Value --- Gender --- Set Options Male Female
4.	Default Value Option 1 Set Options Option 2 Option 3
5.	Default Value - Select - Set Options Europe South America North America Central America Caribbean Africa Middle East Asia Pacific Antarctica
6.	Default Value Set Options Option 1 Option 2 Option 3

Was this article helpful?

Yes

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

NEX-Forms Documentation

YEAR END SPECIAL NOW ON!