Cómo agregar un campo de teléfono con código de país a tu formulario en Sagicc

Esta guía te permitirá implementar un formulario web profesional que captura números de teléfono con validación internacional, garantizando que los datos lleguen a tu campaña de Sagicc con el formato E.164 correcto (ej: +573001234567).

Para lograr una validación precisa y una interfaz de usuario impecable, esta solución utiliza la librería de código abierto intl-tel-input (GitHub Oficial), desarrollada por Jack O’Connor, la cual es el estándar de la industria para el manejo de prefijos telefónicos globales.

1. Requisitos Previos

Antes de comenzar, asegúrate de tener:

  • Cuenta Sagicc: Acceso administrativo.
  • Campaña Activa: Creada y configurada en el panel de Sagicc.
  • Canal Website: Creado específicamente para este formulario.
  • Token del Canal: El identificador único que vinculará tu sitio con la campaña.

2. Configuración en Sagicc

  1. Campaña: Ve a Campañas y crea una nueva (ej: Formulario Web - Contacto Internacional).
  2. Canal: Dirígete a Canales → Crear nuevo canal.
    • Selecciona tipo: Website.
    • Nombre: Canal Web - Formulario Teléfono.
    • Asocia la campaña anterior.
  3. Token: Copia el Token generado.

3. Implementación: Compatibilidad Universal (Elementor, WordPress, Frameworks JS)

Este código está diseñado para ser agnóstico al framework. Puedes insertarlo en cualquier entorno web (Elementor, React, Vue, HTML puro, o CMS como WordPress) simplemente pegando el bloque de código en un contenedor de HTML Personalizado.

¿Por qué funciona en cualquier sitio?

  • Independencia: Al no depender de librerías internas del CMS (como los widgets de formularios nativos de Elementor que a veces limitan la validación personalizada), el código corre directamente en el navegador del usuario.
  • Carga desde CDN: Las librerías de intl-tel-input se cargan de forma externa, asegurando que el selector funcione sin importar si usas WordPress, un sitio estático o una aplicación en Next.js.
  • Estilos aislados: Los estilos están encapsulados con el prefijo sagicc- para evitar que el CSS de tu plantilla (ej: Astra, OceanWP, Hello Elementor) interfiera con la apariencia del formulario.

Pasos de Implementación:

  1. En Elementor: Arrastra el widget “HTML” a tu página. Pega el código de abajo.
  2. En WordPress (Bloques): Añade un bloque llamado “HTML Personalizado” y pega el código.
  3. En Frameworks JS (React/Vue/Angular): Puedes colocar este código dentro de un componente useEffect (en React) o en el ciclo de vida onMounted (en Vue) para asegurar que el DOM esté cargado.
<div class="sagicc-form-container">
    <form id="sagicc-contact-form" action="https://TU_SUBDOMINIO.sagicc.co/api/v2/canal-website/website-callback" method="post">
        <!-- Tokens y Campos Ocultos -->
        <input type="hidden" name="sagicc_token" value="TU_TOKEN_AQUI">
        <input type="text" name="website_check" style="display:none;" tabindex="-1" autocomplete="off">
        
        <div class="sagicc-form-group">
            <input type="text" name="nombreCompleto" class="sagicc-form-input" placeholder="Nombre completo" required>
        </div>
        
        <div class="sagicc-form-group">
            <input type="tel" id="telefono" name="telefono" class="sagicc-form-input" required>
            <div class="sagicc-form-error" id="error-telefono" style="display:none; color:red;">Número inválido</div>
        </div>

        <button type="submit" class="sagicc-form-button">Enviar mensaje</button>
    </form>
</div>

<script>
    // Inicialización del selector utilizando la librería oficial
    const phoneInput = document.querySelector("#telefono");
    const iti = window.intlTelInput(phoneInput, {
        initialCountry: "co",
        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js"
    });

    document.getElementById('sagicc-contact-form').addEventListener('submit', function(e) {
        if (!iti.isValidNumber()) {
            e.preventDefault();
            document.getElementById('error-telefono').style.display = 'block';
        } else {
            phoneInput.value = iti.getNumber();
        }
    });
</script>

4. Recomendaciones de Seguridad y Mantenimiento

  • Protección Anti-Spam: He incluido un campo website_check oculto (honeypot). Los bots llenarán este campo automáticamente; si recibes un registro con este campo lleno, puedes descartarlo en tu base de datos o lógica de servidor.
  • Validación en Servidor: Aunque el frontend valida el formato utilizando la lógica oficial de Google Libphonenumber provista por la librería, confía siempre en la validación final que realiza el backend de Sagicc.
  • CORS: Si al enviar el formulario recibes un error en la consola (F12), verifica que tu dominio de origen esté autorizado en los ajustes de tu cuenta Sagicc.

5. Solución de Problemas Comunes

ProblemaSolución
Estilos rotosSi tu tema de WordPress fuerza estilos, añade !important a las reglas CSS en el <style>.
Conflicto de JSAsegúrate de no tener otra versión de intl-tel-input cargada en tu plantilla.
Formulario no envíaVerifica que el Token y la URL del subdominio estén correctos y no tengan espacios.

6. Recursos del Desarrollador