Cómo conectar el formulario de contacto de tu web a WhatsApp usando n8n

Un formulario de contacto que se queda dos horas en tu bandeja de entrada suele ser lo mismo que no tener formulario. Si tienes un negocio en Almería, Murcia, Alicante o Granada, ya sabes cuántas consultas entran mientras conduces, estás con clientes o lejos del escritorio. Los correos se pasan por alto. WhatsApp se ve.

La solución es sencilla: cuando alguien envía el formulario de tu sitio web, n8n puede capturar los datos al instante, enviarte un aviso por WhatsApp y, en algunos casos, mandar también un mensaje automático de confirmación al cliente. Creamos este tipo de automatización empresarial para pequeñas empresas de todo el sur de España porque resuelve un problema muy real: el negocio que responde primero suele ser el que recibe la llamada de vuelta.

Qué hace este flujo de trabajo

A nivel básico, tu automatización sería así:

1. Un visitante rellena el formulario de contacto de tu web
2. El formulario envía los datos a un webhook de n8n
3. n8n valida los datos
4. n8n te envía un mensaje por WhatsApp a ti o a tu equipo
5. n8n envía opcionalmente una respuesta automática al cliente
6. n8n registra el lead en una hoja de cálculo, CRM o copia de seguridad por email si hace falta

Eso significa que ya no dependes de que alguien revise un buzón, no pierdes leads del fin de semana y no tienes que copiar y pegar manualmente los detalles de la consulta en WhatsApp.

Si estás empezando con n8n, es una de nuestras herramientas preferidas porque ofrece mucho más valor a los negocios en crecimiento que Zapier, sobre todo cuando necesitas algo más que una o dos acciones simples. Zapier sigue sirviendo para automatizaciones muy básicas, pero a cierta escala solemos recomendar n8n autohospedado o, en algunos casos, Make.com para tener mejor control de costes. Ya explicamos la visión general en nuestra guía sobre n8n vs Make.com vs Zapier 2026, pero este artículo va sobre un caso de uso concreto que puedes poner en marcha rápido.

Siguiente paso: antes de tocar n8n, decide exactamente quién debe recibir el aviso, qué datos necesita y qué debe pasar si WhatsApp falla.

Qué necesitas antes de empezar

Antes de montar nada, asegúrate de tener listas estas piezas.

1. Un formulario web que controles

Necesitas un formulario de contacto en tu web que pueda enviar datos a un endpoint personalizado. Puede ser:

• Un formulario programado a medida en un sitio estático
• Un formulario en JavaScript que envíe JSON
• Una herramienta de formularios que admita webhooks

Esta es una de las razones por las que en CostaDelClicks creamos webs estáticas rápidas en lugar de montajes pesados llenos de plugins. Nuestras webs son HTML prerrenderizado, desarrolladas con Astro y servidas sobre la red edge de Cloudflare, por eso alcanzan de forma constante 100/100 en Lighthouse y cargan en menos de 0,4 segundos de FCP. Un formulario limpio conectado a un webhook es más fácil de mantener, más rápido para el usuario y normalmente más fiable que apilar plugin sobre plugin.

WordPress puede hacerlo, pero conviene ser honestos con la contrapartida: más mantenimiento, más conflictos entre plugins, más actualizaciones de seguridad y más probabilidades de que el formulario deje de funcionar sin dar la cara. Si tu web actual complica los formularios basados en webhooks, nuestros servicios de diseño web están planteados justo para este tipo de integración práctica desde el primer día.

2. Una instancia de n8n

Necesitas acceso a n8n, ya sea:

• autohospedado
• en n8n Cloud
• alojado por tu agencia

Siempre que podemos, solemos autohospedar por control de costes y soberanía de datos, especialmente para pymes españolas que gestionan datos de clientes. Para un negocio de alquiler vacacional o un despacho legal, eso suele importar más de lo que parece cuando empiezan a entrar leads todos los días.

3. Un método de envío por WhatsApp

