Field Types

Table of Contents

Common Fields

Layout Fields

Miscellaneous Fields

***User Information fields, we have not forgotten you. Each of these are Common Fields that we have renamed and specifically purposed for frequently needed information so that you don’t have to.


Single Line Text

Single Line Text fields perfectly accommodate short answer user responses. User Information Fields pre-generated using the Single Line Text field include First Name, Last Name, Address, City, Zip, Email, and Phone fields.

General Settings

Label

The name of the field as displayed to your users.

Required Field

If enabled, this field must be completed before the form can be submitted.

Display Settings

Default Value

The field will load pre-populated with any text entered as the Default Value. This setting supports the use of merge tags to display unique or custom values.

Placeholder

Any text entered here will appear in the field when the form loads, but disappear as a user clicks into the field to type.

Description

Any text entered here will appear between the label and the field.

Show Advanced Features

To see these features, you will need to enable Developer Mode in Ninja Forms’ settings.

Restrictions Settings

Limit Input to This Number

Limits the number of characters or words that a user can enter into the field. Text entered into the “Text to Appear After Counter” will display alongside the character/word counter.

Disable Input

Prevents users from typing into the field.

Disable Browser Autocomplete

Prevents the browser from recommending input into the field as the user types into it.

Input Mask

Use to restrict the type of data the field will accept (alpha characters only, numeric characters, only, or alphanumeric characters only) and the format it will be accepted in.

  • US Phone: numeric only, (___)___-____
  • Date: numeric only, __/__/____
  • Currency: numeric only, $__.__
  • Custom: Define your own input restrictions with a custom mask. Symbols (i.e. a slash / comma , hyphen – etc) are supported, and when typed here will display in place for the user. Predefined placeholders represent one of three character types: a = alpha character only, 9 = numeric character only, * = alphanumeric character. Characters can only be input by the user in a space where these placeholders exist.
    • Backend Example: 999-999-999
    • Frontend Result: ___-___-___ , where only numeric characters can be input

Display Settings

Custom Class Names

  • Container: Text entered here applies a custom HTML class to this field’s wrapper
  • Element: Text entered here applies a custom HTML class to this field’s element

Help Text

Entering text here will display an informational icon next to the field label. When a user hovers over it, a small window will appear containing this text.

Advanced Settings

Label Position

Changes the orientation of the field label relative to the field element (above, below, left, right, hidden)

Custom Name Attribute

Text entered here applies a custom HTML input “name” attribute.

This field is personally identifiable data

Toggling this on flags the field as personally identifiable data. When a Delete Data Request or Export Data Request action is processed, fields marked as personally identifiable data will be deleted, anonymized, or flagged for export for the user submitting the request.

Administration Settings

Field Key

A unique programmatic key that can be used to identify and target your field for custom development. One is generated for each field automatically, and this is what you see pre-populated in the setting. It can be changed, though doing so will not update it in anything you’ve already written.

Admin Label

Text entered here will replace the Label of the field as it appears when viewing and exporting submissions only.


[Jump to top]

Paragraph Text

The Paragraph field perfectly accommodates longer user responses that won’t fit in a Single Line Text field, and offers a rich text editor for the user if desired for formatting.

General Settings

Label

The name of the field as displayed to your users.

Required Field

If enabled, this field must be completed before the form can be submitted.

Display Settings

Default Value

The field will load pre-populated with any text entered as the Default Value. This setting supports the use of merge tags to display unique or custom values.

Placeholder

Any text entered here will appear in the field when the form loads, but disappear as a user clicks into the field to type.

Description

Any text entered here will appear between the label and the field.

Show Rich Text Editor

If enabled, a rich text editor will be provided for the user to format their responses in this field. Off by default.

Show Advanced Features

To see these features, you will need to enable Developer Mode in Ninja Forms’ settings.

Restrictions Settings

Limit Input to This Number

Limits the number of characters or words that a user can enter into the field. Text entered into the “Text to Appear After Counter” will display alongside the character/word counter.

Disable Input

Prevents users from typing into the field.

Disable Browser Autocomplete

Prevents the browser from recommending input into the field as the user types into it.

Display Settings

