Add an International telephone input field with Flags and Dial Codes in Sitecore Forms – How To Implement Series

I had a requirement to add a fancy little input field to add a phone number with country codes with Flags and some nice UI. I googled a bit and found two libraries which I tried the both of them. The one that fine for me is International telephone input.

If you are looking for the very same solution on how to add a International telephone input field with Flags and Dial Codes in Forms you are on the right place. It is a tricky piece, but I was able to fulfill my requirement without modifying the Code. This is something I was looking for.

11-14-2019 7-56-47 PM


The Problem:

tangled.jpg

The website which I am working on is for Global client which has business spread all around the world. So the nature of the end user is not specific to the region. I had to find a way to get the phone numbers with the country codes as well.

The Sitecore Forms are pretty decent and improving day by day. Though I did fulfill my needs but there was something missing, I felt. It has some validations and data types but that does not allow you to have a phone number like above. I think this should be created OOTB for the Sitecore forms. I firstly tried to add two number fields one for Phone Code and other for the actual Phone Number but that did not look right to me. It is such a hassle if you want to contact any of the end user. Isn’t it?


The Solution

Find solution concept

Create a Sitecore Form

Create a form with the desired field type, e.g. number and add classes on both the label and the input field. In my case I have used .gm-phone-no-field you are open to adapt to any as per your need. And drop the component on your Page.

I am a big fan of Sitecore Experience Accelerator, so I am using SXA.

11-14-2019 8-04-47 PM

Adding the Assets

Now you see that your input field is there. You need to add the library files in your existing theme for your Website.

11-14-2019 8-02-34 PM

Put the CSS in css folder, SCSS in scss and Javascript in scripts folder in your theme.

11-14-2019 8-02-56 PM

And don’t forget to add the images in the respective directory for your images or the flag icons won’t show up in your Input Number field you want to create.

11-14-2019 8-01-41 PM

Initializing the International Text Input

This is the main part. Though your initialization is not too much to handle but you will be sad to know that the International Text Input does show the flag and the number but when you submit it, you don’t find the codes along with your phone number in your Sitecore Forms data.

sad-giphy.gif

    // Sitecore form init
    var input = document.querySelector(".gm-phone-no-field");
    window.intlTelInput(input, {
        separateDialCode: true,
        utilsScript: "utils.js",
    });

Well this is not what I was hoping for. So, I dig in a bit and found the cure for this.

Updating the International Text Input Init Script

I found that the Phone Code is separately updated in the generated DOM by the International Text Input. So I grabbed that code and injected it into my text field that was responsible for taking the input for my form.

    input.addEventListener("countrychange", function () {
        var inputVal = jQuery('.iti__selected-dial-code').text();
        jQuery(".gm-phone-no-field").val(inputVal);
    });

I also write some CSS to look it as per my design.

11-14-2019 9-21-30 PM

Bouns, Update the Flags as you type

Isn’t it cool? There are different types of users who prefers all keyboard. So they just press TAB , TAB and TAB to fill the form quickly. They might want to put the phone number along with the Phone Code by themselves. So I tweaked it a bit to change the Country flags as they type. e.g. if you write +971 the flag will automatically be updated to United Arab Emirates flag. This is what I did.

    $('.gm-phone-no-field > li').click(function () {
        setTimeout(function () {
            var title = $('.selected-flag').attr('title');
            $("[data-type='hidden'] .input .form-control").val(title);
        });
    });

The final results looked like this. Here is the gist for fast initializating the International Text Input.

11-14-2019-9-22-46-pm.png


Feel free, to use it and share your feedback if you find it useful. Cheers!

Reference Links

Sitecore Experience Platform 9.2 Initial Release
Sitecore SXA 1.9.0
International Text Input
Sitecore forms

How To Implement Series for SXA

Don’t forget to check my previous articles for SXA.

How to add the PreLoader in SXA sites – How To Implement Series
Why Clone a Sitecore Component instead of Rendering Variant in SXA – How To Implement Series

2 thoughts on “Add an International telephone input field with Flags and Dial Codes in Sitecore Forms – How To Implement Series

Share what's in your Mind :)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.