Esta es la parte que mucha gente simplifica demasiado. No puedes hacer que WhatsApp haga lo que quieras desde una cuenta personal normal. Por lo general necesitas una de estas opciones:

• WhatsApp Business Platform API a través de Meta o un proveedor
• Twilio WhatsApp
• Otro proveedor aprobado de WhatsApp Business API

Para una configuración empresarial seria, usa un proveedor aprobado. Evita herramientas dudosas no oficiales. Fallan, generan riesgos de cumplimiento y pueden hacer que limiten tu número.

Además, revisa cómo gestiona los tipos de mensaje tu proveedor. Las confirmaciones al cliente suelen enviarse como mensajes de plantilla, e incluso los avisos internos al propietario pueden tener que seguir las normas del proveedor si se entregan mediante la misma cuenta API.

4. Texto de consentimiento en tu formulario

Si piensas enviar un acuse de recibo al cliente por WhatsApp, tu formulario debería dejarlo claro. Más adelante hablamos del RGPD, pero no te saltes esto.

Siguiente paso: asegúrate de tener listos el formulario, la cuenta de n8n, el proveedor de WhatsApp y el texto de privacidad antes de crear el flujo.

El flujo exacto que vamos a crear

En este tutorial vamos a crear una versión simple del flujo:

• Entrada: nombre, email, teléfono, mensaje
• Disparador: webhook de n8n
• Acción 1: enviar aviso por WhatsApp al propietario del negocio
• Acción 2: enviar acuse de recibo por WhatsApp al cliente
• Acción 3: devolver una respuesta de éxito al formulario web

Más adelante puedes ampliarlo para:

• enrutar leads por tipo de servicio
• enviar a distintos miembros del equipo
• crear una entrada en el CRM
• activar un email de respaldo
• añadir lead scoring
• enviar datos a Google Sheets o Airtable

Si después de este paso quieres una automatización más amplia del seguimiento, nuestra guía sobre cómo automatizar el seguimiento de leads es la lectura natural siguiente.

Siguiente paso: mantén simple la primera versión y añade enrutado e informes cuando el aviso principal ya funcione de forma fiable.

Paso 1: crea el webhook en n8n

En n8n, crea un workflow nuevo y añade un nodo Webhook.

Ajustes recomendados del webhook

• Método HTTP: POST
• Ruta: website-contact-whatsapp
• Modo de respuesta: usando el nodo Respond to Webhook o respuesta inmediata
• Autenticación: usa una ruta secreta o validación por cabecera si es posible

Tu URL de prueba tendrá un aspecto parecido a este:

https://your-n8n-domain.com/webhook-test/website-contact-whatsapp

Tu URL de producción tendrá un aspecto parecido a este:

https://your-n8n-domain.com/webhook/website-contact-whatsapp

Descripción de la captura

Captura 1: editor de n8n mostrando un nuevo nodo Webhook con POST seleccionado, la ruta configurada como website-contact-whatsapp y la URL de prueba visible en el panel derecho.

Qué debe enviar el formulario

Tu web debería hacer un POST de datos como este:

{
  "name": "Jane Smith",
  "email": "jane@example.com",
  "phone": "+34600111222",
  "message": "Hola, me gustaría pedir presupuesto para una nueva web."
}

Si en lugar de JSON puro envías datos de formulario, también vale. n8n puede manejar ambos formatos. Lo importante es la consistencia.

Siguiente paso: copia la URL del webhook de producción en un lugar seguro y decide si vas a protegerla con una cabecera secreta, un token oculto o ambas cosas.

Paso 2: conecta el formulario de tu web al webhook

La forma de hacerlo depende de cómo esté hecha la web, pero la idea es la misma: cuando se envíe el formulario, manda los valores a la URL del webhook de n8n.

Aquí tienes un ejemplo sencillo usando JavaScript fetch:

<form id="contact-form">
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <input type="tel" name="phone" required />
  <textarea name="message" required></textarea>
  <button type="submit">Enviar</button>