Custom Class Names

  • Container: Text entered here applies a custom HTML class to this field’s wrapper
  • Element: Text entered here applies a custom HTML class to this field’s element

Help Text

Entering text here will display an informational icon next to the field label. When a user hovers over it, a small window will appear containing this text.

Advanced Settings

Label Position

Changes the orientation of the field label relative to the field element (above, below, left, right, hidden)

Administration Settings

Field Key

A unique programmatic key that can be used to identify and target your field for custom development. One is generated for each field automatically, and this is what you see pre-populated in the setting. It can be changed, though doing so will not update it in anything you’ve already written.

Admin Label

Text entered here will replace the Label of the field as it appears when viewing and exporting submissions only.


[Jump to top]

Radio List

The Radio List field presents options from which a user can make a single selection only.

General Settings

Label

The name of the field as displayed to your users.

Required Field

If enabled, this field must be completed before the form can be submitted.

Options

  • Add New: adds another option to the list
  • Label: The name of the list option displayed to the user
  • “Check” column: Whichever list option checked here will display as the default option to the user

Display Settings

Description

Any text entered here will appear between the label and the field.

Show Advanced Features

To see these features, you will need to enable Developer Mode in Ninja Forms’ settings.

General Settings

Options

  • Value: Use this to change what will be presented in the submission data if this list option is selected by the user. It defaults to match the Label of the list option. Only certain characters are supported for use here: a-z , 0-9 , hyphen – , underscore _ , at @ , and Space.
  • Calc Value: When including this field in a calculation, the value entered here will be entered as a part of that calculation if the given list option is selected.

Display Settings

Custom Class Names

  • Container: Text entered here applies a custom HTML class to this field’s wrapper
  • Element: Text entered here applies a custom HTML class to this field’s element

Help Text

Entering text here will display an informational icon next to the field label. When a user hovers over it, a small window will appear containing this text.

Advanced Settings

Label Position

Changes the orientation of the field label relative to the field element (above, below, left, right, hidden)

Administration Settings

Field Key

A unique programmatic key that can be used to identify and target your field for custom development. One is generated for each field automatically, and this is what you see pre-populated in the setting. It can be changed, though doing so will not update it in anything you’ve already written.

Admin Label

Text entered here will replace the Label of the field as it appears when viewing and exporting submissions only.


[Jump to top]

Select

The Select field is a list field that allows for one selection by the user from a drop-down. User Information Fields pre-generated using the Select field include Country and US States.

General Settings

Label

The name of the field as displayed to your users.

Required Field

If enabled, this field must be completed before the form can be submitted.

Options

  • Add New: adds another option to the list
  • Label: The name of the list option displayed to the user
  • “Check” column: Whichever list option checked here will display as the default option to the user

Display Settings

Description

Any text entered here will appear between the label and the field.

Show Advanced Features

To see these features, you will need to enable Developer Mode in Ninja Forms’ settings.

General Settings

Options

  • Value: Use this to change what will be presented in the submission data if this list option is selected by the user. It defaults to match the Label of the list option. Only certain characters are supported for use here: a-z , 0-9 , hyphen – , underscore _ , at @ , and Space.
  • Calc Value: When including this field in a calculation, the value entered here will be entered as a part of that calculation if the given list option is selected.

Display Settings

Custom Class Names

  • Container: Text entered here applies a custom HTML class to this field’s wrapper
  • Element: Text entered here applies a custom HTML class to this field’s element

Help Text

Entering text here will display an informational icon next to the field label. When a user hovers over it, a small window will appear containing this text.

Advanced Settings

Label Position

Changes the orientation of the field label relative to the field element (above, below, left, right, hidden)

Administration Settings

Field Key

A unique programmatic key that can be used to identify and target your field for custom development. One is generated for each field automatically, and this is what you see pre-populated in the setting. It can be changed, though doing so will not update it in anything you’ve already written.

Admin Label

Text entered here will replace the Label of the field as it appears when viewing and exporting submissions only.


[Jump to top]

Multi-Select

The Multi-Select field is a list field that allows for 2 or more selections by the user from a drop-down.

General Settings

Label

The name of the field as displayed to your users.

Required Field

If enabled, this field must be completed before the form can be submitted.

