You can make phone number input fields in forms more user-friendly by adding visual elements. The enhancements will not affect the data.  

By applying the steps below, you can achieve the following effects in your phone number field: 

  • Country flag will appear for each country code 
  • The name of the country will appear in the localized language in addition to English 
  • The phone number will be formatted and validated for the selected country 

Prerequisites: Create a table that stores phone numbers in a Text (255) data type field. 

Sample table design: 

Steps: 

  1. Create a Submission Form based on the same data source as the phone number field. 
  2. Optional – number validation: On the Configure Fields screen of the DataPage wizard, insert an HTML Block. Disable the HTML Editor and paste the following code: 
  1. To add formatting, insert a Header & Footer element. Disable the HTML Editor and paste the following code in the header: 
  1. Depending on whether you added phone number validation in step 2, use one of the following codes in the footer: 
    • If you added validation, paste the following code in the footer:  
    • If you skipped step 2 and did not add validation, paste the following code in the footer:   
  1. In the code pasted in the footer, replace the two values that have InsertRecord prefix with your own relevant field names for phone number and country. 
     
    Example: If your phone number field name is phone1, replace InsertRecordPhone_Number with InsertRecordphone1 
  2. Proceed in the DataPage wizard to the end. Click Save. 

Note: You can follow this procedure to enhance Update Form DataPages in the same way. The only change is in step 4: in the pasted code, replace InsertRecord prefix with EditRecord.

 

Related article:

https://howto.caspio.com/datapages/ajax-loading/

Note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge’s standard feature set. These solutions are provided “as is” without warranty, support, or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.

For assistance with further customization based on your specific application requirements, please contact our Professional Services team.

code1
<!-- For label of Validation --> 

 

<span id="valid-msg" class="hide" style="white-space: nowrap;">✓ Valid</span> 

<span id="error-msg" class="hide" style="white-space: nowrap;">Invalid number</span> 
code2
<!-- For CSS and JS plugins --> 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/js/intlTelInput.js"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js"></script> 

<link href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/css/intlTelInput.css" rel="stylesheet" /> 

 

<!-- Style for the flag dropdowns --> 

 

 

<style> 

 

.hide{ 

  display:none; 

} 

 

.iti__country { 

    padding: 5px 10px !important; 

    outline: none !important; 

} 

 

ul#iti-0__country-listbox { 

    list-style-type: none !important; 

} 

 

</style> 
code3
<!-- to know more options, visit this link https://github.com/jackocnr/intl-tel-input --> 

 

<script> 

document.addEventListener('DataPageReady', function (evnt) { 

 

  var input = document.querySelector('input[name="InsertRecordPhone_Number"]'); 

  var iti = window.intlTelInput(input, { 

    formatOnDisplay: true, 

    hiddenInput: "full_number", 

    preferredCountries: ['es','us','ph'], 

    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.14/js/utils.js" 

  }); 

 

 

  $(input).on("countrychange", function(event) { 

 

    // Get the selected country data to know which country is selected. 

    var selectedCountryData = iti.getSelectedCountryData(); 

 

    // Get an example number for the selected country to use as a placeholder. 

    newPlaceholder = intlTelInputUtils.getExampleNumber(selectedCountryData.iso2, true, intlTelInputUtils.numberFormat.INTERNATIONAL), 

 

      // Reset the phone number input. 

      iti.setNumber(""); 

 

    // Convert placeholder as an exploitable mask by replacing all 1-9 numbers with 0s 

    mask = newPlaceholder.replace(/[1-9]/g, "0"); 

 

    // Apply the new mask for the input 

    $(this).mask(mask); 

  }); 

 

  iti.promise.then(function() { 

    $(input).trigger("countrychange"); 

  }); 

 

 

var  errorMsg = document.querySelector("#error-msg"); 

var  validMsg = document.querySelector("#valid-msg"); 

 

var errorMap = ["Invalid number", "Invalid country code", "Too short", "undefined"]; 

 

var reset = function() { 

  input.classList.remove("error"); 

  errorMsg.innerHTML = ""; 

  errorMsg.classList.add("hide"); 

  validMsg.classList.add("hide"); 

}; 

 

// on keyup: validate 

input.addEventListener('keyup', function() { 

  reset(); 

  if (input.value.trim()) { 

    if (iti.isValidNumber()) { 

      validMsg.classList.remove("hide"); 

    } else { 

      input.classList.add("error"); 

      var errorCode = iti.getValidationError(); 

      errorMsg.innerHTML = errorMap[errorCode]; 

      errorMsg.classList.remove("hide"); 

    } 

  } 

}); 

 

input.addEventListener('input', function() {  

      var countryName = iti.getSelectedCountryData().name; 

      document.getElementById('InsertRecordCountry').value = countryName; 

    }); 

 

// prevent the form from submitting if there's an error 

document.addEventListener('BeforeFormSubmit', function(ev) { 

   

  if (errorMap.includes(errorMsg.innerHTML)) { 

   

    alert ('Phone number is invalid. Try Again!'); 

    ev.preventDefault(); 

   

  } 

 

}); 

 

}); 

</script> 
code4
<!-- to know more options, visit this link https://github.com/jackocnr/intl-tel-input  --> 

 

<script> 

document.addEventListener('DataPageReady', function (evntevent) { 

 

  var input = document.querySelector('input[name="InsertRecordPhone_Number"]'); 

  var iti = window.intlTelInput(input, { 

    formatOnDisplay: true, 

    hiddenInput: "full_number", 

    preferredCountries: ['es','us','ph'], 

    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.14/js/utils.js" 

  }); 

 

 

  $(input).on("countrychange", function(event) { 

 

    // Get the selected country data to know which country is selected. 

    var selectedCountryData = iti.getSelectedCountryData(); 

 

    // Get an example number for the selected country to use as a placeholder. 

    newPlaceholder = intlTelInputUtils.getExampleNumber(selectedCountryData.iso2, true, intlTelInputUtils.numberFormat.INTERNATIONAL), 

 

      // Reset the phone number input. 

      iti.setNumber(""); 

 

    // Convert placeholder as an exploitable mask by replacing all 1-9 numbers with 0s 

    mask = newPlaceholder.replace(/[1-9]/g, "0"); 

 

    // Apply the new mask for the input 

    $(this).mask(mask); 

  }); 

 

  iti.promise.then(function() { 

    $(input).trigger("countrychange"); 

  }); 

 

input.addEventListener('input', function() {  

      var countryName = iti.getSelectedCountryData().name; 

      document.getElementById('InsertRecordCountry').value = countryName; 

    }); 

 

}); 

</script>