Limit Number field to 10 numbers

To limit Number field to 10 numbers, like this.

#1. First, edit Form Block > Add a Number field

#2. Add your label, description, value

#3. Use this code to Page Header Injection (Page where you use Form Block)

<!-- Form Block Number Field - @tuanphan - 21-09-2025 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        const phoneField = document.querySelector('.form-block .number');
        
        if(phoneField) {
            const phoneInput = phoneField.querySelector('input');
            const errorMessage = document.createElement('div');
            errorMessage.className = 'error-message';
            errorMessage.textContent = 'Please enter 10 numbers. You entered X only';
            errorMessage.style.color = 'red';
            errorMessage.style.fontSize = '14px';
            errorMessage.style.marginTop = '5px';
            errorMessage.style.display = 'none';
            phoneField.appendChild(errorMessage);

            function validatePhone() {
                const phoneValue = phoneInput.value.replace(/\D/g, '');
                
                if(phoneValue.length > 0 && phoneValue.length !== 10) {
                    phoneInput.classList.add('has-error');
                    errorMessage.textContent = `Please enter 10 numbers. You entered ${phoneValue.length} only`;
                    errorMessage.style.display = 'block';
                    phoneInput.setAttribute('aria-invalid', 'true');
                } else {
                    phoneInput.classList.remove('has-error');
                    errorMessage.style.display = 'none';
                    phoneInput.setAttribute('aria-invalid', 'false');
                }
            }

            phoneInput.addEventListener('input', function(e) {
                let value = e.target.value.replace(/\D/g, '');
                if(value.length > 10) {
                    value = value.substring(0, 10);
                }
                e.target.value = value;
                validatePhone();
            });

            phoneInput.addEventListener('blur', validatePhone);

            const form = phoneField.closest('form');
            if(form) {
                form.addEventListener('submit', function(e) {
                    validatePhone();
                    if(phoneInput.classList.contains('has-error')) {
                        e.preventDefault();
                        phoneInput.focus();
                    }
                });
            }
        }
    }, 1000);
});
</script>

#4. You can update error text here.