Options

  • Add New: adds another option to the list
  • Label: The name of the list option displayed to the user
  • “Check” column: Whichever list option checked here will display as the default option to the user

Display Settings

Description

Any text entered here will appear between the label and the field.

Advanced Settings

Multi-Select Box Size

Adjusts the number of list option selections that are viewable by the user at one time / without scrolling through the list.

Show Advanced Features

To see these features, you will need to enable Developer Mode in Ninja Forms’ settings.

General Settings

Options

  • Value: Use this to change what will be presented in the submission data if this list option is selected by the user. It defaults to match the Label of the list option. Only certain characters are supported for use here: a-z , 0-9 , hyphen – , underscore _ , at @ , and Space.
  • Calc Value: When including this field in a calculation, the value entered here will be entered as a part of that calculation if the given list option is selected.

Display Settings

Custom Class Names

  • Container: Text entered here applies a custom HTML class to this field’s wrapper
  • Element: Text entered here applies a custom HTML class to this field’s element

Help Text

Entering text here will display an informational icon next to the field label. When a user hovers over it, a small window will appear containing this text.

Advanced Settings

Label Position

Changes the orientation of the field label relative to the field element (above, below, left, right, hidden)

Administration Settings

Field Key

A unique programmatic key that can be used to identify and target your field for custom development. One is generated for each field automatically, and this is what you see pre-populated in the setting. It can be changed, though doing so will not update it in anything you’ve already written.

Admin Label

Text entered here will replace the Label of the field as it appears when viewing and exporting submissions only.


[Jump to top]

Single Checkbox

The Single Checkbox field places a single checkbox on your form.

General Settings

Label

The name of the field as displayed to your users.

Required Field

If enabled, this field must be completed before the form can be submitted.

Default Value

Choose here whether the checkbox will be checked or unchecked by default when the user first views the form.

Display Settings

Description

Any text entered here will appear between the label and the field.

Show Advanced Features

To see these features, you will need to enable Developer Mode in Ninja Forms’ settings.

General Settings

Checkbox Values

  • Checked Value: Text entered here will display in submissions for this form if the user checks the box. Defaults to “Checked”
  • Unchecked Value: Text entered here will display in submissions for this form if the user does not check the box. Defaults to “Unchecked”

Restrictions Settings

Disable Input

Prevents users from typing into the field.

Display Settings

Custom Class Names

  • Container: Text entered here applies a custom HTML class to this field’s wrapper
  • Element: Text entered here applies a custom HTML class to this field’s element

Help Text

Entering text here will display an informational icon next to the field label. When a user hovers over it, a small window will appear containing this text.

Advanced Settings

Label Position

Changes the orientation of the field label relative to the field element (above, below, left, right, hidden)

Checked Calculation Value

Numeric value entered here will be used by any calculation including this field if the box is checked by the user.

Unchecked Calculation Value

Numeric value entered here will be used by any calculation including this field if the box is left unchecked by the user.

Administration Settings

Field Key

A unique programmatic key that can be used to identify and target your field for custom development. One is generated for each field automatically, and this is what you see pre-populated in the setting. It can be changed, though doing so will not update it in anything you’ve already written.

Admin Label

Text entered here will replace the Label of the field as it appears when viewing and exporting submissions only.


[Jump to top]

Checkbox List

The Checkbox List field allows for single or multiple checked selections.

General Settings

Label

The name of the field as displayed to your users.

Required Field

If enabled, this field must be completed before the form can be submitted.

Options

  • Add New: adds another option to the list
  • Label: The name of the list option displayed to the user
  • “Check” column: Whichever list option checked here will display as the default option to the user

Display Settings

Description

Any text entered here will appear between the label and the field.

Show Advanced Features

To see these features, you will need to enable Developer Mode in Ninja Forms’ settings.

General Settings

Options

  • Value: Use this to change what will be presented in the submission data if this list option is selected by the user. It defaults to match the Label of the list option. Only certain characters are supported for use here: a-z , 0-9 , hyphen – , underscore _ , at @ , and Space.
  • Calc Value: When including this field in a calculation, the value entered here will be entered as a part of that calculation if the given list option is selected.

Display Settings

