Phone Number Field Element

The Phone Number Field Element collects a telephone number in a form. On phones and tablets it opens the number keypad, which makes typing a number much quicker, and browsers can fill in a saved number for the visitor. It is added inside a Tirenoa Form (Tirenoa > Forms).

Because phone numbers are written in many different ways around the world, the field accepts any input by default. When you need a specific format, for example digits only or a leading plus sign, you can add your own pattern and a matching error message that explains the expected format.

In this article: How To Use · Element Options · Tips · Related Elements

How To Use The Phone Number Field Element

Add the Phone Number Field Element to your form and enter the Field Label and the Field Name, for example phone (lowercase letters, numbers, dashes and underscores only). Set Required Field to Yes with an Empty Input Notice if the number is mandatory, and use Placeholder Text to show an example of the expected format.

A new field comes with a phone icon in Input Field Icon; pick another icon or click it again to remove it. Tooltip Text adds a small hint next to the label. Set Autocomplete Tokens to Tel so browsers can fill in the visitor’s saved number.

To check the format, enter a Custom Pattern, for example [0-9+ ]{6,20} for digits, spaces and a plus sign, and an Invalid Input Notice that tells visitors what is expected. The number is saved as typed under the field label in the form entries and the notification email.

Element Options

The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.

General

Heading Description
Field Label Enter the label for the input field. This is how users will identify individual fields.
Field Name Enter the field name. Please use only lowercase alphanumeric characters, dashes, and underscores.
Required Field Make a selection to ensure that this field is completed before allowing the user to submit the form.
Empty Input Notice Enter text validation notice that should display if data input is empty.
Placeholder Text The placeholder text to display as hint for the input type.
Tooltip Text The text to display as tooltip hint for the input.
Input Field Icon Select an icon for the input field, click again to deselect.
Autocomplete Tokens Select an autocomplete detail token. Select custom to add your own token combination. For more info and examples, you can check MDN Web Docs.
Autocomplete Custom Tokens Enter your custom autocomplete tokens. For more info and examples, you can check MDN Web Docs.
Custom Pattern Enter allowed input pattern. For more info and pattern examples, you can check w3schools.
Invalid Input Notice Enter validation notice that should display if data input is invalid.
Tab Index Tab index for the form field.
CSS Class Add a class for the form field.
CSS ID Add an ID for the form field.

Conditionals

Heading Description
Conditional Logic Add conditional logic for the input field.

Tips

  • Keep patterns tolerant. International visitors write numbers with spaces, brackets and country codes, and a strict pattern can keep them from contacting you.
  • Mention the country code in the placeholder, for example +49 30 1234567, if you expect calls from abroad.
  • Invalid Input Notice only appears once a Custom Pattern is set.
  • Ask for a phone number only when you really need it, or leave it optional. Fewer required fields usually means more completed forms.