Blog
Country Codes in Webflow Form: A Step-by-Step Guide
Web
Guides
4
min read

Country Codes in Webflow Form: A Step-by-Step Guide

Published on
Sep 12, 2024
Blog
Country Codes in Webflow Form: A Step-by-Step Guide
Web
Guides
4
min read

Country Codes in Webflow Form: A Step-by-Step Guide

Published on
Sep 12, 2024

Contributors

Omer Hoffman
Web Design Team Lead
Yana Blazhko
Web Designer

Hello, web designers! Today, we're tackling a common challenge in Webflow: adding country codes to phone fields. This feature doesn't come out of the box, but with a bit of custom code, we can create a user-friendly, internationally-aware form. Let's dive in!

Step 1: Create and Style Your Form

Start by adding a form to your Webflow page. Style it to match your website's design aesthetics. Remember, a well-designed form can significantly improve user experience and completion rates.

Step 2: Configure the Phone Number Field

Here's where the magic begins:

  1. Select your phone number field.
  2. Add this custom attribute: ms-code-phone-number

The value of this attribute determines which country codes appear at the top of the selection list. For example:

This would prioritize Canada, Great Britain, and the United States.

Need to find the right country codes? Check out the IBAN Country Codes list. It's a comprehensive resource for ISO standard two-letter country codes.

This flexibility allows you to create a tailored experience that resonates with your users, wherever they may be. So take a moment to consider your audience and adjust the list accordingly - it's a small change that can make a big difference in user experience.

Step 3: Add the Custom Script

Now, let's add some functionality with custom JavaScript. You have two options:

  1. IP Lookup Script
    • Purpose: Automatically detects and pre-fills the user's country based on their IP address.
    • Best for: General contact forms or situations where automatic detection is helpful
 
<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);

      // Restrict input to digits and the plus sign
      input.addEventListener('input', function() {
        this.value = this.value.replace(/[^\d+]/g, '');
      });

      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>
  1. Non-IP Lookup Script
    • Purpose: Allows manual country selection without automatic detection.
    • Best for: Profile forms or when a user-selected country is preferred.
    • Advantage: Avoids potential issues with pre-filled data in profile contexts.
 <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"
      });

      // Restrict input to digits and the plus sign
      input.addEventListener('input', function() {
        this.value = this.value.replace(/[^\d+]/g, '');
      });

      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>

Both scripts ensure that only numerical input is allowed in the phone number field, preventing entry of letters, symbols, or spaces.

Add your chosen script just before the closing </body> tag in your page settings.

Step 4: Publish Your Enhanced Form

Great job! You've successfully implemented a phone number field that's both user-friendly and internationally aware. Time to publish your website and let your users enjoy the improved experience.

Bonus: Customizing the Style

You can go further and easily customize the fields to fit your design. Want to tweak the appearance of the flag container? Go for it. Need to adjust the padding or other styles for the number input? No problem—just add your custom CSS.

Use the following classes:

  • .iti__selected-flag – for the flag container
  • .form_input.is-number.w-input – for the number input

For example, to adjust the left padding of the number input:

 <script>
 .form_input.w-input {
    padding-left: 1.25rem !important;    
}
</script>

Conclusion

By following these steps, you've created a phone number field that's not only functional but also user-friendly for an international audience. This approach gives you control over the design and functionality, allowing you to:

  • Prioritize specific countries
  • Customize the styling to match your site
  • Ensure accurate data entry with number-only input

Whether you're building a contact form, a user profile, or any other type of form, this enhanced phone field will significantly improve your users' experience. Happy designing!

Contributors

Omer Hoffman
Web Design Team Lead
Yana Blazhko
Web Designer

Take Control and Shape Your Audience's Perception of Your Startup

Read more

Related Content

Web
Guides
6
min read

Syntax Code Blocks in Webflow CMS: A Step-by-Step Guide

Web
6
min read

Rive vs Interactive Lottie: Choosing Your Web Animation Tool

Web
Guides
5
min read

Custom Menu Breakpoints in Webflow: A Step-by-Step Guide

Web
Guides
2
min read

Lottie Animations in Webflow CMS: A Step-by-Step Guide

Announcements
3
min read

Polar Hedgehog's 2023 Year In Review

Visual
Web
5
min read

Designing OpenTF: A Sprint to Craft an Open-Source Identity

Let’s Work Together
Let's Talk
By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.
DenyAccept