0 0 0 0

NEX-Forms Documentation

Documentation & Tutorials for NEX-Forms version 8.0 and above

Dropdown Multi-Selects

Dropdown Multi-Selects in NEX-Forms allow users to select multiple options from a single dropdown menu, making it a versatile choice for forms that require more complex input. This feature is ideal for surveys, preference selections, and any form scenario where multiple responses are needed. By utilizing Dropdown Multi-Selects, you can effectively gather multiple pieces of information within a single field, streamlining the user experience and improving the functionality of your forms in NEX-Forms.

In this Article

How to add a Dropdown Multi-Select to a form
Dropdown Multi-Selects are found in the draggable fields and elements toolbar under the "Selection Fields" section and is represented with this icon:
  1. Create a new form or edit an existing form
  2. Click to add the field to the form or drag the field from the tools menu into position inside the form.
    NEX-Forms - Figure Arrow
    NEX-Forms - Figure Arrow
    NEX-Forms - Form Fields and Elements - Dropdown Multi-Selects - figure - 1
Dropdown Multi-Select input settings
This section provides a comprehensive guide to understanding and effectively utilizing all the input settings available for NEX-Forms Dropdown Multi-Selects. Learn how to configure Dropdown Multi-Selects to suit your needs.
  1. Edit the field by hovering over it and then click on the Edit Icon which will bring up the field settings panel.
    NEX-Forms - Figure Arrow
    NEX-Forms - Form Fields and Elements - Editing a Field
  2. Click on the "INPUT" tab from the settings panel.
    NEX-Forms - Figure Arrow
    NEX-Forms - Form Fields and Elements - Dropdown Multi-Selects - figure - 3
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 Multi-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
NEX-Forms - Disabled Field - 1 Sets the field enabled - The Dropdown Multi-Select is made selectable to the user.
NEX-Forms - Disabled Field - 2 Sets the field to be "Disabled" - The Dropdown Multi-Select is made unselectable to the user.
Default value & input styling
The below table shows all General Input settings, their functions and actual NEX-Forms input field examples.
NEX-Forms - General Field Settings - Figure 5
Default value & input styling definitions
Setting Definition Example
Default Value / Placeholder Sets the default selected option. Use 0==Your Placeholder Text for no default selection and setting it as a placeholder. The 0== is what tells the field to use it as a placeholder and not a default selected option.
(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
NEX-Forms - Field Size - 1 Small - Sets the input field size to small
NEX-Forms - Field Size - 2 Normal - Sets the input field size to normal size
NEX-Forms - Field Size - 3 Large - Sets the input field size to large
Corners
NEX-Forms - Field Corners - 1 Squared - Sets the input field's corners square
NEX-Forms - Field Corners - 2 Rounded - Sets the input field's corners rounded
NEX-Forms - Field Corners - 3 Pilled - Sets the input field's corners fully rounded (pilled)
Dropdown Multi-Selection Option Setup
This section provides a comprehensive guide to add options to the Dropdown Multi-Select. These option are the choices offered by the dropdown for the user to choose from.
  1. Edit the field by hovering over it and then click on the Edit Icon which will bring up the field settings panel.
    NEX-Forms - Figure Arrow
    NEX-Forms - Form Fields and Elements - Editing a Field
  2. Click on the "INPUT" tab from the settings panel.
    NEX-Forms - Figure Arrow
    NEX-Forms - Form Fields and Elements - Editing a Field
  3. See the "Selection Setup" section.
NEX-Forms - General Field Settings - Figure 5
  • 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 Multi-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


Dropdown Multi-Select Validation
Dropdown Multi-Select validation in NEX-Forms ensures that the selections made, or not made, by users meets specific criteria before the form can be successfully submitted. This helps maintain data integrity and prevents incorrect or incomplete submissions. Here’s a detailed explanation of how Dropdown Multi-Select validation works in NEX-Forms:
  1. Edit the text field by hovering over it and then click on the Edit Icon which will bring up the field settings panel.
    NEX-Forms - Figure Arrow
    NEX-Forms - Form Fields and Elements - Editing a Field
  2. Click on the "VALIDATION" tab from the settings panel.
NEX-Forms - General Field Settings - Figure 5
Dropdown Multi-Select Validation Option Definitions
Option Definition Example
Minimum Selections Required Sets the minimum required number of selections that the user needs to make in order to submit the form or to advance to the next step.

NOTE: Leave this setting empty for no limits.
Secondary Error Message Sets the error message to be displayed if a user fails to select the minimum required selections.

{x} is used as a placeholder which will be replaced in the error message with the minimum selection requirement number.

NOTE: This is only applicable if a Minimum selection requirement is set for the multi-select.
Maximum Selections Allowed Sets the maximum selections that a user can make.

NOTE: Leave this setting empty for no limits.


ALSO SEE: Essential Field Validation for learing how to make a field required/manditory.
Was this article helpful?
Yes
No
Still having trouble? How can we help you?
This article was last updated on 19 November 2024
Stay in Touch
Get the latest NEX-Forms news and info by following us on:
In this article