Phone
The Phone element collects a phone number together with a country selection. Use it in contact or booking forms where the visitor's country determines the dial code and the number's expected format.
Properties
The properties live in the inspector under the Phone group.
Property | What it does | Default |
|---|---|---|
Country | Country whose dial code and validation rules apply to the number | United States |
Selector | Shows (show) or hides (hide) the country selector dropdown | Show |
Placeholder | Text shown in the input before the visitor types | Enter phone number |
Required | Makes the field mandatory | False |
Disabled | Prevents visitors from entering a number | No stored default |
Go to next view when answered | Advances to the next view once the visitor answers | Off |
Logic | Controls when the element is visible | None |
References
References expose the visitor's answer as data you can use in formulas and other elements. Assign a reference to store the phone answer in a variable.
Value: the phone number the visitor entered.
Touched: whether the visitor has interacted with the field.
Last touched at: when the visitor last interacted with the field.
Styling
The Phone element can be styled per state and per part of the element.
Style states: Active, Default, Disabled, Error, Focus, Hover, Placeholder.
Named targets: wrapper, phone-field, input, phone-text-input, code, clear-icon, dropdown-button, dropdown-icon, dropdown, dropdown-item, search-input, error-label.
Named styles: Phone, Phone - brand background, Phone - underlined.
There is no separate style target for Country or Selector. Both are styled through the dropdown targets (dropdown-button, dropdown-icon, dropdown, dropdown-item, search-input) and the code target.
Apply general styling from the Style tab: quick styles, style sets, and CSS overrides per state and per breakpoint. See the styling reference for the full system.
Related articles
UI Elements: overview of the elements.
FormulaScript Overview: using formulas in properties.