</form>

<script>
document.getElementById('contact-form').addEventListener('submit', async function(e) {
  e.preventDefault();

  const formData = new FormData(this);
  const payload = Object.fromEntries(formData.entries());

  const response = await fetch('https://your-n8n-domain.com/webhook/website-contact-whatsapp', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(payload)
  });

  const result = await response.json();
  alert(result.message || 'Gracias, tu mensaje se ha enviado.');
});
</script>

Si usas un sitio estático, este enfoque es directo y rápido. Esa es una de las razones por las que nuestras webs en CostaDelClicks rinden tan bien: mantenemos el stack ligero, evitamos bloat innecesario en el cliente y conectamos los formularios directamente con las herramientas que el negocio realmente necesita. En proyectos bilingües, además conectamos de forma nativa los formularios en inglés y español con hreflang correcto, en vez de añadir una capa de traducción al final.

Descripción de la captura

Captura 2: formulario de contacto del sitio web en el navegador, con la pestaña de red de las herramientas de desarrollo abierta, mostrando una petición POST correcta al endpoint del webhook de n8n con respuesta 200.

Siguiente paso: envía el formulario una vez con datos de prueba realistas y confirma que puedes ver claramente la solicitud y la respuesta en la pestaña de red del navegador.

Paso 3: prueba los datos entrantes en n8n

Una vez conectado el formulario:

1. Haz clic en Listen for test event en el nodo Webhook
2. Envía el formulario en tu web
3. Comprueba que n8n recibe correctamente el payload

Deberías ver los campos en la salida del nodo.

En este punto, confirma que:

• los nombres de los campos son correctos
• el teléfono incluye el prefijo internacional si hace falta
• no falta ningún valor obligatorio
• la protección anti-spam funciona del lado del formulario

Añade un paso de validación

Después del nodo Webhook, añade un nodo Code o IF para comprobar los datos mínimos requeridos.

Por ejemplo:

• existe el nombre
• existe el mensaje
• el formato del teléfono es utilizable
• el email está presente si necesitas un contacto alternativo

Esto evita que envíos defectuosos del formulario disparen mensajes inútiles.

Si el spam es un problema, añade protección básica en el propio formulario antes de que los datos lleguen a n8n. En los proyectos de clientes solemos combinar comprobaciones del lado del servidor con protección ligera contra bots, en vez de depender de un único plugin o de una caja captcha.

Siguiente paso: no sigas hasta haber probado al menos un envío válido y uno no válido.

Paso 4: da formato al mensaje de WhatsApp para el propietario del negocio

Ahora crea el mensaje que recibirá tu equipo.

Añade un nodo Set o Code para construir una cadena con formato. Por ejemplo:

Nueva consulta desde la web

Nombre: {{$json.name}}
Email: {{$json.email}}
Teléfono: {{$json.phone}}
Mensaje: {{$json.message}}

Puedes mejorarlo incluyendo:

• URL de la página
• servicio solicitado
• hora de envío
• campaña de origen
• idioma seleccionado
• provincia o zona

Si atiendes a clientes bilingües, esto importa. Nosotros creamos con frecuencia flujos en inglés y español para negocios en España porque el mismo proceso de captación suele tener que funcionar para expatriados, turistas y clientes locales sin confusiones. En la práctica, eso puede significar que un formulario en inglés envíe una confirmación en inglés mientras el aviso interno al propietario sigue incluyendo un resumen claro en español.

Descripción de la captura

Captura 3: workflow de n8n mostrando el nodo Webhook conectado a un nodo Set, con un campo llamado ownerMessage que contiene una plantilla de mensaje de WhatsApp formateada en varias líneas.

Siguiente paso: mantén el mensaje al propietario lo bastante corto como para poder leerlo en la pantalla del móvil sin tener que abrir tres apps más.

Paso 5: envía el aviso por WhatsApp al propietario

Este paso depende de tu proveedor de WhatsApp, pero la lógica es la misma.

