How to Use the Number Field in Nelio Forms

The number field in a form is the designated field for users to enter a number in your form, whether it is their age, a year or any other number you want them to fill in. In a numeric field, the user can directly type the number or use an ascending and descending selector to select or change the number.

In this entry, we’ll show you all the options available for the number field with Nelio Forms.

Adding a Number Field to Your Form

When creating a new form or editing an existing one, adding an additional number field is as easy as adding a new Number field block in the block editor. You can use the Block Inserter + icon, or a shortcut slash command or use the More options on any of the block’s toolbar to insert a block.

Adding a number field to a form
Adding a number field to a form.

You should add a descriptive label (the number field by default has an empty label) if you want it to be accessible. You have the option to have this label displayed or not in the form.

Editing a number field
Naming the descriptive label of a number field.

You can set a default value to display and you can also type a placeholder in the field, which is especially recommended if don’t display the label of the number field in the form.

Preview of a number field with a label
Preview of a number field with a label and a default value.
Preview of a number field with a placeholder
Preview of a number field with a placeholder.

Number Field Settings

In the sidebar, you can set the the following number field properties:

  • Set the minimum and maximum values that a user can enter or select. The default values are from 0 to 100, but you can replace these with whatever whole numbers you’d like
  • Set the step size for the ascending and descending selector. By default, the value is 1. For example, if you had this setting set to 2, each increase would add 2 to the displayed value (0, 2, 4, 6, etc.)
  • Set whether the field must be filled in the form to be submitted,
  • Set whether the field label should be shown or hidden.
Number field settings
Number field settings.

Moreover, as any other block, you can add additional CSS classes to change the styling of the block.