How to check what visitors type in a form field

In TeleportHQ, each form has Field rules that decide what every field accepts. Open the form's Manage Form window, go to Settings → Field rules, pick a field, and set Required, a Format (for example Email address, Phone number or Text length), a Pattern for a format of your own, and the Message when the value is refused. Click Save and publish. The visitor's browser then checks each field and doesn't send the form until every field fits.

Before you start#

• Add a form with fields. See How to create a form.
• Field rules don't change your plan or your project type. A form with rules stays a plain TeleportHQ form on your website.

Open the field rules#

1. In the TeleportHQ editor's left sidebar, click Growth (the last button, under Live).
2. Under Forms, click Form submissions. Ctrl+5 (Cmd+5 on a Mac) opens it in one go.
3. Under Your forms, click the form, for example Homepage Form.
4. Beside the list, next to the form's name, click Settings. The Manage Form window opens on its Settings tab.
5. Scroll down to Field rules ("What each field accepts. The browser checks these before the form is sent.").

You can also select the form on the canvas and click Manage in the right panel.

Set a field's rules#

1. Field: pick the field to set up, for example the phone field. The list shows each field by its name. A radio button group shows once, because the group is checked as a whole.
2. Required: switch it on to stop the form from sending while the field is empty ("The form is not sent while this field is empty."). For a radio button group, one button must be chosen.
3. Format: choose what the field must look like. The line under Format describes the choice. For a single-line field you can pick:
   • Any value: no format is checked.
   • Email address: must look like name@example.com.
   • Phone number: digits, spaces, +, - and brackets; 7 to 20 of them.
   • Web address: must start with http:// or https://.
   • Number: only numbers. Under Allowed values, type a Minimum and a Maximum, for example 1 and 12 for a number of guests. Leave a side empty to leave it open.
   • Text length: under Number of characters, type a Minimum and a Maximum, for example 20 and 500 for a message.
   • Postal code: letters, digits, spaces and dashes; 3 to 10 of them.
   • Custom pattern: type a regular expression (a text pattern written in a short code) in Pattern. The whole value must match it. For example, [A-Z]{2}[0-9]{6} accepts a booking code such as HC123456.
4. Message when the value is refused: type what visitors see when the value doesn't fit, for example Please type a phone number, such as +1 555 123 4567. Leave it empty to show the browser's own message.

Repeat for the other fields. A field you changed shows "(unsaved)" after its name in the Field list.

Save and publish#

1. At the bottom of the Manage Form window, click Save. TeleportHQ writes every changed field in one step, and the window closes.
2. Publish your site so the rules reach your live form. See How to publish your site.

Which rules each kind of field can take#

In TeleportHQ, the Field rules of a field depend on its kind:

To make a dropdown required, give its first option an empty value, such as a "Choose a size" option. The dropdown counts as empty while that option is chosen.

Check that it worked#

1. Open your published site.
2. Type a value that breaks a rule, for example 12 into a field with the Phone number format, and send the form.
3. The form isn't sent. The browser points at the field and shows your message, or its own when you left the message empty.

Your own message shows on the published site. While you design, the editor shows the browser's message instead.

Troubleshooting#

Save stays greyed out A rule can't be saved yet. Look under the field for the reason:

• "The minimum is larger than the maximum." Swap or correct the two numbers.
• "A length cannot be negative." Use 0 or more.
• "Write the pattern the value must match." Custom pattern needs a Pattern.
• "Browsers would ignore this pattern. Inside [ ], escape ( ) [ ] { } / | and - with a backslash." Fix the pattern, for example write [0-9\-] instead of [0-9-].

"This form has no fields to validate yet." The form has no fields besides its button. Add fields first. See How to create a form.

A note says an attribute "is bound to data on this field" That attribute, for example required, gets its value from your data. Saving the rules leaves it as it is.

Visitors still see the browser's message instead of mine Your message shows only on the published site, after you save and publish again.

Good to know#

• Field rules and Attributes are the same settings. A rule writes attributes such as required, type or pattern on the field, so you see them in the field's Attributes section too. Choosing Email address, Phone number, Web address or Number also changes the field's type. See How to set up form fields (placeholders, required, types).
• Multilingual sites. On a site in several languages, the message has a box for each language under Translations. Click Translate with AI to fill them all from your main language; this uses AI tokens. An empty box shows the main-language message. See How to make your site available in several languages.
• Rules are checked in the visitor's browser. They stop honest mistakes. A program that sends data straight to TeleportHQ's forms server isn't checked by them. For spam, see How to protect forms from spam (reCAPTCHA).
• Click the About Field rules (i) button next to the section title for a short reminder in the editor.