Cómo crear un Formulario de contactos que enlace a WhatsApp
Integrar formulario WhatsApp en sitio web
Tutorial para enlazar contacto a WhatsApp
En un mundo donde la comunicación instantánea es clave, integrar WhatsApp en tu sitio web puede transformar la forma en que conectas con tus visitantes. Imagina un formulario de contacto que no solo recopila datos, sino que los envía directamente a tu WhatsApp, facilitando conversaciones reales y aumentando las conversiones.
¿Por Qué Crear un Formulario de Contacto que Enlace a WhatsApp?
Antes de sumergirnos en el cómo, entendamos el porqué. WhatsApp es una herramienta familiar para millones de usuarios, lo que reduce la fricción en el proceso de contacto. Un formulario bien diseñado no solo informa, sino que motiva al visitante a actuar, convirtiendo curiosos en clientes potenciales.
Este enfoque es perfecto para sitios web corporativos, tiendas online o portafolios, donde la captación de leads directos es esencial. Sin servidores intermedios ni bases de datos complejas, es una solución simple pero poderosa.
Características Destacadas del Formulario WhatsApp
Este formulario no es solo funcional; está diseñado para impresionar y convertir. A continuación, detallo sus características clave, agrupadas por categorías, para que veas cómo combina estética, usabilidad y tecnología.
Diseño Visual y UX/UI
El diseño es el primer gancho para el usuario, y este formulario destaca por su modernidad y facilidad de uso.
Estética Moderna y Profesional
Utiliza la paleta de colores de WhatsApp. El diseño tipo tarjeta incluye contenedores con bordes redondeados (20px) y sombras elegantes, creando una apariencia premium.
Responsive Design
Adaptación perfecta a móviles, tablets y escritorio gracias a media queries que ajustan elementos en pantallas menores a 768px. Los campos mantienen proporciones ideales, asegurando que el formulario sea accesible en cualquier dispositivo.
Nota Importante
Este tutorial funciona correctamente, no tendrá ningún inconveniente al momento de su instalación.
Garantizado y completamente funcionalDemo del Formulario WhatsApp
A continuación puedes ver y probar el formulario funcionando. Es el mismo que podrás implementar en tu sitio web:
Contáctanos por WhatsApp
Completa todos los campos y envíanoslo directamente por WhatsApp
Nota: Este es un demo funcional. Para usarlo en tu sitio, necesitarás configurar tu número de WhatsApp en el código JavaScript.
Antes de Empezar: ¡Haz una Copia de Seguridad!
⚠️ Importante: Antes de realizar cualquier cambio en el código de tu plantilla, SIEMPRE haz una copia de seguridad. Es tu red de seguridad por si algo sale mal.
- Ve a Tema en el menú de tu panel de Blogger.
- Haz clic en Crear copia de seguridad (ubicado en la esquina superior derecha).
- Guarda el archivo .xml en tu computadora.
Ayudadeblogger.com no se responsabiliza, si usted no realizo correctamente la inserción del código, para más detalles específicos, puede visitar el siguiente enlace:
Cómo Implementar el Formulario: Código y Configuración
Fácil instalación: Puedes copiar y pegar el código en un gadget de HTML/JavaScript, en una entrada de Blogger, en una página de Blogger, en el XML de tu plantilla, o en cualquier plataforma web.
Código HTML y CSS Completo
A continuación, el código completo para implementar el formulario:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary: #25D366;
--secondary: #128C7E;
--accent: #34B7F1;
--light: #f8f9fa;
--dark: #212529;
--shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
--error: #ff4444;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.form-container {
width: 100%;
max-width: 500px;
background: white;
border-radius: 20px;
box-shadow: var(--shadow);
overflow: hidden;
transition: transform 0.3s ease;
}
.form-container:hover {
transform: translateY(-5px);
}
.form-header {
background: #E3F3EF;
color: #212529;
padding: 30px;
text-align: center;
position: relative;
}
.form-header h1 {
font-size: 2rem;
margin-bottom: 10px;
font-weight: 700;
}
.form-header p {
opacity: 0.9;
font-size: 0.9rem;
}
.form-header::after {
content: '';
position: absolute;
bottom: -20px;
left: 0;
right: 0;
height: 40px;
background: white;
clip-path: ellipse(50% 50% at 50% 50%);
}
.form-body {
padding: 40px 30px 30px;
}
.form-group {
margin-bottom: 25px;
position: relative;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: var(--dark);
font-size: 0.9rem;
}
.form-group label::after {
content: ' *';
color: var(--error);
}
.form-control {
width: 100%;
padding: 15px;
border: 2px solid #e9ecef;
border-radius: 10px;
font-size: 1rem;
transition: all 0.3s ease;
background-color: #f8f9fa;
}
.form-control:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(52, 183, 241, 0.2);
outline: none;
background-color: white;
}
.form-control.error {
border-color: var(--error);
}
.error-message {
color: var(--error);
font-size: 0.8rem;
margin-top: 5px;
display: none;
}
textarea.form-control {
min-height: 120px;
resize: vertical;
}
.btn-whatsapp {
background-color: var(--primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 16px;
border-radius: 10px;
font-weight: 600;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
border: none;
font-size: 1rem;
text-decoration: none;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
margin-top: 10px;
}
.btn-whatsapp:hover {
background-color: var(--secondary);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}
.btn-whatsapp:disabled {
background-color: #cccccc;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.form-footer {
text-align: center;
margin-top: 25px;
font-size: 0.8rem;
color: #6c757d;
}
.floating-label {
position: absolute;
top: -10px;
left: 0px;
background: white;
padding: 6px 12px;
font-size: 0.8rem;
color: var(--accent);
font-weight: 600;
opacity: 0;
transition: all 0.3s ease;
}
.form-control:focus + .floating-label {
opacity: 1;
transform: translateY(-5px);
}
@media (max-width: 768px) {
.form-body {
padding: 30px 20px;
}
.form-header h1 {
font-size: 1.5rem;
}
}
</style>
<div class="form-container">
<div class="form-header">
<h1>Contáctanos por WhatsApp</h1>
<p>Completa todos los campos y envíanoslo directamente por WhatsApp</p>
</div>
<div class="form-body">
<form id="contactForm">
<div class="form-group">
<label for="name">Nombre completo</label>
<input type="text" id="name" class="form-control" placeholder="Juan Pérez" required>
<span class="floating-label">Nombre completo</span>
<div class="error-message" id="name-error">Este campo es requerido</div>
</div>
<div class="form-group">
<label for="email">Correo electrónico</label>
<input type="email" id="email" class="form-control" placeholder="juan@ejemplo.com" required>
<span class="floating-label">Correo electrónico</span>
<div class="error-message" id="email-error">Ingresa un email válido</div>
</div>
<div class="form-group">
<label for="phone">Teléfono</label>
<input type="tel" id="phone" class="form-control" placeholder="+52 55 1234 5678" required>
<span class="floating-label">Teléfono</span>
<div class="error-message" id="phone-error">Este campo es requerido</div>
</div>
<div class="form-group">
<label for="subject">Asunto</label>
<select id="subject" class="form-control" required>
<option value="" disabled selected>Selecciona una opción</option>
<option value="consulta">Consulta general</option>
<option value="soporte">Soporte técnico</option>
<option value="ventas">Información de ventas</option>
<option value="otro">Otro</option>
</select>
<span class="floating-label">Asunto</span>
<div class="error-message" id="subject-error">Selecciona una opción</div>
</div>
<div class="form-group">
<label for="message">Mensaje</label>
<textarea id="message" class="form-control" placeholder="Escribe tu mensaje aquí..." required></textarea>
<span class="floating-label">Mensaje</span>
<div class="error-message" id="message-error">Este campo es requerido</div>
</div>
<button type="button" id="whatsappBtn" class="btn-whatsapp">
<i class="fab fa-whatsapp"></i> Enviar por WhatsApp
</button>
</form>
<div class="form-footer">
<p>Todos los campos marcados con * son obligatorios</p>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const whatsappBtn = document.getElementById('whatsappBtn');
const form = document.getElementById('contactForm');
const inputs = form.querySelectorAll('input, select, textarea');
// Número de WhatsApp (reemplaza con tu número real en formato internacional sin +)
const phoneNumber = '593111111111';
// Capturar la URL completa de la página actual
const currentPageUrl = window.location.href;
// Validación en tiempo real
inputs.forEach(input => {
input.addEventListener('input', function() {
validateField(this);
checkFormValidity();
});
input.addEventListener('change', function() {
validateField(this);
checkFormValidity();
});
});
// Función para validar campos individuales
function validateField(field) {
const errorElement = document.getElementById(`${field.id}-error`);
if (field.required && !field.value.trim()) {
field.classList.add('error');
errorElement.style.display = 'block';
return false;
}
// Validación especial para email
if (field.type === 'email' && field.value.trim()) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(field.value)) {
field.classList.add('error');
errorElement.style.display = 'block';
return false;
}
}
field.classList.remove('error');
errorElement.style.display = 'none';
return true;
}
// Función para verificar si todo el formulario es válido
function checkFormValidity() {
let formIsValid = true;
inputs.forEach(input => {
if (!validateField(input)) {
formIsValid = false;
}
});
whatsappBtn.disabled = !formIsValid;
return formIsValid;
}
// Enviar por WhatsApp con mensaje mejor estructurado
whatsappBtn.addEventListener('click', function() {
if (!checkFormValidity()) return;
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const phone = document.getElementById('phone').value;
const subject = document.getElementById('subject').value;
const message = document.getElementById('message').value;
// Obtener la URL de la página actual
const pageUrl = currentPageUrl;
// Formato profesional del mensaje con URL incluida
const whatsappMessage = `📌 *NUEVO MENSAJE DE CONTACTO* 📌\n\n` +
`🔹 *Nombre completo:* ${name}\n` +
`🔹 *Correo electrónico:* ${email}\n` +
`🔹 *Teléfono de contacto:* ${phone}\n` +
`🔹 *Asunto:* ${subject}\n` +
`📝 *Mensaje:* ${message}\n\n` +
`🔗 *Enlace de la página:*\n${pageUrl}\n\n` +
`_Enviado desde el formulario de contacto web_`;
window.open(`https://wa.me/${phoneNumber}?text=${encodeURIComponent(whatsappMessage)}`, '_blank');
});
// Validación inicial
checkFormValidity();
});
</script>Configuración Importante: Recuerda cambiar el número de WhatsApp en el JavaScript: const phoneNumber = "593111111111"; Cambia por tu número real en formato internacional (sin el + inicial).
Flujo de Trabajo Completo
El proceso es intuitivo y eficiente:
- Usuario ingresa datos → Validación en tiempo real.
- Sistema verifica campos → Feedback visual inmediato.
- Botón se habilita → Solo cuando todo es válido.
- Click en WhatsApp → Captura URL + Formatea mensaje.
- Abre WhatsApp Web/App → Mensaje pre-escrito listo para enviar.
- Usuario confirma envío → Contacto directo establecido.
Ventajas Competitivas
Este formulario ofrece beneficios tangibles para todos los involucrados:
Para el Usuario
Proceso simplificado con un solo botón, confirmación visual del mensaje, sin necesidad de registro y familiaridad con WhatsApp.
Para el Negocio
Generación de leads directa a WhatsApp empresarial, información estructurada para procesamiento fácil, seguridad sin almacenamiento intermedio y menor tasa de abandonos en formularios complejos.
Para el Desarrollador
Fácil implementación (solo cambia el número), bajo mantenimiento sin backend, SEO friendly (indexable) y compatible con navegadores modernos.
Conclusión
Con este tutorial para crear un formulario de contacto enlazado a WhatsApp, estás listo para elevar la interacción en tu sitio. Implementa, prueba y observa cómo crecen tus conversiones.
Este formulario representa la combinación perfecta entre diseño atractivo, funcionalidad práctica y facilidad de implementación, ofreciendo una solución completa para la captación de leads a través de WhatsApp.
El widget es totalmente responsivo: se adapta a móviles, tablets y escritorios. Eso es todo: guarda el código, visita tu blog, haz una prueba en el formulario de contactos y notarás que la información llega directamente a tu WhatsApp. ¡Fácil, verdad!
Si tienes dudas o necesitas ayuda con la implementación, no dudes en contactarme. ¡Éxito con tu proyecto!
0 comments:
Publicar un comentario