Field Types

Table of Contents

  1. Textbox
  2. Textarea
  3. Hidden Field
  4. Radio List
  5. Select List
  6. Multi-Select List
  7. Checkbox
  8. Number Field
  9. Submit Field

Textbox Field

*This also applies to First Name, Last Name, Address, City, Zip, Email, and Phone fields

Textbox

Label

What you want the field to be referred to as.

LabelPosition

  • Right of Element
  • Left of Element
  • Below Element
  • Above Element
  • Hidden: No label will be shown
  • Form Default: Will default to the Ninja Forms Global Setting for that field type

Required Field

If enabled, this will ensure that this field is completed before allowing the form to be submitted.

Placeholder

The text you would like displayed in the field, before a user enters any data.

-Insert Merge Tag: The field that data will be pulled from

Default Value

Text that you would like displayed in the field, that will remain as the user types.

-Insert Merge Tag: The field that data will be pulled from

Field Key

Programmatic name that can be used to reference this field.


[Jump to top]

Textarea Field

Like a textbox field, but can accommodate more user input.

Textarea

Label

What you want the field to be referred to as.

LabelPosition

  • Right of Element
  • Left of Element
  • Below Element
  • Above Element
  • Hidden: No label will be shown
  • Form Default: Will default to the Ninja Forms Global Setting for that field type

Required Field

If enabled, this will ensure that this field is completed before allowing the form to be submitted.

Placeholder

The text you would like displayed in the field, before a user enters any data.

-Insert Merge Tag: The field that data will be pulled from

Default Value

Text that you would like displayed in the field, that will remain as the user types.

-Insert Merge Tag: The field that data will be pulled from

Field Key

Programmatic name that can be used to reference this field.


[Jump to top]

Hidden Field

Will not be seen by the user on the front-end

Hidden

Label

What you want the field to be referred to as.

Default Value

Text that you would like displayed in the field, that will remain as the user types.

-Insert Merge Tag: The field that data will be pulled from

Field Key

Programmatic name that can be used to reference this field.


[Jump to top]

Radio List

List that allows for one selection by the user

Radio List

Label

What you want the field to be referred to as.

LabelPosition

  • Right of Element
  • Left of Element
  • Below Element
  • Above Element
  • Hidden: No label will be shown
  • Form Default: Will default to the Ninja Forms Global Setting for that field type

Required Field

If enabled, this will ensure that this field is completed before allowing the form to be submitted.

Options

    • Add New: adds another option to the list
    • Label: The name of the option in the list
    • Value: The data sent when this option is selected
    • Calc Value: The value used in calculations when this option is checked
    • Checkbox: The default list selection

Delete: Will delete the List Option

Custom CSS Class Names: CSS class name that will be used for the Wrapper of Element Selector

-Wrapper: The wrapper around the Label and Element

-Element: The field itself

Field Key

Programmatic name that can be used to reference this field.


[Jump to top]

Select List

List that allows for one selection by the user from a drop-down.

Select List

Label

What you want the field to be referred to as.

Label Position

  • Right of Element
  • Left of Element
  • Below Element
  • Above Element
  • Hidden: No label will be shown
  • Form Default: Will default to the Ninja Forms Global Setting for that field type

Required Field

If enabled, this will ensure that this field is completed before allowing the form to be submitted.

Options

    • Add New: adds another option to the list
    • Label: The name of the option in the list
    • Value: The data sent when this option is selected
    • Calc Value: The value used in calculations when this option is checked
    • Checkbox: The default list selection

Delete: Will delete the List Option

Custom CSS Class Names: CSS class name that will be used for the Wrapper of Element Selector

-Wrapper: The wrapper around the Label and Element

-Element: The field itself

Field Key

Programmatic name that can be used to reference this field.


[Jump to top]

Multi-Select List

List that allows for one selection by the user from a drop-down.

Multi-Select List

Label

What you want the field to be referred to as.

Label Position

  • Right of Element
  • Left of Element
  • Below Element
  • Above Element
  • Hidden: No label will be shown
  • Form Default: Will default to the Ninja Forms Global Setting for that field type

Required Field

If enabled, this will ensure that this field is completed before allowing the form to be submitted.

Options

    • Add New: adds another option to the list
    • Label: The name of the option in the list
    • Value: The data sent when this option is selected
    • Calc Value: The value used in calculations when this option is checked
    • Checkbox: The default list selection

Delete: Will delete the List Option

Custom CSS Class Names: CSS class name that will be used for the Wrapper of Element Selector

-Wrapper: The wrapper around the Label and Element

-Element: The field itself

Field Key

Programmatic name that can be used to reference this field.


[Jump to top]

Checkbox Field

Checkbox

Label

What you want the field to be referred to as.

LabelPosition

  • Right of Element
  • Left of Element
  • Below Element
  • Above Element
  • Hidden: No label will be shown
  • Form Default: Will default to the Ninja Forms Global Setting for that field type

Required Field

If enabled, this will ensure that this field is completed before allowing the form to be submitted.

Default Value: Checked or Unchecked

Custom CSS Class Names: CSS class name that will be used for the Wrapper of Element Selector

-Wrapper: The wrapper around the Label and Element

-Element: The field itself

Field Key

Programmatic name that can be used to reference this field.


[Jump to top]

Number Field

Number

Label

What you want the field to be referred to as.

LabelPosition

  • Right of Element
  • Left of Element
  • Below Element
  • Above Element
  • Hidden: No label will be shown
  • Form Default: Will default to the Ninja Forms Global Setting for that field type

Required Field

If enabled, this will ensure that this field is completed before allowing the form to be submitted.

Number Options

  • Min: The minimum value the field will allow
  • Max: The maximum value the field will allow
  • Step: The amount the value will change when an arrow is pressed.

Placeholder

The text you would like displayed in the field, before a user enters any data.

-Insert Merge Tag: The field that data will be pulled from

Default Value

Text that you would like displayed in the field, that will remain as the user types.

-Insert Merge Tag: The field that data will be pulled from

Custom CSS Class Names: CSS class name that will be used for the Wrapper of Element Selector

-Wrapper: The wrapper around the Label and Element

-Element: The field itself

Field Key

Programmatic name that can be used to reference this field.


[Jump to top]

Submit Field

Submit

Label

What you want the field to be referred to as.

Processing Label

What you want the field to be changed to when the form is processing.