Opción A: nodo del proveedor de WhatsApp Business API o petición HTTP

Si tu proveedor tiene un nodo nativo para n8n, úsalo. Si no, utiliza un nodo HTTP Request siguiendo la documentación de la API del proveedor.

Los valores habituales que necesitarás son:

• URL del endpoint de la API
• token de autenticación
• número remitente de WhatsApp
• número del destinatario
• cuerpo del mensaje

Una petición HTTP simplificada podría incluir:

• Método: POST
• URL: endpoint del proveedor
• Cabeceras: Authorization, Content-Type
• Body: JSON con to, type y text

Ejemplo de destino del mensaje:

{
  "to": "34600111222",
  "type": "text",
  "text": {
    "body": "Nueva consulta desde la web\n\nNombre: Jane Smith\nEmail: jane@example.com\nTeléfono: +34600111222\nMensaje: Me gustaría pedir presupuesto."
  }
}

La estructura JSON exacta variará según el proveedor, así que sigue su documentación.

¿Qué número debe recibir el aviso?

Puede ser:

• tu propio móvil
• un número compartido de oficina
• un responsable comercial
• distintas personas según el tipo de servicio

Por ejemplo, una inmobiliaria en Alicante podría enviar las tasaciones a un agente y las consultas de compra a otro. Un negocio de alquiler vacacional en Almería podría mandar los leads de reservas a recepción y los avisos de mantenimiento a otro canal.

Una nota práctica: no des por hecho que todos los proveedores admiten exactamente igual los avisos internos al personal. En algunas configuraciones, mantenemos WhatsApp como canal principal de notificación y añadimos en paralelo email o registro en CRM para que el lead no dependa nunca de un solo método de entrega.

Siguiente paso: envía una prueba real al teléfono del destinatario antes de construir nada más complejo.

Paso 6: envía una respuesta automática por WhatsApp al cliente

Esto es opcional, pero muy útil si se hace bien.

El cliente recibe un mensaje como este:

Hola Jane, gracias por contactar con CostaDelClicks. Hemos recibido tu consulta y te responderemos en breve. Si tu solicitud es urgente, llámanos directamente al [número].

Ese único mensaje tranquiliza al lead porque le confirma que:

• su formulario ha funcionado
• lo has recibido
• va a obtener una respuesta
• puede usar otra vía si es urgente

Reglas importantes antes de enviarlo

No envíes spam promocional. Haz que el mensaje sea transaccional y relevante para la consulta que acaba de hacer.

Un mensaje de acuse de recibo seguro es:

• corto
• esperado
• específico para el envío del formulario
• no una campaña de marketing

Si más adelante quieres hacer seguimiento comercial, eso es otro asunto distinto de consentimiento.

Igual de importante: en la WhatsApp Business Platform oficial, este mensaje al cliente muchas veces tiene que enviarse como plantilla aprobada, y el usuario debe haber dado claramente su consentimiento para recibir comunicaciones por WhatsApp. Aquí es donde se rompen muchos montajes DIY. El simple envío del formulario no es un permiso mágico para enviar mensajes ilimitados.

Descripción de la captura

Captura 4: editor de n8n mostrando un segundo paso de envío por WhatsApp después de la notificación al propietario, mapeado al número de teléfono del cliente y usando una plantilla breve de confirmación.

Siguiente paso: revisa los requisitos de aprobación de plantillas y consentimiento previo de tu proveedor antes de prometer respuestas automáticas al cliente en la web en producción.

Paso 7: devuelve una respuesta de éxito limpia al sitio web

El formulario no debería quedarse colgado después del envío. Añade un nodo Respond to Webhook o configura el nodo Webhook para devolver JSON.

Ejemplo de respuesta:

{
  "success": true,
  "message": "Gracias, tu mensaje se ha enviado."
}

Después, muestra ese mensaje en la web.

Así el usuario ve una confirmación correcta en pantalla aunque el mensaje de WhatsApp se esté enviando en segundo plano.

