MARKETPLACE
PLUGINS
PHONE NUMBER FORMATTER
Phone Number Formatter logo

Phone Number Formatter

Published January 2026
   •    Updated January 2026

Plugin details

   
📞 Phone Number Formatter (Bubble.io Plugin)
Phone Number Formatter is a powerful and flexible Bubble.io plugin that turns a regular input into a fully-featured international phone number field with real-time validation, country selection, and clean formatting.

Built for production apps, this plugin ensures that every phone number entered by users is valid, standardized, and ready to store or use—no hacks, no unreliable regex, no manual country code handling.

🚀 Key Features

-International Phone Number Support
Automatically formats phone numbers based on the selected country.

-Country Selector with Flags
Dropdown country picker with flag icons and dial codes for a smooth UX.

-Real-Time Validation
Instantly checks if the phone number is valid, too short, too long, or incorrect.

-Precise Validation Logic
Uses strict number validation (not just length checks).

-Bubble-Friendly States
Exposes multiple useful states:

-Full phone number (with country code)

-Value without country code

-Selected country name

-Country ISO code

-Dial code

-Country flag emoji

-Validation correctness (true / false)

-Success & Error Messages
Fully customizable validation messages with control over:

-Font size

-Font family

-Colors

-Spacing

-Auto-Binding & Default Values
Supports prefilled values and dynamic updates from Bubble workflows.

-Responsive & RG-Safe
Works smoothly inside:

-Responsive pages

-Repeating Groups

-Tables

-Smart Z-Index Handling
Country dropdown stays visible even inside complex layouts.

-Event Triggers
Built-in events for:

-Value change

-Country dropdown open / close

⚙️ Customization Options

-Clear input on country change

-Required / optional input handling

-Refresh states while typing

-Show or hide validation messages

-Auto-detect country or restrict country lists

-Preferred countries support

$10

One time  •  Or  $4/mo

stars   •   0 ratings
0 installs  
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

Devini logo
Devini
Joined 2025   •   17 Plugins
View contributor profile

Instructions

⚡ How to Use
Install the Plugin
Add Phone Number Formatter from the Bubble Plugin Store to your app.

Place the Element
Drag the Phone Number Formatter element onto your page.

(Optional) Attach to an Existing Input
If you want to enhance a native Bubble Input, enter its ID Attribute in the plugin property Bubble ID Attribute.

Configure Countries

Use Country List to allow specific countries

Use Preferred Country List to show countries at the top

Enable Auto Country Detection if needed

Style the Input
Customize font, size, colors, border, background, and dropdown styles directly from the element properties.

Use States in Workflows
Access built-in states like:

phone_number (formatted with country code)

value_without_country_code

correctness (true / false)

Selected country name, ISO code, dial code, and flag emoji

Validation & Events

Enable success/error messages from properties

Use the “Value Changed” event to trigger workflows

Types

This plugin can be found under the following types:
Background Services   •   Element   •   Event   •   Action

Categories

This plugin can be found under the following categories:

Resources

Support contact
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble