To achieve something like this.
#1. First, find Form Block ID.
In my example, it is: #block-yui_3_17_2_1_1736910082147_12831
#2. Use this code to Code Injection > Footer
If code doesn’t work, you can comment below, message or send me an email.
<script>
let phoneInput;
window.addEventListener("load", () => {
phoneInput = document.querySelector('#block-41e96719d54297bfb83d .phone input[inputmode="numeric"]');
if (phoneInput) {
phoneInput.setAttribute('type', 'tel');
phoneInput.setAttribute('pattern', '[0-9]*');
phoneInput.setAttribute('maxlength', '9');
phoneInput.addEventListener('input', updatePhoneValue);
phoneInput.addEventListener('change', updatePhoneValue);
phoneInput.addEventListener('blur', updatePhoneValue);
}
});
function updatePhoneValue(e) {
let value = e.target.value.replace(/\D/g, '');
if (value.length > 9) {
value = value.slice(0, 9);
let messageBox = phoneInput.parentNode.querySelector('.message-limit');
if (!messageBox) {
messageBox = document.createElement('div');
messageBox.className = 'message-limit';
messageBox.style.cssText = 'color:red; font-size:16px; margin-top:15px;';
messageBox.textContent = 'Please enter maximum 9 digits';
phoneInput.parentNode.insertBefore(messageBox, phoneInput.nextElementSibling);
}
} else {
let messageBox = phoneInput.parentNode.querySelector('.message-limit');
if (messageBox) {
messageBox.remove();
}
}
phoneInput.value = value;
phoneInput.setAttribute('value', value);
let event = new Event('input', {
bubbles: true,
cancelable: true,
});
phoneInput.dispatchEvent(event);
}
</script>
#3. Remember to change Form Block ID.
Change error text/style here.
Set limit of number here.
