NEX-Forms Image Selection Fields

Docs » Form Fields & Elements » Field Input Settings » Image Selections

Image Selections

Image Selection Fields in NEX-Forms enable users to choose one or multiple images from a predefined set. This field type is ideal for scenarios where visual representation is important, such as selecting product images, choosing icons, or picking photos. Each image option can be customized with labels and styling, making it easier for users to understand their choices. NEX-Forms allows for flexible styling and layout options, ensuring that the Image Selection Fields integrate seamlessly with the overall design of your form.

This article will explain how to fully utilize the NEX-Forms Image Select Field.

T-Shirt 1

T-Shirt 2

T-Shirt 3

In this Article

How to add Image Selections to a Form
Image Selections Input Settings
- General Settings
- Image Select Styling
Adding, Removing & Editing Image Selections
Image Select Validation Options

How to add a Image Selections to a form

Image Selections 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.

Image Selections input settings

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

Image Select Styling

The below table shows all the Image Select styling options, their functions and actual NEX-Forms Image Select field examples.

Image Select Styling Definitions
Setting	Definition	Example
Selectors
Checked Icon & Icon Class Name	Sets the Checked Icon for the checkbox group. Paste or type any icon class name or select the icon from a pre-set list of 1700+ Font Awesome Icons. Default icon class = fa fa-check	Check BoxesWith Icon Class: fas fa-square . Check 1 . Check 2 . Check 3 Check BoxesWith Icon Class: fa fa-close . Check 1 . Check 2 . Check 3
BG (Uncheck)	Sets the Background Color of the checkboxes while not selected.	. Check 1 . Check 2 . Check 3
BG (Check)	Sets the Background Color of the checkboxes when selected.	. Check 1 . Check 2 . Check 3
Icon (color)	Set the Color of the selected checkbox's Icon.	. Check 1 . Check 2 . Check 3
Border (color)	Sets the Border Color of the checkboxes while not selected. A checked checkbox's border is defined by its checked BG Color.	. Check 1 . Check 2 . Check 3
Labels
Label Font Size	Sets the Font Size of the radio labels. In this example the font size it set to 18px. Default = 14px	. Check 1 . Check 2 . Check 3
Label Color	Sets the Color of the checkbox labels.	. Check 1 . Check 2 . Check 3
Radio Size
	Small - Sets the Image Select size to small.	Check Boxes Small . Check 1 . Check 2 . Check 3
	Normal - Sets the Image Select size to normal size.	Check Boxes . Check 1 . Check 2 . Check 3
	Large - Sets the Image Select size to large.	Check Boxes Large . Check 1 . Check 2 . Check 3
Layout
Inline	Check Boxes . Europe . South America . North America . Central America . Caribbean . Africa . Middle East . Asia . Pacific . Antarctica
Stacked	Check Boxes . Europe . South America . North America . Central America . Caribbean . Africa . Middle East . Asia . Pacific . Antarctica
2c 2 Columns	Check Boxes . Europe . South America . North America . Central America . Caribbean . Africa . Middle East . Asia . Pacific . Antarctica
3c 3 Columns	Check Boxes . Europe . South America . North America . Central America . Caribbean . Africa . Middle East . Asia . Pacific . Antarctica
4c 4 Columns	Check Boxes . Europe . South America . North America . Central America . Caribbean . Africa . Middle East . Asia . Pacific . Antarctica
Alignment
(Align Left)	If active aligns the checkboxes to the left.	. Check 1 . Check 2 . Check 3
(Align Center)	If active aligns the checkboxes center.	. Check 1 . Check 2 . Check 3
(Align Right)	If active aligns the checkboxes to the right.	. Check 1 . Check 2 . Check 3

Adding, Removing & Editing Image Selections

This section provides a comprehensive guide to add checkboxes to the checkbox field group.

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.

Editing:
Each line represents a Image Select. Edit a single line to edit the checkbox.
Adding:
To add a new checkbox to the group type a new Image Select label into a new line or create a new line between existing checkboxes.
Removing:
Remove the line from the checkbox list.

Examples
	Option Setup	Image Selections Example
1.	Set Options Check 1 Check 2 Check 3	Check Boxes . Check 1 . Check 2 . Check 3
2.	Set Options Europe South America North America Central America Caribbean Africa Middle East Asia Pacific Antarctica	Continants . Europe . South America . North America . Central America . Caribbean . Africa . Middle East . Asia . Pacific . Antarctica
3.	Set Options Pear Orange Lemon Banana	Fruit Selection . Pear . Orange . Lemon . Banana

Image Select Validation Options

Image 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 Image Select validation works in NEX-Forms:

Edit the text field by hovering over it and then click on the Edit Icon which will bring up the field settings panel.
Click on the "VALIDATION" tab from the settings panel.

Image 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.	Fruit SelectionWith MINIMUM required selection of 3 Items . Pear . Orange . Lemon . Banana . Kiwi . Lime
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.	Fruit SelectionWith a MAXIMUM of 2 selections allowed . Pear . Orange . Lemon . Banana . Kiwi . Lime

ALSO SEE: Essential Field Validation for learing how to make a field required/manditory.

NEX-Forms Documentation