Dynamically change country code for phone number in real-time marketing form

With the latest update (1.1.43992.110) in Customer Insights Journeys, a subtle improvement has been introduced for real-time marketing forms: Country code for phone numbers.

This allows us to simplify the entry of the phone number. Simply enter the correct country code in the form. And once the code is preset, form submissions will no longer fail if an incorrect phone number format is entered.

But: The country code value is static.

However, each country has its own country code. And for international customers in particular, it must be possible for the values to change depending on the customer’s country.

Since I’m currently in Javascript-mood, I’ve added another one that changes the country code – depending on the country the customer selects. The country field in my example is an option set. 

Create real-time marketing form with telephone number and country code

I set the Business Phone field on the real-time marketing form in Customer Insights Journeys and add the country code in the settings. Here you can already see that I can only enter one fixed value.

I also added an option set with my countries to the form (note: this is not a complete list. Entering almost 300 countries was just a bit too much work for the example).

Form realtime marketing

Create Javascript for real-time marketing form

In the HTML of the Business Phones field you can see that there are two attributes that contain the country code. If I only change the class phoneCountryCodeLabel via the javascript, I run into the problem that the contact record that is created or updated still contains +49 in the phone field. So just changing the label is just a change in the frontend, it looks correct but it doesn’t transfer the value correctly.

This is why the Javascript must also adapt the data-countrycode based on the country.

HTML for phone and country code

I then add the Javascript. If you have more countries, you have to add them to the variable countryPhonePrefixes.

				
					<safe-script style="display: none;">
document.addEventListener("d365mkt-afterformload", function() {
    const countrySelect = document.getElementById('pk_countrycode-1719506023770');
    const phonePrefixSpan = document.querySelector('.phoneCountryCodeLabel');
    const phoneInputDiv = document.querySelector('.phoneFormFieldBlock');

    const countryPhonePrefixes = {
        '125550000': '+376', // Andorra
        '125550001': '+32',  // Belgium
        '125550002': '+358', // Finland
        '125550005': '+33',  // France
        '125550003': '+49',  // Germany
        '125550008': '+39',  // Italy
        '125550010': '+47',  // Norway
        '125550007': '+351', // Portugal
        '125550006': '+34',  // Spain
        '125550009': '+46',  // Sweden
        '125550004': '+44'   // UK
    };

    countrySelect.addEventListener('change', function () {
        const selectedValue = countrySelect.value;
        if (countryPhonePrefixes.hasOwnProperty(selectedValue)) {
            const newPrefix = countryPhonePrefixes[selectedValue];
            phonePrefixSpan.textContent = newPrefix;
            phoneInputDiv.setAttribute('data-countrycode', newPrefix);
        } else {
            phonePrefixSpan.textContent = ''; // Default to empty if no match found
            phoneInputDiv.removeAttribute('data-countrycode');
        }
    });
});

    </safe-script>
				
			

Summary

The new country code function in Customer Insights Journeys is a very nice addition, I think it’s great. And it even looks nice in the standard real-time marketing form (when you use a new template).

With the Javascript we can now also dynamically adjust the country code. I have done it with a country option set, alternatively it is of course also possible with a lookup for countries.

If you need more Javascript for your real-time marketing forms, have a look in the library: Click here.

***Please be aware: The content is accurate at the time of creation. It may be that Microsoft has made changes in the meantime.***

Check out the FAQ section of my blog as well: Short questions with quick answers! Go to FAQs

You think the post can also help others? Share it on LinkedIn:

Leave a Reply

Your email address will not be published. Required fields are marked *

WordPress Cookie Notice by Real Cookie Banner