Si tienes una web en inglés y español, devuelve el mensaje de confirmación en el idioma de la página, en vez de usar el mismo texto en todas partes. Así construimos recorridos bilingües para clientes: formulario, confirmación, metadatos y orientación por idioma quedan alineados en lugar de parcheados al final.

Siguiente paso: prueba el mensaje de éxito en móvil, no solo en escritorio, porque ahí es donde se hacen la mayoría de envíos de formularios locales.

Paso 8: añade gestión de errores para que los leads no desaparezcan

Este es el paso que la mayoría de tutoriales omiten. No montes un flujo que solo funciona cuando todo sale perfecto.

Como mínimo, añade lógica de respaldo para:

• fallo de la API de WhatsApp
• números de teléfono no válidos
• prefijos internacionales ausentes
• caída temporal del proveedor
• envíos duplicados

Buenas opciones de respaldo incluyen:

• enviar un email de copia de seguridad al negocio
• registrar el lead en Google Sheets o Airtable
• notificar a un canal de administración
• guardar intentos fallidos para reintento

Integramos estas protecciones en los flujos de nuestros clientes porque perder leads cuesta más que el tiempo que te ahorras por recortar. Una simple consulta de alquiler o legal puede valer fácilmente mucho más que la hora que lleva añadir registros y lógica de reintento como es debido.

Siguiente paso: añade al menos un canal de respaldo antes de dar el flujo por terminado.

Paso 9: gestiona bien los números de teléfono

Los envíos por WhatsApp fallan con sorprendente frecuencia por un mal formato del número.

Usa formato internacional siempre que puedas:

• España: +34
• Reino Unido: +44
• Alemania: +49

Si tu público incluye expatriados, turistas o propietarios de segunda residencia, no des por hecho que todos los números son españoles. Lo vemos constantemente en webs bilingües de Murcia y Alicante.

Buenas prácticas

• Pide el número en formato internacional
• Usa un desplegable de prefijo si hace falta
• Limpia espacios y guiones antes de enviar
• Valida la longitud del número antes de llamar a la API

Si solo haces una mejora técnica en este flujo, que sea esta. Evita muchísimos fallos silenciosos.

Siguiente paso: haz pruebas con un número español y otro no español antes del lanzamiento.

Paso 10: añade salvaguardas de RGPD antes de publicar

Esto importa si operas en España. WhatsApp es cómodo, pero la comodidad no elimina tus responsabilidades bajo el RGPD.

¿Qué datos personales intervienen?

Tu formulario puede enviar:

• nombre
• número de teléfono
• email
• contenido del mensaje
• potencialmente detalles de reservas, legales o financieros

Eso son datos personales. En algunos sectores, en la práctica pueden ser sensibles aunque técnicamente no sean categorías especiales de datos.

Puntos clave del RGPD que debes tener en cuenta

1. Sé transparente

Tu política de privacidad debería explicar:

• qué datos recoges
• por qué los recoges
• adónde van
• si usas proveedores de mensajería de terceros
• cuánto tiempo los conservas

2. Envía solo lo que necesitas

No metas información innecesaria en WhatsApp. Si el propietario solo necesita nombre, teléfono y un resumen, no incluyas datos extra.

3. Obtén el consentimiento adecuado o apóyate en una base jurídica válida

Si alguien envía un formulario de contacto pidiendo respuesta, puede que tengas una base jurídica para tratar la consulta. Pero si quieres enviar una confirmación por WhatsApp, menciónalo claramente junto al formulario.

Ejemplo de texto:

Al enviar este formulario, aceptas que podamos contactarte sobre tu consulta por email o por WhatsApp si facilitas un número de móvil.

Haz que un profesional jurídico revise el texto exacto si tu sector está regulado.

4. Ten cuidado en sectores sensibles

Si eres abogado, clínica, gestoría u otro negocio que maneja información confidencial, piensa bien antes de enviar todos los detalles de la consulta por WhatsApp.

5. Protege tu configuración de n8n

