0 0 0 0

NEX-Forms Documentation

Documentation & Tutorials for NEX-Forms version 8.0 and above

Docs » Form Creation » Using the Grid System
Using the NEX-Forms Bootstrap Grid System

This article will teach you how to create versatile and responsive form layouts using the NEX-Forms Bootstrap Grid System. You'll learn how to nest grids by adding grids within grids, allowing for complex and organized designs. Additionally, you'll discover how to resize all grid columns to suit your specific layout requirements, giving you complete control over your form's structure and appearance.

In this Article

How to Add a Grid into a Form
  1. Edit or Create a New Form.
  2. Click on or drag a 1 Column, 2 Column, 3 Column or 4 Column Grid into the form.
    In the Example below we will add a 2 column Grid to the form.
    NEX-Forms - Figure Arrow
    NEX-Forms - Managing Fields - Figure - 1
  3. The 2 Column grid system will be appended to the form.
    NEX-Forms - Figure Arrow
    NEX-Forms - Managing Fields - Figure - 1
NOTE:1-4 colums grids can be altered after beign added to a form by adding or removing columns as well as resizing the columns.
Adding Fields into a Grid Layout
  1. Click on any field in the form or from the fields toolbar and hold the mouse button pressed down.
  2. Move your mouse (drag the field) over the grid column until a grid placeholder appears.
    NEX-Forms - Figure Arrow
    NEX-Forms - Managing Fields - Figure - 1
  3. Release the mouse button and the field will be dropped into the grid.
    NEX-Forms - Figure Arrow
    NEX-Forms - Managing Fields - Figure - 1
NOTE:You can move fields between grid columns, into other grids in the form or back into the form container itself by using the same drag and drop action as per above steps.
Adding new Columns to a Grid
  1. Hover over a grid column.
  2. Click on the plus sign (+)
    NEX-Forms - Figure Arrow
    NEX-Forms - Managing Fields - Figure - 1
  3. A new column will be added directly to the right hand side of the preceding column.
    NEX-Forms - Figure Arrow
    NEX-Forms - Managing Fields - Figure - 1
Removing a Column from a Grid
  1. Hover over a grid column.
  2. Click on the minus sign (-)
    NEX-Forms - Figure Arrow
    NEX-Forms - Managing Fields - Figure - 1
  3. The grid column and all elements inside it will be removed.

NOTE: Move any fields and elements you want to keep from the grid column before deleting it.
Resizing Grid Columns
  1. Hover over a grid.
  2. Move you mouse piont over the vertical column dviders untill your mouse pionter changes to a horizontal resize curser.
    NEX-Forms - Figure Arrow
    NEX-Forms - Managing Fields - Figure - 1
  3. Click and hold the mouse button and move your mouse left or right to rezise the column.
  4. Release the mouse button when done.
Editing a Grid
  1. Hover your mouse cursor over a field and options will appear over the field.
    NEX-Forms - Figure Arrow
    NEX-Forms - Managing Fields - Figure - 1
  2. Click on the Edit button.
    NEX-Forms - Figure Arrow
    NEX-Forms - Managing Fields - Figure - 1
  3. The Grid's styling and functional settings will slide in from the right hand side of the form editor.
    NEX-Forms - Figure Arrow
    NEX-Forms - Managing Fields - Figure - 1
Grid Settings
This section will explain the extra grid settings like device responsiveness and styling options.
NEX-Forms - Grid Settings - Figure - 1
Naming a Grid
The grid name will be used to identify it in, for example, Conditional Logic. If you plan to apply Conditional Logic to an entire grid, you will need to give the grid a name to select it from the Conditional Logic field selection list. The grid name will also come into play when using Repeater fields.
  1. Hover over a grid and click on the Edit button.
  2. Click on the "INPUT" tab in the settings panel.
  3. Enter a grid name
    NEX-Forms - Figure Arrow
    NEX-Forms - Managing Fields - Figure - 1
