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

¿Quieres capturar números de teléfono internacionales en tu formulario web conectado a Sagicc? Te mostramos cómo implementar un selector de país profesional que valida automáticamente los números y los envía con el formato correcto.

¿Qué vas a necesitar? #

Acceso a tu cuenta de Sagicc
Un sitio web donde incrustar el formulario
Tener creada una campaña en Sagicc
Crear un canal tipo Website

Paso 1: Configuración en Sagicc #

Crear tu campaña #

Ve a la sección Campañas en tu panel de Sagicc
Crea una nueva campaña, por ejemplo: Formulario Web - Teléfonos
Esta campaña recibirá todos los datos del formulario

Crear canal Website #

Ve a Canales → Crear nuevo canal
Selecciona Tipo: Website
Nómbralo como: Canal Web - Formulario Teléfono
Asocia la campaña que acabas de crear
Importante: Copia el Token que se genera, lo necesitarás más adelante

Paso 2: El código del formulario con selector de país #

Aquí tienes el código completo del formulario con campo de teléfono internacional:

Código del Formulario 👇

<!-- wp:code -->
<pre class="wp-block-code"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="es"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Formulario con Teléfono Internacional&lt;/title&gt;
    
    &lt;!-- CSS y JS para el selector de teléfono --&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/css/intlTelInput.css"&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/intlTelInput.min.js"&gt;&lt;/script&gt;
    
    &lt;style&gt;
        /* Estilos específicos para el formulario Sagicc */
        .sagicc-form-container {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 500px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .sagicc-form {
            background: #ffffff;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            border: 1px solid #e5e7eb;
        }
        
        .sagicc-form-title {
            text-align: center;
            color: #1f2937;
            margin-bottom: 25px;
            font-size: 24px;
            font-weight: 600;
        }
        
        .sagicc-form-group {
            margin-bottom: 20px;
        }
        
        .sagicc-form-input {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #d1d5db;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }
        
        .sagicc-form-input:focus {
            outline: none;
            border-color: #3b82f6;
        }
        
        .sagicc-form-select {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #d1d5db;
            border-radius: 8px;
            font-size: 16px;
            background: white;
            cursor: pointer;
        }
        
        .sagicc-form-select:focus {
            outline: none;
            border-color: #3b82f6;
        }
        
        /* Estilos específicos para el campo de teléfono */
        .sagicc-phone-container {
            position: relative;
        }
        
        .sagicc-phone-container .intl-tel-input {
            width: 100%;
        }
        
        .sagicc-phone-container .intl-tel-input .iti__flag-container {
            border-radius: 8px 0 0 8px;
        }
        
        .sagicc-phone-container #telefono {
            width: 100%;
            padding: 12px 16px;
            padding-left: 60px;
            border: 2px solid #d1d5db;
            border-radius: 8px;
            font-size: 16px;
        }
        
        .sagicc-phone-container #telefono:focus {
            outline: none;
            border-color: #3b82f6;
        }
        
        .sagicc-form-button {
            width: 100%;
            padding: 14px;
            background: #3b82f6;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        
        .sagicc-form-button:hover {
            background: #2563eb;
        }
        
        .sagicc-form-button:disabled {
            background: #9ca3af;
            cursor: not-allowed;
        }
        
        .sagicc-form-error {
            color: #ef4444;
            font-size: 14px;
            margin-top: 5px;
            display: none;
        }
        
        .sagicc-form-loading {
            display: none;
            text-align: center;
            padding: 15px;
            color: #3b82f6;
            font-weight: 600;
        }
        
        .sagicc-form-success {
            display: none;
            text-align: center;
            padding: 15px;
            background: #d1fae5;
            color: #065f46;
            border-radius: 8px;
            margin-top: 15px;
        }
        
        .sagicc-privacy-text {
            text-align: center;
            font-size: 12px;
            color: #6b7280;
            margin-top: 15px;
            line-height: 1.4;
        }
        
        .sagicc-privacy-text a {
            color: #3b82f6;
            text-decoration: none;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .sagicc-form-container {
                padding: 15px;
            }
            
            .sagicc-form {
                padding: 20px;
            }
            
            .sagicc-form-title {
                font-size: 20px;
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="sagicc-form-container"&gt;
        &lt;div class="sagicc-form"&gt;
            &lt;h2 class="sagicc-form-title"&gt;Contáctanos&lt;/h2&gt;
            
            &lt;form id="sagicc-contact-form" action="https://TU_SUBDOMINIO.sagicc.co/api/v2/canal-website/website-callback" method="post" enctype="multipart/form-data"&gt;
                
                &lt;!-- Token de Sagicc - REEMPLAZAR --&gt;
                &lt;input type="hidden" id="sagicc_token" name="sagicc_token" value="TU_TOKEN_AQUI"&gt;
                
                &lt;!-- Campos para nombre y apellido separados --&gt;
                &lt;input type="hidden" id="nombre" name="nombre"&gt;
                &lt;input type="hidden" id="apellido" name="apellido"&gt;
                
                &lt;div class="sagicc-form-group"&gt;
                    &lt;input type="text" id="nombreCompleto" name="nombreCompleto" class="sagicc-form-input" placeholder="Nombre completo" required&gt;
                    &lt;div class="sagicc-form-error" id="error-nombre"&gt;Por favor, ingresa tu nombre completo&lt;/div&gt;
                &lt;/div&gt;
                
                &lt;div class="sagicc-form-group"&gt;
                    &lt;input type="email" id="email" name="email" class="sagicc-form-input" placeholder="Correo electrónico" required&gt;
                    &lt;div class="sagicc-form-error" id="error-email"&gt;Por favor, ingresa un email válido&lt;/div&gt;
                &lt;/div&gt;
                
                &lt;div class="sagicc-form-group"&gt;
                    &lt;input type="text" id="empresa" name="empresa" class="sagicc-form-input" placeholder="Nombre de tu empresa"&gt;
                &lt;/div&gt;
                
                &lt;div class="sagicc-form-group"&gt;
                    &lt;select id="interes" name="interes" class="sagicc-form-select" required&gt;
                        &lt;option value=""&gt;¿En qué podemos ayudarte?&lt;/option&gt;
                        &lt;option value="demo"&gt;Solicitar una demo&lt;/option&gt;
                        &lt;option value="pricing"&gt;Información de precios&lt;/option&gt;
                        &lt;option value="support"&gt;Soporte técnico&lt;/option&gt;
                        &lt;option value="other"&gt;Otro&lt;/option&gt;
                    &lt;/select&gt;
                    &lt;div class="sagicc-form-error" id="error-interes"&gt;Por favor, selecciona una opción&lt;/div&gt;
                &lt;/div&gt;
                
                &lt;!-- Campo de teléfono con selector de país --&gt;
                &lt;div class="sagicc-form-group"&gt;
                    &lt;div class="sagicc-phone-container"&gt;
                        &lt;input type="tel" id="telefono" name="telefono" placeholder="Número de teléfono" required&gt;
                        &lt;div class="sagicc-form-error" id="error-telefono"&gt;Por favor, ingresa un número de teléfono válido&lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                
                &lt;button type="submit" class="sagicc-form-button"&gt;Enviar mensaje&lt;/button&gt;
                
                &lt;div class="sagicc-form-loading" id="loading"&gt;Enviando mensaje...&lt;/div&gt;
                &lt;div class="sagicc-form-success" id="success"&gt;¡Mensaje enviado correctamente! Te contactaremos pronto.&lt;/div&gt;
                
                &lt;p class="sagicc-privacy-text"&gt;
                    Al enviar este formulario aceptas nuestra 
                    &lt;a href="#" target="_blank"&gt;Política de Privacidad&lt;/a&gt;
                &lt;/p&gt;
            &lt;/form&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;script&gt;
        // Inicializar el selector de teléfono internacional
        const phoneInput = document.querySelector("#telefono");
        const iti = window.intlTelInput(phoneInput, {
            // Configuración del selector de país
            initialCountry: "co", // País inicial (Colombia)
            preferredCountries: &#91;"co", "us", "mx", "pe", "cl", "ec", "ar"], // Países preferidos
            separateDialCode: true, // Mostrar código de país por separado
            utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js"
        });

        // Función para dividir nombre completo
        function splitFullName(fullName) {
            const parts = fullName.trim().split(' ');
            const firstName = parts&#91;0];
            const lastName = parts.slice(1).join(' ') || '-';
            return { firstName, lastName };
        }

        // Manejo del formulario
        document.getElementById('sagicc-contact-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Limpiar errores anteriores
            document.querySelectorAll('.sagicc-form-error').forEach(error =&gt; {
                error.style.display = 'none';
            });
            
            let hasErrors = false;
            
            // Validar nombre completo
            const nombreCompleto = document.getElementById('nombreCompleto').value.trim();
            if (!nombreCompleto) {
                document.getElementById('error-nombre').style.display = 'block';
                hasErrors = true;
            } else {
                const { firstName, lastName } = splitFullName(nombreCompleto);
                document.getElementById('nombre').value = firstName;
                document.getElementById('apellido').value = lastName;
            }
            
            // Validar email
            const email = document.getElementById('email').value.trim();
            const emailRegex = /^&#91;^\s@]+@&#91;^\s@]+\.&#91;^\s@]+$/;
            if (!email || !emailRegex.test(email)) {
                document.getElementById('error-email').style.display = 'block';
                hasErrors = true;
            }
            
            // Validar interés
            const interes = document.getElementById('interes').value;
            if (!interes) {
                document.getElementById('error-interes').style.display = 'block';
                hasErrors = true;
            }
            
            // Validar teléfono internacional
            if (!iti.isValidNumber()) {
                document.getElementById('error-telefono').style.display = 'block';
                hasErrors = true;
            } else {
                // Obtener el número completo con código de país
                const fullPhoneNumber = iti.getNumber();
                document.getElementById('telefono').value = fullPhoneNumber;
            }
            
            // Si no hay errores, enviar formulario
            if (!hasErrors) {
                document.getElementById('loading').style.display = 'block';
                
                const formData = new FormData(this);
                
                fetch(this.action, {
                    method: 'POST',
                    body: formData
                })
                .then(response =&gt; response.json())
                .then(data =&gt; {
                    document.getElementById('loading').style.display = 'none';
                    
                    if (data.status === 200 &amp;&amp; data.statusResult) {
                        document.getElementById('success').style.display = 'block';
                        this.reset();
                        // Reinicializar el selector de país después del reset
                        iti.setNumber("");
                    } else {
                        alert('Hubo un error al enviar el mensaje. Por favor, inténtalo de nuevo.');
                    }
                })
                .catch(error =&gt; {
                    document.getElementById('loading').style.display = 'none';
                    alert('Error de conexión. Por favor, verifica tu internet e inténtalo de nuevo.');
                    console.error('Error:', error);
                });
            }
        });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<!-- /wp:code -->

Paso 3: Personalizar el formulario #

Valores que DEBES reemplazar: #

1. Token de Sagicc #

<input type="hidden" id="sagicc_token" name="sagicc_token" value="TU_TOKEN_AQUI">

Reemplaza TU_TOKEN_AQUI con el token que copiaste de tu canal Website en Sagicc.

2. URL del endpoint #

<form id="sagicc-contact-form" action="https://TU_SUBDOMINIO.sagicc.co/api/v2/canal-website/website-callback">

Reemplaza TU_SUBDOMINIO con el subdominio de tu cuenta Sagicc (ej: miempresa.sagicc.co).

3. Enlace de Política de Privacidad #

<a href="#" target="_blank">Política de Privacidad</a>

Reemplaza # con la URL real de tu política de privacidad.

Personalizar países del selector #

Puedes cambiar los países que aparecen en el selector:

const iti = window.intlTelInput(phoneInput, {
    initialCountry: "co", // Cambia "co" por el código de tu país
    preferredCountries: ["co", "us", "mx"], // Agrega o quita países
    separateDialCode: true,
    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js"
});

Códigos de países comunes:

"co" – Colombia
"us" – Estados Unidos
"mx" – México
"pe" – Perú
"cl" – Chile
"ar" – Argentina
"ec" – Ecuador

Personalizar colores fácilmente #

Para cambiar los colores principales, modifica estas variables:

/* Color principal (botones y focus) */
.sagicc-form-button {
    background: #3b82f6; /* Cambia este color */
}

.sagicc-form-input:focus,
.sagicc-form-select:focus {
    border-color: #3b82f6; /* Usa el mismo color aquí */
}

/* Color de hover del botón */
.sagicc-form-button:hover {
    background: #2563eb; /* Un tono más oscuro del color principal */
}

Paso 4: Implementar en tu sitio web #

En WordPress: #

Copia todo el código HTML
Ve a la página donde quieres el formulario
Agrega un bloque “HTML personalizado”
Pega el código y publica

En HTML estático: #

Guarda el código como formulario-telefono.html
Súbelo a tu servidor web
¡Listo para usar!

Paso 5: Probar el formulario #

Selecciona diferentes países en el selector
Ingresa números de teléfono de diferentes formatos
Envía el formulario y verifica la validación
Revisa en Sagicc que el número llegue con el formato correcto: +57 300 123 4567

Funcionalidades del campo de teléfono #

Validación automática – Verifica que el número sea válido para el país seleccionado
Formato internacional – Envía el número con código de país: +57 300 123 4567
Países preferidos – Muestra primero los países más relevantes
Búsqueda de países – El usuario puede escribir para buscar un país
Auto-detección – Detecta el país basado en la IP del usuario
Responsive – Funciona perfectamente en móviles

Configuraciones avanzadas del selector #

Cambiar país inicial automáticamente: #

const iti = window.intlTelInput(phoneInput, {
    initialCountry: "auto", // Detecta automáticamente por IP
    geoIpLookup: function(success, failure) {
        fetch("https://ipapi.co/json")
            .then(response => response.json())
            .then(data => success(data.country_code))
            .catch(() => failure());
    },
});

Solo mostrar países específicos: #

const iti = window.intlTelInput(phoneInput, {
    onlyCountries: ["co", "us", "mx", "pe", "cl"], // Solo estos países
});

Excluir países específicos: #

const iti = window.intlTelInput(phoneInput, {
    excludeCountries: ["af", "ax"], // Excluir estos países
});

Solución de problemas comunes #

El selector de país no aparece:

Verifica que los archivos CSS y JS se carguen correctamente
Revisa la consola del navegador por errores

La validación no funciona:

Asegúrate de que utils.js se esté cargando
Verifica que la función iti.isValidNumber() esté siendo llamada

Los números no llegan con formato correcto:

Usa iti.getNumber() para obtener el número completo
Verifica que se asigne al campo antes de enviar

Conflictos de CSS:

Todos los estilos usan prefijo sagicc- para evitar conflictos
Puedes cambiar los prefijos si es necesario

Consejos adicionales #

Seguridad: El número se valida tanto en frontend como backend.

Móviles: El selector funciona perfectamente en dispositivos táctiles.

Internacionalización: Soporta más de 200 países automáticamente.

Performance: Los archivos se cargan desde CDN para máxima velocidad.

Personalización: Fácil de modificar colores y estilos sin afectar funcionalidad.

¡Ahora tienes un formulario con selector de teléfono internacional completamente funcional y conectado a Sagicc! 📞✨

Herramientas

Supervisión y Análisis

Administradores

Preguntas Frecuentes (FAQ)

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

¿Qué vas a necesitar? #

Paso 1: Configuración en Sagicc #

Crear tu campaña #

Crear canal Website #

Paso 2: El código del formulario con selector de país #

Paso 3: Personalizar el formulario #

Valores que DEBES reemplazar: #

1. Token de Sagicc #

2. URL del endpoint #

3. Enlace de Política de Privacidad #

Personalizar países del selector #

Personalizar colores fácilmente #

Paso 4: Implementar en tu sitio web #

En WordPress: #

En HTML estático: #

Paso 5: Probar el formulario #

Funcionalidades del campo de teléfono #

Configuraciones avanzadas del selector #

Cambiar país inicial automáticamente: #

Solo mostrar países específicos: #

Excluir países específicos: #

Solución de problemas comunes #

Consejos adicionales #

Conoce Sagicc

Políticas de Protección

Suscríbete a nuestra comunidad

Síguenos en nuestras redes

¿Qué vas a necesitar? #

Paso 1: Configuración en Sagicc #

Crear tu campaña #

Crear canal Website #

Paso 2: El código del formulario con selector de país #

Paso 3: Personalizar el formulario #

Valores que DEBES reemplazar: #

1. Token de Sagicc #

2. URL del endpoint #

3. Enlace de Política de Privacidad #

Personalizar países del selector #

Personalizar colores fácilmente #

Paso 4: Implementar en tu sitio web #

En WordPress: #

En HTML estático: #

Paso 5: Probar el formulario #

Funcionalidades del campo de teléfono #

Configuraciones avanzadas del selector #

Cambiar país inicial automáticamente: #

Solo mostrar países específicos: #

Excluir países específicos: #

Solución de problemas comunes #

Consejos adicionales #

Comparte este artículo:

Conoce Sagicc

Políticas de Protección

Suscríbete a nuestra comunidad

Síguenos en nuestras redes