Custom Class Names

  • Container: Text entered here applies a custom HTML class to this field’s wrapper
  • Element: Text entered here applies a custom HTML class to this field’s element

Help Text

Entering text here will display an informational icon next to the field label. When a user hovers over it, a small window will appear containing this text.

Advanced Settings

Label Position

Changes the orientation of the field label relative to the field element (above, below, left, right, hidden)

Administration Settings

Field Key

A unique programmatic key that can be used to identify and target your field for custom development. One is generated for each field automatically, and this is what you see pre-populated in the setting. It can be changed, though doing so will not update it in anything you’ve already written.

Admin Label

Text entered here will replace the Label of the field as it appears when viewing and exporting submissions only.


[Jump to top]

Date

The Date field introduces the Pikaday date selector as a field from which the user can select a date from a calendar view.

This is what the user will see when clicking on the field:

Users can click on a date to select it, and it will then be displayed in the field. The arrows in the top left and right can be used to navigate into the past or future one month at a time. The displayed month at the top can be clicked on to select a specific month from a dropdown menu. The displayed year at the top can be clicked on to select a specific year from a dropdown menu.

General Settings

Label

The name of the field as displayed to your users.

Required Field

If enabled, this field must be completed before the form can be submitted.

Default to Current Date

If enabled, the field will load pre-populated with the current date.

Format

Changes the format of the date as displayed in the field after the user makes their selection. Default to mm/dd/yyyy unless modified here.

Display Settings

Placeholder

Any text entered here will appear in the field when the form loads, but disappear as a user clicks into the field to type.

Description

Any text entered here will appear between the label and the field.

Show Advanced Features

To see these features, you will need to enable Developer Mode in Ninja Forms’ settings.

Display Settings

Custom Class Names

  • Container: Text entered here applies a custom HTML class to this field’s wrapper
  • Element: Text entered here applies a custom HTML class to this field’s element

Help Text

Entering text here will display an informational icon next to the field label. When a user hovers over it, a small window will appear containing this text.

Advanced Settings

Label Position

Changes the orientation of the field label relative to the field element (above, below, left, right, hidden)

Year Range

  • Start Year: Entering a year here will restrict the user from selecting any year earlier than that year.
  • End Year: Entering a year here will restrict the user from selecting any year later than that year.

Administration Settings

Field Key

A unique programmatic key that can be used to identify and target your field for custom development. One is generated for each field automatically, and this is what you see pre-populated in the setting. It can be changed, though doing so will not update it in anything you’ve already written.

Admin Label

Text entered here will replace the Label of the field as it appears when viewing and exporting submissions only.


[Jump to top]

Submit

Every form needs a Submit field. If you forget to add one, you’ll be prompted to do so when you Publish/save the form.

General Settings

Label

The name of the field as displayed to your users.

Processing Label

When the Submit button is pressed by a user, it will display “Processing” until the submission is complete. If you wish to change that language, you can do so here.

Show Advanced Features

To see these features, you will need to enable Developer Mode in Ninja Forms’ settings.

Display Settings

Custom Class Names

  • Container: Text entered here applies a custom HTML class to this field’s wrapper
  • Element: Text entered here applies a custom HTML class to this field’s element

Administration Settings

Field Key

A unique programmatic key that can be used to identify and target your field for custom development. One is generated for each field automatically, and this is what you see pre-populated in the setting. It can be changed, though doing so will not update it in anything you’ve already written.


[Jump to top]

HTML

The HTML field will allow for the display of formatted text, links, and media anywhere on your form. Just place the field anywhere on the form, and whatever you have input into this field will display at that location. Contents of an HTML field will not display in submission data.

General Settings

Label

The name of the field as displayed to your users.

Default Value

Whatever is input here will display on the form wherever the HTML field is placed. Take advantage of the rich text editor to format text, create headers, display images, video, links and more.

Show Advanced Features

To see these features, you will need to enable Developer Mode in Ninja Forms’ settings.

Display Settings

Custom Class Names

  • Container: Text entered here applies a custom HTML class to this field’s wrapper
  • Element: Text entered here applies a custom HTML class to this field’s element

[Jump to top]

Divider

