✅
Demo to preview the settings
✅
Introduction
Are you looking for a phone-specific input for your app? Our no-code plugin offers an input field that is specifically designed for phone numbers, equipped with various features.
Users can select their country from a drop-down list, and the input element will provide hints for the correct format.
The plugin also verifies the accuracy of the phone number format and returns the result as a state. Additionally, it returns the entered phone number if it is correctly formatted.
🔔
The most risk-free way to try out this plugin is to subscribe to it. If you unsubscribe a few days later you will be charged on pro-rata basis, so for example if the plugin monthly price is $5 then you’d pay only 17¢ per day ($5/30 days)!
How to setup
Place the required elements on the page and fill in the fields. You can find a more detailed configuration of each element on the plugin demo page.
Plugin Element Properties
This plugin has 1 (one) input form which can be used on the page.
Phone Number Input
Element Fields
☝️
Use the “ISO 3166-1 alpha-2 codes” country notation. Separate countries with enter or comma!
Title | Description | Type |
Default Value | The default value of the element. It should contain only digits. If it is not a valid phone number, it’s ignored. | Text (optional) |
Display Placeholder | Allows to show or hide the placeholder from the element. | Checkbox (yes/no) |
Placeholder | The placeholder of the element. It should contain only digits. If it is not a valid phone number, it’s ignored. | Text (optional) |
Custom Placeholder | The selected digit will be replaced in the placeholder, ex. (333) 333-3333. Leave the “Placeholder” field empty! Available options: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 | Dropdown (optional) |
Placeholder Color | The color of the placeholder. | Color |
Country List | The list of countries that will be available in the dropdown. Countries will be sorted alphabetically by name. | Text (optional) |
Preferred Country List | Allows you to select a list of countries that will be displayed at the top of the list. The order of countries will be kept as is mentioned. If it is mentioned, it should be a sublist of “Country List” field. | Text (optional) |
Country List Height | The height (px) of the country list without the Search bar. | Number |
Country Name Color | The color for the country name in the country list. | Color |
Dial Code Color | The color for the dial code in the country list. | Color |
Background Color | The background color of the dropdown. | Color |
Display Success Validation | Allows to show or hide the message of successful number validation. | Checkbox (yes/no) |
Custom Success Message | Custom message on successful number validation. | Text (optional) |
Success Message Color | The color of the success message. | Color |
Display Error Validation | Allows to show or hide the message of unsuccessful number validation. | Checkbox (yes/no) |
Custom Error Message | Custom message on unsuccessful number validation. | Text (optional) |
Error Message Color | The color of the error message. | Color |
Font Family | The font family of the success and error messages. | Text (optional) |
Font Size | The font size (px) of the success and error messages. | Number (optional) |
Font Family | The font family of the input. | Text (optional) |
Font Size | The font size (px) of the input. | Number (optional) |
Color | The color of the input. | Color |
Background Color | The background color of the input. | Color |
Border Style | The border style of the input. Available options: none, dotted, dashed, solid, double, groove, ridge, inset, outset | Dropdown |
Border Width | The border width (px) of the input. | Number |
Border Color | The border color of the input. | Color |
Border Radius | The border radius of the input. | Number |
Gap | The gap between the input and the error/success message. | Number |
Refresh states on typing | If checked, the ‘Value’ state will be refreshing with the error message (‘Invalid number’, ‘Invalid country code’, ‘Too short’) while typing. | Checkbox (yes/no) |
Required value | If checked and the ‘Phone Input’ element is ‘empty’, the ‘Correctness’ state will return ‘no’. If unchecked and the ‘Phone Input’ element is ‘empty’, the ‘Correctness’ state will return ‘yes’. | Checkbox (yes/no) |
Auto Country Detection | On initial load, the country for validation will be selected automatically based on the user’s location. | Checkbox (yes/no) |
Autofocus | Focus element on the initial load. | Checkbox (yes/no) |
Clear On Country Change | Clear input when the country is changed. | Checkbox (yes/no) |
Use in RG or Table | Indicates that the element is placed in a ‘Repeating Group’ or ‘Table’ element. | Checkbox (yes/no) |
Bubble Input ID Attribute | The ‘ID Attribute’ of the custom input from Bubble. | Text (optional) |
Current cell’s index | The index of RG cell. Can be used for example to scroll to a specific cell. | Number (optional) |
Element Actions
Reset Phone Input — This action is used to reset the value from the plugin element completely or to default value.
Fields
Title | Description | Type |
Reset to default | Allows to reset the plugin element value to the ‘default value’ if it exists. If no ‘default value’, resets the plugin element value to the empty value. | Checkbox (yes/no) |
Reset all instances | Allows to reset the all plugin elements on the page. Reset value depends on ‘Reset to default’ field. | Checkbox (yes/no) |
Set input value — This action is used to insert a new value into the plugin element.
Fields
Title | Description | Type |
Input value | The new value of the plugin element. | Text |
Element States
Title | Description | Type |
Value | Returns the complete phone number. It contains the ‘+’ sign, the country code and the number itself. E.g. +12015550123. | Text |
Correctness | Returns the validity of the inserted number. NOTE: It value may be affected by the ‘Required value’ field. | Checkbox (yes/no) |
Selected country name | Returns the complete name of country that was selected from dropdown or automatically detected during typing. E.g. United States. | Text |
Selected country ISO code | Returns the ISO code of country that was selected from dropdown or automatically detected during typing. E.g. us. | Text |
Selected country dial code | Returns the dial code of country that was selected from dropdown or automatically detected during typing. E.g. 1. | Text |
Selected country flag emoji | Returns the emoji flag of country that was selected from dropdown or automatically detected during typing. | Text |
Is focused | Indicates that the plugin element is focused. | Checkbox (yes/no) |
Is pressed | Indicates that the plugin element is pressed by the mouse. | Checkbox (yes/no) |
Is hovered | Indicates that the plugin element is hovered. | Checkbox (yes/no) |
Value without country code | Returns the local phone number. It doesn’t contain the ‘+’ sign and the country code. | Text |
Placeholder | Returns the placeholder that is used when the element has no data. | Text |
Current cell’s index | Returns the current cell’s index where the plugin element is placed, if it exists. | Number |
Element Events
Title | Description |
value is changed | This event is triggered when the value in the element is changed. |
country dropdown is opened | This event is triggered when the dropdown with countries is opened. |
country dropdown is closed | This event is triggered when the dropdown with countries is closed. |
Workflow example
How to fix the dropdown overlapping with another elements
Sometimes the dropdown list with the country list may be overlapped by the another elements on the page. This instruction will help you to fix this issue.
- Here we have an example when a part of the country list is unavailable.
- On the editor page, need to find the “parent Group of the Phone Number Input element” and the “element(s)” that overlap with the dropdown at the same level as parent Group.
- The parent Group of the Phone Number Input element — Group C.
- The element that overlaps with the element dropdown — Group J.
- The Group C and the Group J are placed on the same level on the page.
From the editor page, was detected the following:
- Select the parent Group, Group C, and click on the Bring to front button from the Arrange menu until the dropdown will be displayed over below elements on the preview.
- The result on the preview after Bring to front.
How to fix Recursion/Circular reference error
Problem
Sometimes you can get one of the following errors, Error: Recursion when evaluating property… or Error: Property contains circular reference…
Error: Recursion when evaluating property…
Error: Property contains circular reference…
Reason of problem
The reason for both errors is the same, using the own element state in its condition in the Conditional tab.
Solution
- Create a Custom state for any element.
- Set up the value for the created Custom state. Set-up steps can differ depending on element state change behavior.
- For some states, it is possible to use the element events. And, call Set state action.
- For some states, you can't detect changes based on element events. Use default Bubble tools and call Set state action!
- Use created Custom state in condition instead of own element state.
Changelogs
Update 14.11.24 - Version 1.96.0
- Minor update (Marketing update).
Update 29.10.24 - Version 1.95.0
- Fixed width for dropdown menu.
Update 18.10.24 - Version 1.94.0
- Minor update (Marketing update).
Update 02.10.24 - Version 1.93.0
- Fixed states refreshing and renamed 2 fields.
- "Should Not Be Empty" into "Refresh states on typing".
- "Required" into "Required value".
- Updated fields' documentation.
Update 10.09.24 - Version 1.92.0
- Fixed autobinding, updated library, improved validation.
- Save country code for autobinding.
- Updated library to version 24.4.0.
- Replaced practical validation with precise.
Update 06.08.24 - Version 1.91.0
- Fixed bubble id input attribude.
Update 19.07.24 - Version 1.90.0
- Fixed displaying of element in Popup element.
Update 19.07.24 - Version 1.89.0
- Updated library and improved documentation.
- Updated library to the latest version.
- Completely removed jQuery.
- Fixed logical bugs.
- Removed IpInfo Token credential from plugin settings.
- Grouped and reordered the fields.
- Added documentation for all fields.
- Renamed some fields.
Update 16.07.24 - Version 1.88.0
- Minor update (Marketing update).
Update 26.06.24 - Version 1.87.0
- Minor fixes.
Update 24.06.24 - Version 1.86.0
- Fixed autobinding and overlapping with another elements.
Update 06.06.24 - Version 1.85.0
- Minor update.
Update 05.06.24 - Version 1.84.0
- Fixed "reset to default" for all inputs.
Update 23.05.24 - Version 1.83.0
- Updated library and minor fixes.
Update 10.05.24 - Version 1.82.0
- Fixed "Default value" field validation.
Update 24.04.24 - Version 1.81.0
- Fixed "Set input value" action.
Update 17.04.24 - Version 1.80.0
- Fixed mobile dropdown.
Update 04.04.24 - Version 1.79.0
- Fixed "Correctness" state and element overlay.
Update 04.04.24 - Version 1.78.0
- updated description.
Update 22.03.24 - Version 1.77.0
- Fields docs updated.
Update 15.03.24 - Version 1.76.0
- Added "reset all" feature in "Reset Phone Input" action.
Update 03.03.24 - Version 1.75.0
- Added "value with no country code" field for elements with default value.
Update 03.03.24 - Version 1.74.0
- Added "Reset input" and "Set input" actions, fixed "autobinding".
Update 26.02.24 - Version 1.73.0
- Fixed displaying and logical errors.
Update 09.02.24 - Version 1.72.0
- Fixed "Error Console".
Update 24.01.24 - Version 1.71.0
- updated description.
Update 27.12.23 - Version 1.70.0
- updated description.
Update 25.12.23 - Version 1.69.0
- updated description.
Update 19.12.23 - Version 1.68.0
- updated description.
Update 24.11.23 - Version 1.67.0
- Added "Current cell's index" Field & index.
Update 20.11.23 - Version 1.66.0
- Fixed dropdown in repeating group.
Update 19.10.23 - Version 1.65.0
- Updated description.
Update 19.09.23 - Version 1.64.0
- Fixed Plugin header.
Update 18.09.23 - Version 1.63.0
- updated description.
Update 13.09.23 - Version 1.62.0
- minor updates.
Update 05.09.23 - Version 1.61.0
- Added "placeholder" state and "Padding top" field.
Update 27.07.23 - Version 1.60.0
- Fixed Border-width.
Update 10.07.23 - Version 1.59.0
- updated description.
Update 21.06.23 - Version 1.58.0
- updated the description.
Update 15.06.23 - Version 1.57.0
- Added dropdown country menu style options.
Update 25.05.23 - Version 1.56.0
- Minor fixes.
Update 19.05.23 - Version 1.55.0
- Added "Value Changed" trigger event.
Update 20.04.23 - Version 1.54.0
- Fixed default value correctness.
Update 21.02.23 - Version 1.53.0
- updated the description.
Update 14.02.23 - Version 1.52.0
- Added possibility to use ipinfo token, updated libphonenumber library.
Update 02.02.23 - Version 1.51.0
- Updated description.
Update 20.01.23 - Version 1.50.0
- Updated description.
Update 09.01.23 - Version 1.49.0
- Fixed border color.
Update 27.12.22 - Version 1.48.0
- Minor Fixes.
Update 18.10.22 - Version 1.47.0
- Input Background-color fixed..
Update 12.10.22 - Version 1.46.0
- Minor Fixes and adjusted description.
Update 10.10.22 - Version 1.45.0
- updating to a libphonenumber 8.12.56.
Update 19.09.22 - Version 1.44.0
- Adjusted common part.
Update 16.09.22 - Version 1.43.0
- Minor Fixes.
Update 05.09.22 - Version 1.42.0
- Updated common part.
Update 02.09.22 - Version 1.41.0
- Minor fixes.
Update 29.08.22 - Version 1.40.0
- Updated common part.
Update 04.08.22 - Version 1.39.0
- Added clear input value checkbox and state "value without country code".
Update 22.06.22 - Version 1.38.0
- Updated description.
Update 03.06.22 - Version 1.37.0
- Fixed reset action.
Update 19.05.22 - Version 1.36.0
- Updating to a libphonenumber version v8.12.43.
Update 09.05.22 - Version 1.35.0
- Added text in description.
Update 27.04.22 - Version 1.34.0
- Fixed correctness and value state.
Update 09.04.22 - Version 1.33.0
- Phone number formatting improvements.
Update 01.04.22 - Version 1.32.0
- Fixed error message display.
Update 14.02.22 - Version 1.31.0
- Updated main library.
Update 04.02.22 - Version 1.30.0
- Country list limiter feature added.
Update 10.11.21 - Version 1.29.0
- Added custom placeholder and the ability to use bubble input..
Update 01.10.21 - Version 1.28.0
- Fixed Mexico phone format..
Update 13.08.21 - Version 1.27.0
- Added new field 'This input should not be empty.
Update 28.07.21 - Version 1.26.0
- Updated description.
Update 19.07.21 - Version 1.25.0
- Updated icon.
Update 30.05.21 - Version 1.24.0
- minor changes.
Update 05.05.21 - Version 1.23.0
- Added possibility to styling placeholder text.
Update 12.04.21 - Version 1.22.0
- fixed "circular reference" and "owner error recursion" errors.
Update 13.03.21 - Version 1.21.0
- Updated plugin name.
Update 03.03.21 - Version 1.20.0
- Updated description.
Update 09.02.21 - Version 1.19.0
- Updated icon.
Update 13.11.20 - Version 1.18.0
- Fixed countries dropdown display on mobile. Added new states: 'is hovered', 'is pressed', 'is focused'.
Update 25.06.20 - Version 1.17.0
- Border-radius bug fixes.
Update 09.06.20 - Version 1.16.0
- Documentation field propriety improvements.
Update 13.05.20 - Version 1.15.0
- Added checkbox for enable/disable autofocus in plugin proprieties for page load..
Update 11.05.20 - Version 1.14.0
- fixed plugin interfering with bubble styles and and added autofocus elements".
Update 28.04.20 - Version 1.13.0
- added possibility enhances for input styling, dropdown element fixes and improvements.
Update 14.09.19 - Version 1.12.0
- New states : Country Name, Country ISO code, Selected Country Dial code,Selected Country Flag Emoji.
Update 14.03.19 - Version 1.11.0
- added "is required" checkbox.
Update 12.03.19 - Version 1.10.0
- Minor Fixes.
Update 11.03.19 - Version 1.9.0
- Minor fixes.
Update 18.02.19 - Version 1.8.0
- Fixed, value and сorrectness not working for default number..
Update 19.01.19 - Version 1.7.0
- added reset inputs workflow action.
Update 18.01.19 - Version 1.6.0
- Minor fixes.
Update 05.01.19 - Version 1.5.0
- Now while user is typing the number is checking for correctness, no need to click away. Also when changing the country the number is checking again without clicking away..
Update 10.10.18 - Version 1.4.0
- added font, color and family for phone number input, as well as success/error messages.
Update 27.09.18 - Version 1.3.0
- Minor fixes.
Update 26.08.18 - Version 1.2.0
- Added demo page.
Update 15.06.18 - Version 1.1.0
- added default value, automatic country detection, custom preferred countries.
Update 21.05.18 - Version 1.0.0
- description updated.