Textbox

Next.js

Overview

Use this widget to give the user the opportunity to enter free text no longer than a line, such as street address, e-mail, etc.

After you have added the Textbox form widget in your form and opened its settings, the Textbox window appears, displaying the following sections:

Labels and content

In this section, perform the following:

1. In the Label input field, enter the label of the textbox.
   For example, Address or Email
2. If needed, in Instructional text, enter instructions or explanatory text for the textbox.
   The text is displayed bellow the textbox.
3. In Field type, select what kind of input you expect to be entered in this field.
   You can select between Text, Email, Phone, or URL.
   You can configure field validation in the Advanced widget settings.
4. Optionally, in Placeholder text, you can enter some text to facilitate the user in filling out the field.
   For example, if the field is an email field, you can enter someone@server.com. This text is only a guidance for the user and is not submitted with the form response, if the user does not change it.
5. Optionally, in Predefined value, you can enter a predefined value for the textbox that is displayed in the box by default and the user can change it.
   If the user does not change the predefined value, it is submitted with the form response.
6. If you want to make the textbox mandatory, select the Required field checkbox
   A textbox appears, where you enter the error message that is displayed, if the user does not fill out the textbox.
7. If you want this field to be visible in the form only when certain conditions are met, select Hide field initially checkbox.
   You can then use form ruled to display the field. For more information, see Form rules.

Limitations

In this section, perform the following:

1. In Range input fields, enter the minimum and maximum number of characters that a user can enter in the textbox.
   If you do not want to impose limits to the textbox, leave the Max input field empty and the Min input field empty.
2. Enter an error message that is displayed, if the user enters less than or more than the defined limits.

Display settings

In this section, perform the following:

1. In Template dropdown, you can select a template other than the default one that will be used to display the Textbox on the website.
   You must first have created a custom template.
   For more information, see Next.js pages and templates.
2. In Field size, you can choose the size of the input field.
   Choose from the predefined values of none, small, medium, or large.
3. Save your changes.

Advanced widget settings

To open the advanced settings, in the upper-right corner of the Textbox widget page, click  (Advanced settings).

Apply custom CSS

In CSS class input field, you can choose a class name for the textbox, if later you want to set a CSS style for this particular textbox.

Validate the input

You can add validation of the user input in textboxes. For example, you can make required that the user enters an email address in a certain textbox.

To do this, in Regular expression validation pattern, enter one of the following:

Display validation error message

In Regular expression error message, you can enter a custom error message.
For example, if you are validating that the user entered an email address, you can also enter a custom error message – Not a valid email format!

Developer name

You can change the automatically generated name for developers of this textbox field by and entering the new name in the input field that appears.

This is the name of the field that is used by developers to refer to this textbox field in the code.

Save your changes.