Protege:

• las URLs de webhook
• las credenciales de API
• el acceso al servidor
• los logs del workflow
• los ajustes de conservación

Para más información sobre la parte web del cumplimiento, conviene leer junto a este tutorial nuestra guía sobre RGPD para webs de empresas españolas.

Idea clave: si tu flujo toca WhatsApp, datos de clientes y envíos de formularios, la fiabilidad y el cumplimiento importan tanto como la velocidad.

Errores habituales que rompen esta automatización

Usar la URL de prueba del webhook en producción

n8n te da una URL de prueba y otra de producción. Mucha gente conecta la incorrecta y luego no entiende por qué deja de funcionar al publicar.

Olvidarse de activar el workflow

Un workflow correcto en modo borrador sigue siendo un workflow que no funciona.

Enviar a números móviles mal formateados

Como hemos visto, el formato del número causa más fallos de los que la mayoría espera.

No tener respaldo si falla WhatsApp

Si un lead solo existe dentro de una petición fallida a una API, no tienes un proceso fiable.

Tratar WhatsApp como si fuera un CRM

WhatsApp es un canal de comunicación, no un sistema serio de gestión de leads.

Ignorar la velocidad de carga del propio formulario

Un formulario en una web lenta sigue perdiendo leads antes incluso de que lleguen a enviarlo. Si tu sitio va lento en móvil, arregla eso primero. Nuestras guías sobre por qué importa la velocidad de tu web en España y cómo aprobar Core Web Vitals explican por qué el rendimiento forma parte de la conversión, no es solo un detalle técnico.

Siguiente paso: revisa tu configuración actual frente a esta lista y corrige el punto débil antes de añadir más funciones.

Un caso de uso sencillo del mundo real

Imagina que gestionas una empresa de property management en Mojácar.

Un propietario llega a tu web a las 21:30 y envía un formulario pidiendo presupuesto para gestión de alquiler vacacional.

Este flujo puede:

• avisarte al instante por WhatsApp
• enviar un mensaje de confirmación al propietario
• registrar la consulta en una hoja
• crear una tarea para hacer seguimiento a la mañana siguiente

Eso es mucho mejor que confiar en que alguien vea un email enterrado entre facturas de proveedores y avisos de reservas.

El mismo patrón funciona para:

• restaurantes que reciben consultas para eventos
• inmobiliarias que gestionan solicitudes de valoración
• despachos legales que filtran nuevas consultas
• empresas de oficios que reservan salidas de servicio
• empresas de alquiler vacacional que gestionan dudas sobre reservas directas

Para negocios con mayor volumen, a veces añadimos un paso simple de IA para etiquetar la consulta por tipo de servicio antes de que llegue al equipo. Eso no sustituye al personal. Simplemente elimina el trabajo repetitivo de clasificación.

Siguiente paso: aplica primero este flujo a un solo tipo de consulta en tu negocio y amplíalo después, cuando hayas comprobado que realmente ahorra tiempo.

¿Deberías montarlo tú mismo o pedir que te lo dejen hecho?

Si te manejas bien con:

• pruebas de webhooks
• autenticación de APIs
• JavaScript para formularios
• gestión de errores
• revisión de RGPD

entonces sí, puedes construir tú mismo la versión básica.

Pero la mayoría de empresarios no debería perder media jornada depurando payloads de webhook cuando el objetivo real es responder antes a los leads. Por eso ofrecemos implementación práctica, no solo asesoramiento. Diseñamos la web, conectamos el flujo, la mantenemos rápida y nos aseguramos de que funcione en el mundo real, en dispositivos reales y para empresas reales en España.

Si tu web actual es lenta, caótica, muy cargada de WordPress o difícil de conectar limpiamente, puede ser mejor arreglar primero la base. Nuestros proyectos de diseño web en Almería y el trabajo que hacemos en el resto de la región suelen empezar exactamente ahí: mejorar la web y luego añadir la automatización correctamente.

FAQ