Custom code para validar números de teléfono en checkout de Funnelish

yassine · May 13, 2026, 8:20pm

¡Hola! Esto se puede hacer con un pequeño script personalizado. Te explico:

Paso 1 — Crear el mensaje de error oculto

Arrastrá un elemento Headline debajo del campo del teléfono.
Escribí el texto: “Tu número debe contener 10 dígitos” y ponelo en rojo (queda muy bien con #dc2626).
En la sección Visibility, desactivá los tres íconos (desktop, tablet, mobile) para que los clientes no lo vean al cargar la página.
Activá “Keep on the editor?” para seguir viéndolo mientras editás.
Hacé clic en el botón .CSS arriba del panel y agregá la clase: phone-error-msg

Paso 2 — Agregar el código

Abre la sección Custom CSS / JS, ve a la pestaña Body HTML y pega el siguiente código:

<script>
(function() {
  function initPhoneValidation() {
    var phoneInput = document.querySelector('input[name="phone"]');
    var errorMsg = document.querySelector('.phone-error-msg');

    if (!phoneInput || !errorMsg) {
      setTimeout(initPhoneValidation, 300);
      return;
    }

    // Force hidden on the live page
    errorMsg.style.display = 'none';

    function validatePhone() {
      var digits = phoneInput.value.replace(/\D/g, '');

      if (digits.length > 0 && digits.length < 10) {
        errorMsg.style.display = 'block';
        errorMsg.textContent = 'Te faltan ' + (10 - digits.length) + ' dígitos. Tu número debe contener 10 dígitos.';
      } else if (digits.length > 10) {
        errorMsg.style.display = 'block';
        errorMsg.textContent = 'Tu número debe contener exactamente 10 dígitos.';
      } else {
        errorMsg.style.display = 'none';
      }
    }

    phoneInput.addEventListener('input', validatePhone);
    phoneInput.addEventListener('blur', validatePhone);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initPhoneValidation);
  } else {
    initPhoneValidation();
  }
})();
</script>

El script revisa cada vez que el cliente escribe en el campo del teléfono, cuenta solo los dígitos (ignora espacios o guiones), y le muestra cuántos números le faltan. Cuando llega a 10 exactos, el mensaje desaparece automáticamente.

Cualquier duda o si tienes algún problema al implementarlo, no dudes en avisarnos. ¡Estamos para ayudarte!