The Divider field simply adds a horizontal line across the form wherever this field is placed. Use to divide a single page into clean sections.

Show Advanced Features

To see these features, you will need to enable Developer Mode in Ninja Forms’ settings.

Custom Class Names

  • Container: Text entered here applies a custom HTML class to this field’s wrapper
  • Element: Text entered here applies a custom HTML class to this field’s element

[Jump to top]

Confirm

The Confirm field can be combined with any other field on your form to provide a way to validate the input into that field. Unless the Confirm field matches the chosen target field, the form will not submit. This can be used to confirm the entry of an email address, password, and other fields.

General Settings

Label

The name of the field as displayed to your users.

Required Field

If enabled, this field must be completed before the form can be submitted.This must be enabled for the validation feature to work.

Confirm

Select the field on the form you want the Confirm field to match/validate.

Display Settings

Default Value

The field will load pre-populated with any text entered as the Default Value. This setting supports the use of merge tags to display unique or custom values.

Placeholder

Any text entered here will appear in the field when the form loads, but disappear as a user clicks into the field to type.

Description

Any text entered here will appear between the label and the field.

Show Advanced Features

To see these features, you will need to enable Developer Mode in Ninja Forms’ settings.

Restrictions Settings

Limit Input to This Number

Limits the number of characters or words that a user can enter into the field. Text entered into the “Text to Appear After Counter” will display alongside the character/word counter.

Disable Input

Prevents users from typing into the field.

Display Settings

Custom Class Names

  • Container: Text entered here applies a custom HTML class to this field’s wrapper
  • Element: Text entered here applies a custom HTML class to this field’s element

Help Text

Entering text here will display an informational icon next to the field label. When a user hovers over it, a small window will appear containing this text.

Advanced Settings

Label Position

Changes the orientation of the field label relative to the field element (above, below, left, right, hidden)

Administration Settings

Field Key

A unique programmatic key that can be used to identify and target your field for custom development. One is generated for each field automatically, and this is what you see pre-populated in the setting. It can be changed, though doing so will not update it in anything you’ve already written.

Admin Label

Text entered here will replace the Label of the field as it appears when viewing and exporting submissions only.


[Jump to top]

Hidden

The Hidden field does not display for users viewing the form. It can only be viewed from the form builder by a logged in administrator. Use this to store information that you want passed into submission data or sent along in an email, but not displayed to the user.

General Settings

Label

The name of the field as will be displayed in the Ninja Forms builder (not visible to users).

Default Value

The field will load pre-populated with any text entered as the Default Value. This setting supports the use of merge tags to display unique or custom values.

Show Advanced Features

Administration Settings

Field Key

A unique programmatic key that can be used to identify and target your field for custom development. One is generated for each field automatically, and this is what you see pre-populated in the setting. It can be changed, though doing so will not update it in anything you’ve already written.

Admin Label

Text entered here will replace the Label of the field as it appears when viewing and exporting submissions only.


[Jump to top]

Number Field

The number field supports only numeric characters, and comes with an up/down arrow for users to scroll through number values in designated steps.

General Settings

Label

The name of the field as displayed to your users.

Required Field

If enabled, this field must be completed before the form can be submitted. This must be enabled for the validation feature to work.

Number Options

  • Min: The minimum value that a user can enter into this field
  • Max: The maximum value that a user can enter into this field
  • Step: Restricts the values that can be entered into the field by the increment entered here. Example: Step = 1 will allow for 1, 2, 3, 4, 5, etc but not 1.5 or 4.3. Step = 10 will allow for 10, 20, 30, 40, 50, etc but not 15 or 43. Enter .01 here to allow for numbers like 9.99, 15.49, etc.

Display Settings

Default Value

The field will load pre-populated with any text entered as the Default Value. This setting supports the use of merge tags to display unique or custom values.

Placeholder

Any text entered here will appear in the field when the form loads, but disappear as a user clicks into the field to type.

Description

Any text entered here will appear between the label and the field.

Show Advanced Features

To see these features, you will need to enable Developer Mode in Ninja Forms’ settings.

Display Settings

Custom Class Names

  • Container: Text entered here applies a custom HTML class to this field’s wrapper
  • Element: Text entered here applies a custom HTML class to this field’s element

