International phone number inputs, the way they should be.
View demo projectWith IP Lookup
Use this if you want the users' IP country to automatically be prefilled. IMPORTANT: Do not use this with profile forms or it will behave erratically.
Without IP Lookup
Use this on profile forms and/or if you do not want to automatically prefill based on user IP.
Création du scénario Make.com
1. Téléchargez le modèle JSON ci-dessous pour commencer.
2. Naviguez jusqu'à Make.com et créez un nouveau scénario...
![](https://cdn.prod.website-files.com/5bbfaf3252489b4c484ba9b9/648c5b1fbc7994f029551c78_Screen%20Shot%202023-06-16%20at%208.51.21%20AM.jpg)
3. Cliquez sur la petite boîte avec trois points, puis sur Import Blueprint...
![](https://cdn.prod.website-files.com/5bbfaf3252489b4c484ba9b9/648c5b29e80e81cad00f11c8_Screen%20Shot%202023-06-16%20at%208.51.33%20AM.jpg)
4. Téléchargez votre fichier et voilà ! Vous êtes prêt à relier vos propres comptes.
Besoin d'aide avec ce MemberScript ?
All Memberstack customers can ask for assistance in the 2.0 Slack. Please note that these are not official features and support cannot be guaranteed.
Join the 2.0 Slackv0.2 - Performance improvements & prefill fix
In this updated version, the number is always shown in international format and works with prefills/profile forms. Also, a version has been added which does not look up IP addresses.
How to Add a Phone Number Field to your Webflow Form (with Country Select)
Memberscripts needed:
Tutorial:
Cloneable:
https://webflow.com/made-in-webflow/website/phonenumber-input
Why/When would need to Add a Phone Number Field to your Webflow Form?
- Make it easier for users to fill in their phone numbers without worrying about their country codes.
- Reduce friction and improve your users’ experience.
The less friction introduced in users’ experiences, the better – that’s UX 101. If you’re asking your visitors for their phone numbers, a good way to make it as easy as possible and as error-proof as possible for them is to give them a country selector and perhaps even better, to have it pre-filled with their correct country codes.
That’s exactly what we’ll be doing below and – spoiler alert – it’s super easy and quick.
Adding a phone number field to Webflow forms
To add a phone number field to a Webflow form, we’re going to use MemberScript #41 – Perfect Phone Number Inputs. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.
Setting it up
The first thing you’ll need to do is build out the form itself and style it however you want.
Next up, select the phone number field and add the following attribute to it:
- ms-code-phone-number=”ca,gb,us”
In our example above, the attribute’s value consists of a list of 3 ISO standard two-letter country codes. These represent the preferred countries that will show up at the top of the list.
You can go ahead and replace those country codes with whatever you think is more appropriate for your target audience and you can also remove some of them or add as many as you like.
Making it work
Now that you’ve got the form set up, all you need to do is add the MemberScript #41 custom code to your page, before the closing body tag.
For this MemberScript, we’ve got two pieces of code, depending on your use case:
- Code with IP lookup – this will use users’ IP address to pre-fill their country code (but don’t use this with profile forms, it won’t work well).
- Code without IP lookup – this will work well with profile forms and it won’t pre-fill users’ country codes based on their IPs.
Conclusion
That’s everything, you can now go ahead and test your form’s phone number field.
If you want to use our demo project to get you started, just click the image below to add it to your Webflow site.
![](https://cdn.prod.website-files.com/5c2a9a234fdbba7439c48fa4/65b3c1ae389f423e96cfd7f7_W-RNzRqZXQU1OWDNN8W9GRTLHCYRYuUakT2xpeaX1v45LMHyFfby6bmIKYDT51Sr_ruACLqkCfsILWaoBI2FDiErilyIlD5cIl5NwoGg_SX4uyc9rDNIuW7vGwSFb2TBee47n7m8vI7Ty3uJ1as6PQg.webp)
Our demo can help you with adding an auto-formatting international phone number input with a selector, autolocation and preferred countries.