NEX-Forms Documentation
Documentation & Tutorials for NEX-Forms version 8.0 and above
NEX-Forms Builder GUI (Graphical User Interface)
The NEX-Forms builder GUI (Graphical User Interface) is your workspace for creating forms using a drag-and-drop approach, complemented by a wide array of settings and styling options to produce stunning forms. This article provides an in-depth overview of the NEX-Forms Builder layout, ensuring you can easily locate the tools and features you need, whenever you need them.
The NEX-Forms Builder GUI (Graphical User Interface)
This is the NEX-Forms editor with each major section numbered to be defined in detail further down in this article.
1 Top bar
The top bar contains the form title (editable), save, preview, undo and redo actions as well as help item in the top right corner.
| Top bar Item Definitions | |
| Item | Function |
 NEX-Forms Dashboard |
Takes you back to the NEX-Forms Dashboard. |
| SAVE | Saves all aspects of the form. Alternatively hit CTRL+S on your keyboard to save a form. |
| PREVIEW | Opens a full preview of the form. |
| Undo | Undoes the last action taken. |
| Redo | Redoes the last undo. |
| Keyboard Shortcuts | Opens a list of all the available NEX-Forms Builder keyboard shortcuts. |
| Tutorials | Opens all available Interactive Tutorials |
| Tours | Opens all available Backend Tours |
2 Main Menu
The main menu contains all related aspects of a form, from the form itself to adding conditional logic to the form's email notification setups and add-on integrations. The highlighted menu item, like "Form Editor" below, shows the aspect of the form currently being worked on.
| Main Menu Item Definitions | |
| Menu Item | Function |
| Form Editor | Opens the actual form design and editing aspect of the form. |
| Success Message | Opens the success message editor of the form which comes up after a form submission. |
| Conditional Logic | Changes the workspace view to a conditional logic data flow diagram and opens all current conditional logic rules and new rule setup. |
| Email Autoresponders | Opens admin and user Email Notifications Setup for the form. |
| Integrations | Opens the setup for all available integrations (add-ons), such as the PDF Creator, PayPal Payment Setup, Zapier Setup, and email campaign integrations like MailChimp, MailPoet, Mailster, GetResponse, etc. |
| Extra Form Options | Opens extra options for the form, such as adding hidden fields and setting up submission methods. |
| Embed | Opens all the form embedding options, such as setting up popup form shortcodes or finding the inline form shortcode to be used on a page, theme template, or post. |
3 Multi-step Tools and Navigation Bar
This toolbar includes everything regarding a multi-step form. From here you can control: adding new steps, setting up the breadcrumb, adding timers (like quiz timers), and other styling and functional multi-step settings.
| Multi-step Tool Definitions | |
| Setting | Function |
| Multi-step Settings | Opens up all the multi-step settings, including overall multi-step settings, breadcrumb styling and functional settings, and timer styling and functional settings. |
| New Step | Adds a new step to the form and opens this new step for designing and styling. |
| All | Opens all steps in the form. Use this to rearrange the multi-step order by dragging the steps, as well as easily changing step names, step icons, and step descriptions. |
 |
