Converting a phone field to Country Dropdown

Please note that this is now available as a plugin for easier installation. While you can use this document as a reference, the recommended method to add this functionality is through the plugin installation wizard. Learn more about plugins here. 

To convert a text field to a dynamic phone number field, you can use a library created by Twilio to achieve this. 

1) Add the following code to the header of your app: 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.1/build/css/intlTelInput.css">
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.1/build/js/intlTelInput.min.js"></script>

2) Next, get the Component_iD and the Field ID and paste this code in the Javascript of the page: 

/* BE SURE TO CHANGE component_3 to the proper component id*/

TB.render('component_3', function(data) {
	setTimeout(function(){
	    
        /* Text field. Change this to the ID of the Text field you're using */
        var inputText = jQuery("input#field53GN6vNzxo");
        
        const iti = window.intlTelInput(inputText[0], {
            utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.1/build/js/utils.js",
        });
        
        var countryCode = '';
        inputText.on("countrychange", function(e) {
            countryCode = iti.getSelectedCountryData().dialCode;
            if(countryCode != undefined){
               inputText.val('+'+countryCode+' ');
            }
        });
    })
});