Grid Responsiveness Setup
A grid will remain inline (with columns next to each other) up to a specified device size. For example, if your grid is set to stay inline up to laptop-sized screens, the columns will break into a stacked layout (with columns on top of each other) when the screen size is smaller than a laptop.
NEX-Forms - Grid Settings - Figure - 3
Grid Responsiveness Setting Definitions:
Setting Definition
NEX-Forms - Responsive Grid - 1 Mobile - When active sets the grid to stay inline up to mobile devices
NEX-Forms - Responsive Grid - 2 Tablet - When active sets the grid to stay inline up to tablets
NEX-Forms - Responsive Grid - 3 Laptop - When active sets the grid to stay inline up to laptops
NEX-Forms - Responsive Grid - 4 Desktop + - When active sets the grid to stay inline up to desktops and larger screens
Grid Replication Settings
These settings are used to create Repeater Fields. Learn more about creating repeater (replicatable fields).
NEX-Forms - Grid Settings - Figure - 4
Grid Replication Setting Definitions:
Setting Definition
Grid Replication
NEX-Forms - Grid Replication - 1 Enables the grid and all of it inner elements to be replicated by the user on the front end.
NEX-Forms - Grid Replication - 2 No grid replication.
Replication Limit Sets the number of times that the user can replicate the grid and all of the fields & elements inside it.
Grid Animation
Like Animating Form Fields you can add animations to entire grids. Learn how to animation an entire grid instead of only animating individual elements.
  1. Edit a Grid by hovering over it and then click on the Edit Icon which will bring up the field settings panel.
  2. Click on the "ANIMATION" tab from the settings panel.
  3. Select the type of animation you want to add to the field from the animations list. The selected animation will give you a preview so you will know what the field will be doing in the form.
    NEX-Forms - Figure Arrow
    NEX-Forms - Grid Animation Settings - Figure 1
  4. Set the Animation Delay and Animation Duration or leave these blank for the default.
Grid Wrapper Styling
Similar to Field Wrapper Styling you can style an entire grid by setting its background, margins, padding, and device visibility.
  1. Edit a Grid by hovering over it and then click on the Edit Icon which will bring up the field settings panel.
  2. Click on the "ANIMATION" tab from the settings panel.
  3. Select the type of animation you want to add to the field from the animations list. The selected animation will give you a preview so you will know what the field will be doing in the form.
    NEX-Forms - Figure Arrow
    NEX-Forms - Grid Wrapper Settings - Figure 1
Grid Nesting
Grid nesting allows you to place grids within grids, providing greater flexibility and control over your layout. By nesting grids, you can create more complex and detailed structures within your form or webpage. This means that within a single column of a parent grid, you can add another grid, complete with its own rows and columns. This technique is particularly useful for creating multi-layered layouts, where you might need to group related fields or elements together while maintaining a clean and organized design. Nesting grids can help you achieve intricate designs and ensure your layout adapts seamlessly to different screen sizes.
  1. Click on any grid in the form or from the fields toolbar and hold the mouse button pressed down.
  2. Move your mouse (drag the field) over another grid column until a grid placeholder appears.
    NEX-Forms - Figure Arrow
    NEX-Forms - Managing Fields - Figure - 1
  3. Release the mouse button and the field will be dropped into the grid.
    NEX-Forms - Figure Arrow
    NEX-Forms - Managing Fields - Figure - 1
NOTE:You can move entire grids between grid columns, into other grids in the form or back into the form container itself by using the same drag and drop action as per above steps.
Deleting a Grid
  1. Hover over a grid.
  2. Click on the X to remove the entire grid and everything inside the grid.
    NEX-Forms - Figure Arrow
    NEX-Forms - Managing Fields - Figure - 1
More about the NEX-Forms Bootstrap Grid System
The NEX-Forms Bootstrap's grid system uses a 12-column layout, meaning the total width of columns in a row must add up to 12.
A grid column set to 12 is a 100% in width, thus 10 = 80% width, 8=60% width, 6=50% width, 3=25% width, etc.
So 9-3 is a 2 column grid with the first colum at 75% width and the second 25% width. 4-4-4 is a 3 colum grid with all columns at 33% width.
Nested Grids
Was this article helpful?
Yes
No
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