- Edit a field by hovering over it and then click on the Edit Icon which will bring up the field settings panel.
-
Click on the "LABEL" tab from the settings panel.
NEX-Forms Documentation
Documentation & Tutorials for NEX-Forms version 8.0 and above
Field Labels Settings & Styling
This article will walk you through configuring label settings for all form fields.
Where to find a field's label settings
Field label settings are the same for all form fields.
Main label settings
Below is an example of how a field is presented in a form on the front-end (in your WordPress page or post). The main label of this NEX-Forms field example is set as Email.
In this article section you will learn how to change a field label's text and how to style it.
In this article section you will learn how to change a field label's text and how to style it.
How to change a field's label text
- Edit a field by hovering over it and then click on the Edit Icon which will bring up the field settings panel.
- Click on the "LABEL" tab from the settings panel.
- Enter the field's label in the text field under the "Label Text" Setting.
NOTE: DO NOT leave the Main label blank as it also defines your input name which is used in all other functions like submitted form data. To hide the label set the label to be hidden from the labels layout settings below.
Main label setting definitions
The below table shows all Main Label settings and what their functions are.
| Main Label settings list: | |
|
|
| Setting | Function |
| Label Text | Sets the field label text. Do not leave the blank as this also sets the field's input name. |
| Font Color | Sets the font color of the label text |
| Font size | Sets the font size of the label text in pixels |
| Margin Bottom | Sets the bottom margin from the label |
| (bold) | If active sets the label text to bold |
| (Italic) | If active sets the label text to italic |
| (Underline) | If active sets the label to underlined text |
| (Align Text Left) | If active aligns the label text left relative to its position to the field. |
| (Align Text Center) | If active aligns the label text center relative to its position to the field. |
| (Align Text Right) | If active aligns the label text right relative to its position to the field. |
Sub-label settings
Below is an example of how a field is presented in a form on the front-end (in your WordPress page or post). The sub-label label of this NEX-Forms field example is set as What is your Email Address?.
In this article section you will learn how to change a field sub-label's text and how to style it.
In this article section you will learn how to change a field sub-label's text and how to style it.
How to change a field's sub-label text
- Edit a field by hovering over it and then click on the Edit Icon which will bring up the field settings panel.
- Click on the "LABEL" tab from the settings panel.
- Enter the field's sub-label in the text field under the "Sub-label Text" Setting.
NOTE: Leave this text field blank to remove the sub-label.
Sub-label setting definitions
The below table shows all sub-label settings and what their functions are.
| Field Sub-label settings list: | |
|
|
| Setting | Function |
| Sub-label Text | Sets the field sub-label text. Leave blank to hide the sub-label. |
| Font Color | Sets the font color of the sub-label text |
| Font size | Sets the font size of the sub-label text |
| Margin Bottom | Sets the bottom margin from the sub-label |
| (bold) | If active sets the sub-label text to bold |
| (Italic) | If active sets the sub-label text to italic |
| (Underline) | If active sets the sub-label to underlined text |
| (Align Text Left) | If active aligns the sub-label text left relative to its position to the field. |
| (Align Text Center) | If active aligns the sub-label text center relative to its position to the field. |
| (Align Text Right) | If active aligns the sub-label text right relative to its position to the field. |
Label layout settings
In this article section you will learn how to change a label's layout in relation to the field input.
- Edit a field by hovering over it and then click on the Edit Icon which will bring up the field settings panel.
- Click on the "LABEL" tab from the settings panel.
- Set the label position Top, Left, Right or Hidden from the field input.
Label position settings list and examples: 
Setting Function Result (Label Top) Positions the label and sub-label to the top of the field (Label Left) Positions the label and sub-label to the left of the field (Label Right) Positions the label and sub-label to the right of the field (Hide Label) Hides the label and sub-label
Field label / input width distribution settings
The width distibution works only when you have a label positioned inline left or right to the field.
- Edit a field by hovering over it and then click on the Edit Icon which will bring up the field settings panel.
- Click on the "LABEL" tab from the settings panel.
- Use the slider to distribute the width. Left hand side represent the label width and the right hand side represents the input width.
Field label/input width distribution setup examples: 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 3-9 will give the label 25% width and the input field 75% width. 6-6 will give both the label and the input field 50% width.
See some examples below with a field label position set to the left of the input as per above examples:
Width Distribution Result Label 1 - 11 Input Label 2 - 10 Input Label 3 - 9 Input Label 4 - 8 Input Label 5 - 7 Input Label 6 - 6 Input
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