www.memberstack.com
Open in
urlscan Pro
63.35.51.142
Public Scan
URL:
https://www.memberstack.com/scripts/perfect-phone-number-inputs
Submission: On May 15 via automatic, source links-suspicious — Scanned from DE
Submission: On May 15 via automatic, source links-suspicious — Scanned from DE
Form analysis 2 forms found in the DOM
/search
<form action="/search" class="c_search_bar w-form"><input class="global-search-input w-input" tr-search-element="input" maxlength="256" name="query" placeholder="Search…" type="search" id="search" required=""><a tr-search-element="clear" href="#" class="c_search_clear w-inline-block" tabindex="0"><div class="c_search_clear-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 54.549 54.549">
<path id="Path_1" data-name="Path 1" d="M0,0H73.144" transform="translate(1.414 53.135) rotate(-45)" fill="none" stroke="currentColor" stroke-width="4"></path>
<path id="Path_2" data-name="Path 2" d="M0,0H73.144" transform="translate(1.414 1.414) rotate(45)" fill="none" stroke="currentColor" stroke-width="4"></path>
</svg></div><div class="c_search_clear-text">Clear Search Results</div></a>
<div class="c_search_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 32 32" stroke-width="2">
<g stroke-width="2" transform="translate(0, 0)">
<line data-color="color-2" x1="29" y1="29" x2="20.777" y2="20.777" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="4" stroke-linejoin="miter"></line>
<circle cx="13" cy="13" r="11" fill="none" stroke="#444444" stroke-linecap="square" stroke-miterlimit="10" stroke-width="4" stroke-linejoin="miter"></circle>
</g>
</svg></div><input type="submit" class="c_search_button w-button" value="Search">
</form>Name: wf-form-rage-form — GET
<form id="wf-form-rage-form" name="wf-form-rage-form" data-name="rage-form" method="get" data-wf-page-id="646b288bdf737f5a46ed013b" data-wf-element-id="dd0c3070-592b-e9ad-16db-179bb0883515" aria-label="rage-form">
<div class="rage_field-wrap"><label for="email">Email</label><input class="input w-input" maxlength="256" name="email" data-name="Email" placeholder="optional" type="email" id="email" required=""></div>
<div class="rage_field-wrap"><label for="Messge">Message</label><textarea placeholder="Let us know what's wrong!" maxlength="5000" id="Messge" name="Messge" data-name="Messge" class="input w-input"></textarea><input type="hidden" id="ragePath"
name="path" value="/scripts/perfect-phone-number-inputs">
<div class="w-embed w-script">
<script>
window.onload = function() {
// Get the current page path
var currentPath = window.location.pathname;
// Find the input element by its ID
var inputElement = document.getElementById('ragePath');
// Set the value of the input element to the current path
inputElement.value = currentPath;
};
</script>
</div>
</div>
<div class="spacer-xsmall"></div>
<div data-sitekey="6LfqdWElAAAAAGGFxbyXFCts4UdvpRkClKy2jfxy" class="w-form-formrecaptcha g-recaptcha g-recaptcha-error g-recaptcha-disabled">
<div style="width: 304px; height: 78px;">
<div><iframe title="reCAPTCHA" width="304" height="78" role="presentation" name="a-prgfw4yh6qks" frameborder="0" scrolling="no"
sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox allow-storage-access-by-user-activation"
src="https://www.google.com/recaptcha/api2/anchor?ar=1&k=6LfqdWElAAAAAGGFxbyXFCts4UdvpRkClKy2jfxy&co=aHR0cHM6Ly93d3cubWVtYmVyc3RhY2suY29tOjQ0Mw..&hl=de&v=vjbW55W42X033PfTdVf6Ft4q&size=normal&cb=yhuclm3ipb0v"></iframe>
</div><textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response"
style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none;"></textarea>
</div><iframe style="display: none;"></iframe>
</div><input type="submit" data-wait="Please wait..." class="button w-button" value="Submit report">
</form>Text Content
Memberstack is currently LIVE on Product Hunt! Click here to Join the Discussion
→
Product
All Features
Components
Templates
Integrations
Roadmap
Sales Pitch
Customers
Case Studies
Testimonials
Pricing
Resources
Templates
Components
Scripts
Find Experts NEW
Blog
Forums
Ask the AI NEW
Help Center
Slack Community
Wishlist
API
DOM Package
Front End
React Package
Front End
Admin API
REST
Admin Package
Node.js
Jobs
Clear Search Results
Login
Memberstack 2.0
Memberstack 1.0
Get StartedGet Started
Find anything
⌘ + K
Ask the AI NEW
Search Help Center
Ask the Community
Message Support
Slack Channel
Product Wishlist
Report a Bug
Twitter - @Memberstack
System Status
Terms & Privacy Policies
SOMETHING NOT WORKING AS EXPECTED?
We would really appreciate if you could let us know what the issue is! If you
want us to get back to you about it, you can leave your email too.
Email
Message
Thank you! Your feedback is much appreciated 💙
Oops! Something went wrong while submitting the form.
← All Scripts
#41 - PERFECT PHONE NUMBER INPUTS V0.2
International phone number inputs, the way they should be.
NEED HELP WITH THIS 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.
View demo
Video
Code
Attributes
Version Notes
How-To
Make.com
Documentation
WITH 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.
Copy Script
<!-- 💙 MEMBERSCRIPT #41 v0.2 💙 PERFECT PHONE NUMBER INPUTS (WITH IP LOOKUP) -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"> </script>
<script>
$(document).ready(function() {
$('input[ms-code-phone-number]').each(function() {
var input = this;
var preferredCountries = $(input).attr('ms-code-phone-number').split(',');
var iti = window.intlTelInput(input, {
preferredCountries: preferredCountries,
utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
});
$.get("https://ipinfo.io", function(response) {
var countryCode = response.country;
iti.setCountry(countryCode);
}, "jsonp");
input.addEventListener('change', formatPhoneNumber);
input.addEventListener('keyup', formatPhoneNumber);
function formatPhoneNumber() {
var formattedNumber = iti.getNumber(intlTelInputUtils.numberFormat.INTERNATIONAL);
input.value = formattedNumber;
}
var form = $(input).closest('form');
form.submit(function() {
var formattedNumber = iti.getNumber(intlTelInputUtils.numberFormat.INTERNATIONAL);
input.value = formattedNumber;
});
});
});
</script>
WITHOUT IP LOOKUP
Use this on profile forms and/or if you do not want to automatically prefill
based on user IP.
Copy Script
<!-- 💙 MEMBERSCRIPT #41 v0.2 💙 PERFECT PHONE NUMBER INPUTS (WITHOUT IP LOOKUP) -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"> </script>
<script>
$(document).ready(function() {
$('input[ms-code-phone-number]').each(function() {
var input = this;
var preferredCountries = $(input).attr('ms-code-phone-number').split(',');
var iti = window.intlTelInput(input, {
preferredCountries: preferredCountries,
utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
});
input.addEventListener('change', formatPhoneNumber);
input.addEventListener('keyup', formatPhoneNumber);
function formatPhoneNumber() {
var formattedNumber = iti.getNumber(intlTelInputUtils.numberFormat.INTERNATIONAL);
input.value = formattedNumber;
}
var form = $(input).closest('form');
form.submit(function() {
var formattedNumber = iti.getNumber(intlTelInputUtils.numberFormat.INTERNATIONAL);
input.value = formattedNumber;
});
});
});
</script>
Description
Attribute
No items found.
V0.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.
CREATING THE MAKE.COM SCENARIO
1. Download the JSON blueprint below to get stated.
Download File
2. Navigate to Make.com and Create a New Scenario...
3. Click the small box with 3 dots and then Import Blueprint...
4. Upload your file and voila! You're ready to link your own accounts.
HOW TO ADD A PHONE NUMBER FIELD TO YOUR WEBFLOW FORM (WITH COUNTRY SELECT)
MEMBERSCRIPTS NEEDED:
1. https://www.memberstack.com/scripts/perfect-phone-number-inputs
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?
1. Make it easier for users to fill in their phone numbers without worrying
about their country codes.
2. 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:
1. 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).
2. 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.
Our demo can help you with adding an auto-formatting international phone number
input with a selector, autolocation and preferred countries.
TAKE ME TO THE SCRIPTS!
Read full documentation
Button Text
TRY MEMBERSTACK FOR FREE
100% free, unlimited trial — upgrade only when you're ready to launch. No credit
card required.
Get Started for free
PRODUCT
Full Feature ListUser AccountsGated ContentSecure PaymentsAPI & Integrations
Create a new account2.0 Log in1.0 Log inPricing
LANGUAGE
CUSTOMERS
ShowcaseDevelopersDesignersMarketersAgencies & Freelancers
COMPANY
About
Careers
1
Partnerships (email)Contact Us (email)Twitter"Do Not Sell My Data" Promise
RESOURCES
TemplatesComponentsMemberScriptsSlack CommunityProduct WishlistSupport ForumFind
ExpertsHelp CenterBlog
SOC 2 TYPE 1
CERTIFIED
GDPR
COMPLIANT
CCPA
COMPLIANT
Privacy PolicyTerms of ServiceCookie PolicySecurity Policy
© Memberstack Inc. 2018 – 2024. All rights reserved.