- Edit an existing form or create a new form.
- Click on the "More Styling Options" button (last button on the width bar)
- Overall styling options and settings will slide in from the right hand side of the builder.
- Click on the "FIELDS" tab in the Overall Styling Panel.
NEX-Forms Documentation
Documentation & Tutorials for NEX-Forms version 8.0 and above
Overall Field Styling
This article explains how to apply styling changes to all fields simultaneously, eliminating the need to update each field individually. By using these overall field styling options, you can efficiently style all fields in a form at once, saving you time and effort.
NOTE: The styling options discussed in this article apply to all field types. For the purpose of this article we will use text fields as examples (where possible) to demonstrate how the overall styling settings affects all fields.
Where to find the form wrapper styling options
Field Layout Options
Use these settings to style all field layouts simultaniously.
| Overall Field Layout Setting Definitions: | ||
| Setting | Definition | Example |
| Field Layouts | ||
 (Labels Left) |
Positions all the labels and sub-labels to the left of the fields | |
 (Labels Right) |
Positions all the labels and sub-labels to the right of the fields | |
 (Labels Top) |
Positions all the labels and sub-labels to the top of the fields | |
 (Hide Labels) |
Hides all the labels and sub-labels | |
| Field Spacing | Sets the same vertical space between all form fields in pixels | |
| Corners | ||
 |
Squared - Sets all form field corners to squared | |
 |
Rounded - Sets all form field corners to rounded | |
 |
Pilled - Sets all form field corners to fully rounded (pilled) | |
Field Label Styling
Use these settings to style all field labels simultaniously.
| Overall Field Label Styling Setting Definitions | ||
| Setting | Definition | Example |
| Label Font | Includes a selection of over 1500 google and regular fonts and sets the font family for all field labels inside a form. | |
| Size (font size) | Sets the font size of the all label text in pixels | |
| (Align Text Left) | If active aligns all label text left relative to its position to the field. | |
| (Align Text Center) | If active aligns all label text center relative to its position to the field. | |
| (Align Text Right) | If active aligns all label text right relative to its position to the field. | |
| (bold) | If active sets all label text to bold | |
| (Italic) | If active sets all label text to italic | |
| (Underline) | If active sets all the label to underlined text | |
| Label Color | Sets the font color of all label text | |
Input Styling
Use these settings to style all field inputs simultaniously.
| Overall Field Input Styling Setting Definitions | ||
| Setting | Definition | Example |
| Input Font | Includes a selection of over 1500 google and regular fonts and sets the font family for all field inputs inside a form. | |
| Input Text Size | Sets the text size of all input text in pixels | |
| (Align Text Left) | If active aligns all input text left | |
| (Align Text Center) | If active aligns all input text center | |
| (Align Text Right) | If active aligns all input text right | |
| (bold) | If active sets all input text to bold | |
| (Italic) | If active sets all input text to italic | |
| (Underline) | If active sets all input text underlined | |
| Text (Text color) | Sets all field inputs text color | |
| Background (Background color) | Sets all field inputs background color | |
| Border (Border color) | Sets all field inputs border color | |
Icon Styling
Use these settings to style all field icons simultaniously (pre and post icons).
| Overall Icon Styling Definitions | ||
| Setting | Definition | Example |
| Icon Size | Set the icon size. By default the icon sizes are 17px, in the example to the left the pre-icon size is 24px and post icon size is 14px. | |
| TX (Icon color) | Sets the icon color | |
| BG (Icon holder background color) | Sets the icon holder background color | |
| BRD (Icon holder border color) | Sets the icon holder border color | |
Validation Error Styling
Use these settings to style all field validation error messages simultaniously.
| Overl Validation Error Styling Definitions | ||
| Setting | Definition | Example |
| Validation Error Style | ||
| Modern | Sets the validation error message to a modern tooltip hover. This is the default. | |
| _ Classic | Sets the validation error message to the classic style. | Required |
| Validation Error Position | ||
| Left | Sets the error message to the left of the input field. |
|
| Right | Sets the error message to the right of the input field. This is the default. |
|
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