International Telephone Validation in Webflow- fast Guide

Adding a robust telephone input to your Webflow site doesn’t just improve user experience—it ensures your lead data is clean and actionable. By using the intl-tel-input library, you can implement a professional dropdown for country codes, automatic formatting, and strict validation.

Below is a step-by-step guide to setting up a high-performance, SEO-friendly phone validation system.

Why Use `intl-tel-input` for Webflow?

Standard HTML5 <input type="tel"> fields are often too permissive. Users might enter the wrong number of digits or forget their country code. Using a dedicated library offers:

Automatic Formatting: Adds spaces and dashes as the user types.
Validation: Prevents submission of impossible numbers.
UX-Friendly: Automatically detects the user’s country and adds the correct prefix.

Step 1: Add the Input Field to Webflow

First, you need to create the structure in the Webflow Designer.

Drag a Form Block onto your page.
Add an Input field.
In the Element Settings (shortcut: D), set the ID to phone.
Set the Type to Phone.

Step 2: Add the Library Styles

Before the script works, we need to load the CSS for the flags and dropdown.

Go to your Page Settings.
Find the Inside <head> tag section.
Paste the following stylesheet link:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.2.1/css/intlTelInput.css">

<style>
.iti {
    position: relative;
   width:100% !important;
}
</style>

Step 3: Add the Custom Script

Now, add the logic to the Before </body> tag section. This script includes Strict Mode, which enforces valid lengths and ignores irrelevant characters.

<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.2.1/js/intlTelInput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.2.1/js/utils.js"></script>
 

<script>
document.addEventListener("DOMContentLoaded", function () {
  const phoneInput = document.querySelector("#tel");

  if (!phoneInput) return;

  window.intlTelInput(phoneInput, {
    initialCountry: "pk",
    separateDialCode: true,
    nationalMode: false,
      strictMode: true,
    autoPlaceholder: "polite",
    formatOnDisplay: true,
  });
  
    // 🚫 Block letters & symbols
  phoneInput.addEventListener("input", () => {
    phoneInput.value = phoneInput.value.replace(/[^0-9+]/g, "");
  });
});
</script>

Key Features of This Implementation

1. Strict Character Filtering

As the user types, the script automatically ignores any characters that aren’t numbers (or the optional + at the start). This keeps your database free of accidental letters or symbols.

2. Length Capping

By enabling strictMode: true, the input will automatically cap the length based on the selected country’s valid phone number standards. No more 15-digit “US” numbers.

3. Smart Formatting

With the utils.js loaded, the field will automatically provide placeholders (e.g., (555) 000-0000) that guide the user on exactly what to type.

Summary Checklist for Webflow Success

Feature	Benefit
Initial Country	Sets a default flag (e.g., “us”) to speed up entry.
Strict Mode	Restricts input to numeric only and caps length.
Utils.js	Provides the backend logic for global phone patterns.
Validation	Use `iti.isValidNumber()` to prevent form submission if the number is fake.

Try Different Validation Variations

If you want to experiment with different behaviors and formats, this setup is highly flexible. You can easily customize it based on your project needs.

Examples you can try:

National mode: Change the default country for local.
Internationalisation: Enable full international numbers with country codes
Separate dial code option: Display the selected country dial code next to the input.
Validation: Validate numbers in real time while typing.

To explore all available options, advanced configurations, and real-world examples, visit the official JavaScript guide of intl-tel-input and see how you can extend telephone validation even further in your Webflow forms.

Why Use intl-tel-input for Webflow?