Adding and Customizing the Number Input Field in Divi Form Builder

The Number Input Field in Divi Form Builder is a field that allows users to input numbers into your form. This guide will walk you through the steps to add and customize the Number Input Field for your forms.

Video

Step 1: Add Form Field

1. Navigate to the page with your form and open the Form Builder module.
2. Click on the Add New Field button to start adding a new form field.

Step 2: Select Number Input Field

1. Enter a descriptive Field Title for the field that users will see.
2. Enter an Admin Title for administrative purposes to help identify the field.
3. Assign a unique Field ID to the field for data handling.
4. Select Number Input Field from the Type dropdown menu.

Step 3: Customize Number Input Field

In addition to the styling features in the Design Tab, Divi Form Builder offers customization options for the Number Input Field HERE.

Field Options:

1. Add Form Builder Prefix to Field: Disable this option to directly input the field ID and Name. Only disable this option for specific cases, such as when using the form with Google Tag Manager.
2. Convert to Range Slider: Enable this option to convert the number input into a range slider interface.
3. Minimum Number Value: Set the minimum value that can be entered.
4. Maximum Number Value: Set the maximum value that can be entered.
5. Number Increase Step Value: Define the step value for number increments.
   note

   You can use decimal values for more precise increments, such as 0.1 or 0.25.

6. Minimum Length: Specify the minimum number of digits required.
7. Maximum Length: Specify the maximum number of digits allowed.
8. Required: Make the field mandatory for users to fill out.

Convert to Range Slider

The Number Input Field can also be displayed as a range slider, allowing users to select a numeric value by sliding a handle.

To enable this:

1. Locate the Display as Range Slider toggle in the Number Input Field settings.
2. Enable the toggle to convert the field into a slider.
3. Adjust the following settings to control the slider behavior:
   • Minimum Number Value: Sets the start of the slider.
   • Maximum Number Value: Sets the end of the slider.
   • Number Increase Step Value: Sets the jump interval between values.
   • Show Value on Slider: Optionally display the numeric value above the slider.

Design Settings

Additional design controls for the Number Input Field (including when used as a range slider) are available under the Design Tab.

You can style:

• Font, color, spacing, and alignment of the input or slider
• The appearance of the slider handle and track (when using range slider)
• Responsive spacing and alignment for better mobile display

Additional Tips

By following these steps, you can effectively add and customize the Number Input Field in Divi Form Builder, whether you're using it as a standard input or a range slider. Utilize the Design Tab for further styling and remember to set decimal step values when needed for precision.