¿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><!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario con Teléfono Internacional</title>
<!-- CSS y JS para el selector de teléfono -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/css/intlTelInput.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/intlTelInput.min.js"></script>
<style>
/* 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;
}
}
</style>
</head>
<body>
<div class="sagicc-form-container">
<div class="sagicc-form">
<h2 class="sagicc-form-title">Contáctanos</h2>
<form id="sagicc-contact-form" action="https://TU_SUBDOMINIO.sagicc.co/api/v2/canal-website/website-callback" method="post" enctype="multipart/form-data">
<!-- Token de Sagicc - REEMPLAZAR -->
<input type="hidden" id="sagicc_token" name="sagicc_token" value="TU_TOKEN_AQUI">
<!-- Campos para nombre y apellido separados -->
<input type="hidden" id="nombre" name="nombre">
<input type="hidden" id="apellido" name="apellido">
<div class="sagicc-form-group">
<input type="text" id="nombreCompleto" name="nombreCompleto" class="sagicc-form-input" placeholder="Nombre completo" required>
<div class="sagicc-form-error" id="error-nombre">Por favor, ingresa tu nombre completo</div>
</div>
<div class="sagicc-form-group">
<input type="email" id="email" name="email" class="sagicc-form-input" placeholder="Correo electrónico" required>
<div class="sagicc-form-error" id="error-email">Por favor, ingresa un email válido</div>
</div>
<div class="sagicc-form-group">
<input type="text" id="empresa" name="empresa" class="sagicc-form-input" placeholder="Nombre de tu empresa">
</div>
<div class="sagicc-form-group">
<select id="interes" name="interes" class="sagicc-form-select" required>
<option value="">¿En qué podemos ayudarte?</option>
<option value="demo">Solicitar una demo</option>
<option value="pricing">Información de precios</option>
<option value="support">Soporte técnico</option>
<option value="other">Otro</option>
</select>
<div class="sagicc-form-error" id="error-interes">Por favor, selecciona una opción</div>
</div>
<!-- Campo de teléfono con selector de país -->
<div class="sagicc-form-group">
<div class="sagicc-phone-container">
<input type="tel" id="telefono" name="telefono" placeholder="Número de teléfono" required>
<div class="sagicc-form-error" id="error-telefono">Por favor, ingresa un número de teléfono válido</div>
</div>
</div>
<button type="submit" class="sagicc-form-button">Enviar mensaje</button>
<div class="sagicc-form-loading" id="loading">Enviando mensaje...</div>
<div class="sagicc-form-success" id="success">¡Mensaje enviado correctamente! Te contactaremos pronto.</div>
<p class="sagicc-privacy-text">
Al enviar este formulario aceptas nuestra
<a href="#" target="_blank">Política de Privacidad</a>
</p>
</form>
</div>
</div>
<script>
// 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: ["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[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 => {
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 = /^[^\s@]+@[^\s@]+\.[^\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 => response.json())
.then(data => {
document.getElementById('loading').style.display = 'none';
if (data.status === 200 && 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 => {
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);
});
}
});
</script>
</body>
</html>
</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.jsse 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! 📞✨