Multi-step navigation. Use this to change the step you want to be working on. In this example, the current open step is step 4 out of this 6-step form. |
4 Draggable Fields, Elements & Grid System
This toolbar includes all the elements that can be dragged or clicked into a form. Find the Grid system, all form fields, and other elements that can be used in a form in this toolbar.
| Draggable Fields, Elements & Grid System Definitions | |
| Object | Function |
| Layout / Grid System | |
| 1 Column Grid | Adds a 1 column grid into your form. |
| 2 Column Grid | Adds a 2 column grid into your form. |
| 3 Column Grid | Adds a 3 column grid into your form. |
| 4 Column Grid | Adds a 4 column grid into your form. |
| Preset Fields | |
| Name | Adds a default pre-made Text Field called Name with a user icon. Set to be required by default. |
| Adds a default pre-made Text Field called Email with an email icon. Set to be required and validated as an email field by default. | |
| Phone | Adds a default pre-made Text Field called Phone Number with a phone icon. Set to be required and validated as a phone number field by default. |
| URL | Adds a default pre-made Text Field called URL with a link icon. Set to be validated as an URL address by default. |
| Query | Adds a default pre-made Textarea called Query with a comment icon. Set to be required by default. |
| Input Fields | |
| Text Field | Adds a single-line Text Field. |
| Textarea | Adds a multi-line Text Area. |
| Password | Adds a Password Field. |
| Selection Fields | |
| Dropdown Select | Adds a single choice Dropdown Selection Field. |
| Dropdown Multi-Select | Adds a multi-choice Dropdown Selection Field. |
| Radio Button Group | Adds a single choice Radio Button Group to the form. |
| Check Box Group | Adds a multi-choice Check Box Group to the form. |
| Thumb / Image Selection | Adds a single or multi-choice Image Selection Group to the form. |
| Icon Selection | Adds a single or multi-choice Icon Selection (AKA Super Selection) Group to the form. |
| Special Fields | |
| Range Slider | Adds a Range Slider Field. |
| Spinner | Adds a Number Spinner Field. |
| Autocomplete | Adds a preset Autocomplete Field |
| Tags Input | Adds a Tags Input Field. |
| Digital Signature | Adds a Digital Signature to the form. |
| Rating Field | Adds a Rating Field to the form. |
| Date/Time Fields | |
| Date Picker | Adds a Date Picker Field to the form. |
| Time Picker | Adds a Time Picker Field to the form. |
| Uploaders | |
| Multi-File Uploader | Adds a Multi-file uploader to the form. |
| File Uploader | Adds a single File Uploader to the form. |
| Image Uploader | Adds a single File Uploader with an image preview to the form. |
| Math | |
| Math Logic | Adds a math logic field to the form. |
| Math Logic Slider | Adds a math logic slider to the form. |
| Buttons | |
| Submit Button | Adds a Submit Button to the form. When creating multi-step forms, this can be used to add Next/Previous Step buttons. |
| Step Forward Button | Adds a next step Button to the form. Only applicable when creating multi-step forms. |
| Step Back Button | Adds a previous step Button to the form. Only applicable when creating multi-step forms. |
| Reset Button | Adds a Reset Button to the form. This button will reset clear the form. |
| HTML Elements | |
| Headings | Adds headings from sizes H1 - H6 to your form. |
| Icon | Adds one of over 1500 Font Awesome Icons to the form. |
| Image | Adds an image to the form. |
| Paragraph | Adds a text paragraph to the form. |
| HTML | Used to add any raw HTML into the form like bullet list, external links, etc |
| Divider | Adds a divider into the form. |
| Panel | Adds a panel section the form. Used to group fields. |
5 Workspace Views
From here, you can control your current workspace. You can switch to a full-screen view and toggle between a dark or light workspace. For example if your website is based on a dark theme then it would be benificial to switch to a dark workspace while creating your form.
| Workspace View Definitions | |
| Button | View |
| Full Screen | Toggles between full screen view and normal view. |
| Light Workspace | Changes the workspace to a light theme (does not affect the form design in any way). |
| Dark Workspace | Changes the workspace to a dark theme (does not affect the form design in any way). |
6 Overall Styling Tools (AKA Width Bar)
From here, you have quick access to overall styling options that affect the form or success message.
| Overall Styling Tool Definitions | |
| Setting | Function |
 |
Sets the overall form theme to Bootstrap, Material Design, Neumorphism, JQuery UI, or Classic. Requires the Form Themes add-on for NEX-Forms |
 |
Sets the form's color scheme. Includes 40+ pre-set color schemes. Requires the Form Themes add-on for NEX-Forms |
 |
Sets the width of the form in percentages or pixels. Using pixels will result in a non-responsive form. It is recommended to use 100% form width and set the width of the container containing the NEX-Forms shortcode to your specifications. |
 |
Sets the form background color and drops a light or dark box showdow to the form. To remove a box shadow form a form re-click on the active shadow  |
 |
Sets all the padding inside the form container: top, right, bottom, and left. All sides can be managed individually in Overall Styling Options. Form padding is 30px by default. |
| More Styling Options | Opens more overall styling options for the form itself, overall styling for fields, and Custom CSS. |
7 Form Canvas Area
This is where you do the actual form construction using tools like drag-and-drop, dragBox selection, right-click context menus, batch field styling and editing, and more.
8 Settings Panel
All settings will slide in from the right-hand side of the form builder, like the Overall Styling settings below. Whether you are editing a field or setting up multi-step settings, this is the area in the form builder GUI where the settings will appear.
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