International Phone Input with country search field and auto dial code

‍This project allows you to easily integrate a modern and intuitive form into your website. Designed for businesses working internationally, this form includes:
•An ergonomic country selector: An interactive dropdown list with built-in search and over 100 countries sorted alphabetically. Each country displays its name, flag, and dialing code.
•Smart phone number validation: With the integration of the libphonenumber library, phone numbers are verified to ensure their validity based on the selected country.
•Elegant and functional design: Fully customizable and compatible with Webflow, this form seamlessly integrates into your Webflow projects without requiring advanced technical skills.

‍✅ Provide a smooth and professional user experience for your visitors.
✅ Simplify the collection of information from international clients.
✅ Get the country and dial code right and don't let your users enter the wrong information.

First clone this Webflow project, here. Then simply copy and paste the form block into your project.
You can use a simple webflow text field to complete your form. Use the embed script only to collect the phone, country and area code data. The submit button must remain in the embed code to ensure phone number validation.

Show dial code : (line 17)

  <label class="field_label" for="dialCode">Dial code :</label>
  <input class="text_field" type="text" id="dialCode" name="dialCode" readonly />

Hide dial code : (line 17)

  <label class="field_label hide" for="dialCode">Dial code :</label>
  <input class="text_field hide" type="text" id="dialCode" name="dialCode" readonly />

You can style the form field using the webflow "text_field" class already in the form.
To style the dropdown, you need to use CSS at the end of the code.
To style the submit button, you just need to style your "button" class directly in webflow.

Feel free to contact me if you need help implementing this on your site : guillaume@skiaaa.studio