Make Phone Number Field Mandatory in Web Form & Widget

To make the Phone Number field mandatory in the web form or widget, paste the code below into the web form’s Custom JS section (Advanced Settings for Configuring Contact us Web Form) and click on the “Update” button.

Code for making the phone number field mandatory

var phoneNumberField = document.querySelector('.widget-feedback-form-container .phone-number-field');
var mandatoryElement = document.createElement('span');
mandatoryElement.innerText = '*';
mandatoryElement.classList.add("e-error", "pl-1");
phoneNumberField.querySelector('.col').appendChild(mandatoryElement);
var inputElement = phoneNumberField.querySelector('input');
inputElement.addEventListener('blur', () => {
   phoneNumberBlur();
});

inputElement.addEventListener('input', () => {
   phoneNumberBlur();
});

function phoneNumberBlur() {
   var errorEle = phoneNumberField.querySelector('#phoneNumber_wrapper .custom-error span')
   if (!inputElement.value && errorEle) {
       errorEle.innerText = "This field is required.";
       errorEle.classList.add('custom-error-appended');
   } else {
       errorEle.innerText = "";
       errorEle.classList.remove('custom-error-appended');
   }
}

let timeInterval = setInterval(() => {
   if (feedbackformWidget) {
       clearInterval(timeInterval);
       setTimeout(() => {
           Object.getPrototypeOf(feedbackformWidget).removeErrorClass = function (id) {
               const ele = document.querySelector('#' + id);
               if (ele && id !== "phoneNumber_wrapper") {
                   const errorEle = ele.querySelector('.custom-error span.e-error');
                   if (errorEle) {
                       if (errorEle.classList.contains('custom-error-appended')) {
                           errorEle.classList.remove('custom-error-appended');
                           errorEle.innerText = '';
                       }
                   }
               }
           };
       });
   }
}, 100)

var buttonEle = document.querySelector('#feedback-widget-form-update-btn');
if (buttonEle) {
   buttonEle.addEventListener('click', () => {
       phoneNumberBlur();
   });
} 

Furthermore, if you want to change the phone number field display name to WhatsApp number display name, you can use the code below.

Code for changing the phone number field label.

var phoneNumberLabel = document.querySelector('.phone-number-field .custom-field-label');
if(phoneNumberLabel)

{

phoneNumberLabel.innerText = "WhatsApp Number";

} 

Related articles

1. Advanced Settings for Configuring Help Widget