Help Text

Entering text here will display an informational icon next to the field label. When a user hovers over it, a small window will appear containing this text.

Advanced Settings

Label Position

Changes the orientation of the field label relative to the field element (above, below, left, right, hidden)

Administration Settings

Field Key

A unique programmatic key that can be used to identify and target your field for custom development. One is generated for each field automatically, and this is what you see pre-populated in the setting. It can be changed, though doing so will not update it in anything you’ve already written.

Admin Label

Text entered here will replace the Label of the field as it appears when viewing and exporting submissions only.


[Jump to top]

Recaptcha

The Recaptcha field links your form with Google’s reCAPTCHA technology, forcing a user to complete the reCAPTCHA challenge before the form can be successfully submitted.

For this field to work, you must link Ninja Forms to your Google account (see reCAPTCHA section). Failing to do this will result in a non-functional field.

General Settings

Label

The name of the field as displayed to your users if you choose for the reCAPTCHA to be visible.

Visibility

Select whether to display an “I’m not a robot” field or to detect if the user is a robot in the background.

Show Advanced Features

To see these features, you will need to enable Developer Mode in Ninja Forms’ settings.

Display Settings

Custom Class Names

  • Container: Text entered here applies a custom HTML class to this field’s wrapper
  • Element: Text entered here applies a custom HTML class to this field’s element

[Jump to top]

Anti-Spam

Challenge your users with a question that must be answered correctly in order for the form to be submitted.

General Settings

Question

The question you want your users to answer in order to allow the form to be submitted.

Answer

The answer expected for the question setting. The users’ answer must match exactly. These are case sensitive.

Display Settings

Default Value

The field will load pre-populated with any text entered as the Default Value. This setting supports the use of merge tags to display unique or custom values.

Placeholder

Any text entered here will appear in the field when the form loads, but disappear as a user clicks into the field to type.

Description

Any text entered here will appear between the label and the field.

Show Advanced Features

To see these features, you will need to enable Developer Mode in Ninja Forms’ settings.

Restrictions Settings

Limit Input to This Number

Limits the number of characters or words that a user can enter into the field. Text entered into the “Text to Appear After Counter” will display alongside the character/word counter.

Disable Input

Prevents users from typing into the field.

Display Settings

Custom Class Names

  • Container: Text entered here applies a custom HTML class to this field’s wrapper
  • Element: Text entered here applies a custom HTML class to this field’s element

Help Text

Entering text here will display an informational icon next to the field label. When a user hovers over it, a small window will appear containing this text.

Advanced Settings

Question Position

Changes the orientation of the Question relative to the field element (above, below, left, right, hidden).

Administration Settings

Field Key

A unique programmatic key that can be used to identify and target your field for custom development. One is generated for each field automatically, and this is what you see pre-populated in the setting. It can be changed, though doing so will not update it in anything you’ve already written.

Admin Label

Text entered here will replace the Label of the field as it appears when viewing and exporting submissions only.


[Jump to top]

Star Rating

The Star Rating field offers a “line-of-stars” graphic to the user, from which they can select a rating from a range of your choice.

General Settings

Label

The name of the field as displayed to your users.

Number of Stars

The number of stars that will appear in your “line-of-stars” graphic.

Required Field

If enabled, this field must be completed before the form can be submitted.

Show Advanced Features

To see these features, you will need to enable Developer Mode in Ninja Forms’ settings.

Display Settings

Default Value

Entering a numeric value here that is within the range of stars on the field (1-5, 1-10, etc) will result in that number of stars being marked by default when the form loads.

Custom Class Names

  • Container: Text entered here applies a custom HTML class to this field’s wrapper
  • Element: Text entered here applies a custom HTML class to this field’s element

Advanced Settings

Label Position

Changes the orientation of the field label relative to the field element (above, below, left, right, hidden)

Administration Settings

Field Key

A unique programmatic key that can be used to identify and target your field for custom development. One is generated for each field automatically, and this is what you see pre-populated in the setting. It can be changed, though doing so will not update it in anything you’ve already written.

Admin Label

Text entered here will replace the Label of the field as it appears when viewing and exporting submissions only.


[Jump to top]