0 0 0 0

NEX-Forms Documentation

Documentation & Tutorials for NEX-Forms version 8.0 and above

Checkboxes

Checkbox fields in NEX-Forms allow users to make multiple selections from a list of options. Each checkbox can be checked or unchecked independently, providing flexibility for gathering various types of information, such as preferences, interests, or consent. With NEX-Forms, you can easily customize the appearance and behavior of checkbox fields, including setting default values, adding custom labels, and applying advanced styling options to enhance the user experience.

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

In this Article

How to add a Checkboxes to a form
Checkboxes 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 - Checkboxes - figure - 1
Checkboxes input settings
This section provides a comprehensive guide to understanding and effectively utilizing all the input settings available for NEX-Forms Checkboxes. Learn how to configure Checkboxes 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 - Checkboxes - 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 Checkboxes 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
Setting Definition Example
Disabled
NEX-Forms - Disabled Field - 1 Sets the field enabled - The Checkboxes is made selectable to the user.
NEX-Forms - Disabled Field - 2 Sets the field to be "Disabled" - The Checkboxes is made unselectable to the user.
Checkbox Styling
The below table shows all the Checkbox styling options, their functions and actual NEX-Forms Checkbox field examples.
NEX-Forms - General Field Settings - Figure 5
Checkbox 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
 
BG (Uncheck) Sets the Background Color of the checkboxes while not selected.
BG (Check) Sets the Background Color of the checkboxes when selected.
Icon (color) Set the Color of the selected checkbox's Icon.
Border (color) Sets the Border Color of the checkboxes while not selected. A checked checkbox'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 checkbox labels.
Radio Size
NEX-Forms - Field Size - 1 Small - Sets the Checkbox size to small.
 
NEX-Forms - Field Size - 2 Normal - Sets the Checkbox size to normal size.
NEX-Forms - Field Size - 3 Large - Sets the Checkbox size to large.
Layout
Inline
Stacked
   2c    2 Columns
   3c    3 Columns
   4c    4 Columns
Alignment
(Align Left) If active aligns the checkboxes to the left.
(Align Center) If active aligns the checkboxes center.
(Align Right) If active aligns the checkboxes to the right.
Adding, Removing & Editing Checkboxes
This section provides a comprehensive guide to add checkboxes to the checkbox field group.
  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 a Checkbox. Edit a single line to edit the checkbox.
  • Adding:
    To add a new checkbox to the group type a new Checkbox label into a new line or create a new line between existing checkboxes.
  • Removing:
    Remove the line from the checkbox list.
Examples
Option Setup Checkboxes Example
1. Set Options
Check 1
Check 2
Check 3

2. Set Options
Europe
South America
North America
Central America
Caribbean
Africa
Middle East
Asia
Pacific
Antarctica

3. Set Options
Pear
Orange
Lemon
Banana

Checkbox Validation Options
Checkbox 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 Checkbox 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
Checkbox 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