Un cliente abre la página de pedidos de la panadería, rellena el formulario y, en ese mismo segundo, tu Telegram te avisa: quién es, su teléfono, qué quiere y para qué día. El formulario lleva los colores de la panadería y el aviso sale del mismo sitio que la página, un solo nodo de n8n: el Webhook.

Este es el quinto capítulo de n8n desde cero, nuestra serie gratuita en YouTube. Aquí tienes el vídeo y, debajo, el paso a paso para montarlo aunque no le des al play, con el workflow terminado y los dos HTML para descargar.

Qué es un webhook y por qué sirve para un formulario

En el capítulo 4 n8n trabajaba solo, a su hora. En este va a escuchar: un webhook es una dirección web de n8n y, cada vez que alguien la llama, el workflow arranca.

Esa dirección se puede llamar de dos maneras, que se llaman métodos. Con GET, que es lo que hace el navegador cuando abres una página, y con POST, que es lo que hace cuando envías un formulario. El truco de este capítulo es que la misma dirección sirve para las dos cosas: cuando el cliente la abre llega un GET y le contestas con el formulario; cuando lo envía llega un POST, mandas el aviso a Telegram y le contestas con la página de gracias.

Qué necesitas antes de empezar

• El bot de Telegram y su credencial, que creamos en el capítulo 3.
• Tu chat id, que sacamos en el capítulo 4.
• El código del formulario y el de la página de gracias. Los tienes en la descarga de más abajo, listos para pegar: no hace falta saber programar.

El paso a paso

1. El nodo Webhook

Crea un workflow nuevo y llámalo, por ejemplo, Formulario y webhook. Pulsa la tecla N, busca webhook y elige Webhook. En Path escribe pedido: es el final de la dirección. Arriba verás dos direcciones, la Test URL para probar y la Production URL, la de verdad, que solo funciona cuando el workflow está publicado.

2. GET y POST a la vez

De serie el Webhook atiende un solo método. Entra en Settings, los ajustes del nodo, y activa Allow Multiple HTTP Methods. Vuelve a Parameters y, en HTTP Methods, marca GET y también POST.

3. Quién contesta

En Respond elige Using 'Respond to Webhook' Node: así la respuesta no la decide n8n, la decides tú con otro nodo. Cierra el nodo y fíjate en que ahora tiene dos salidas, una para GET y otra para POST.

4. La respuesta del GET: el formulario

Detrás de la salida GET añade un Respond to Webhook. En Respond With elige Text y en Response Body pega el HTML del formulario. Después, en Options, añade Response Headers con este par:

Name:  Content-Type
Value: text/html; charset=utf-8

Esa cabecera le dice al navegador que lo que llega es una página y que la dibuje. Sin ella, verás el código en vez del formulario.

5. Lo que importa del código

Del HTML solo te interesan dos cosas. La etiqueta form lleva method="post" y ninguna dirección, así que el formulario se envía a la misma dirección por la que ha llegado. Cada campo lleva su name, que es el nombre con el que te llegará cada dato:

<form class="caja" method="post">
  <input id="nombre" name="nombre" required>
  <input id="telefono" name="telefono" type="tel">
  <textarea id="pedido" name="pedido" required></textarea>
  <input id="recogida" name="recogida" type="date">
  <button type="submit">Enviar pedido</button>
</form>

Si cambias el formulario a tu gusto, mantén los name o acuérdate de cambiarlos también en el aviso de Telegram.

6. Primer punto de control: ver el formulario

Pulsa Execute workflow y n8n se queda escuchando. Abre una pestaña nueva del navegador y pega la Test URL: tiene que salir el formulario de la panadería, con sus colores.

7. La respuesta del POST: gracias

Ahora la otra salida. Detrás de POST añade otro Respond to Webhook igual que el anterior (Respond With: Text y la misma cabecera Content-Type), pero con el HTML de la página de gracias en Response Body.

8. Enviarlo de prueba

En modo prueba, n8n escucha una sola llamada cada vez que pulsas Execute workflow, así que vuelve a pulsarlo antes de enviar. Rellena el formulario como si fueras una clienta (en el vídeo es Marta) y pulsa Enviar pedido: te tiene que contestar la página de gracias.

Abre el Webhook y mira la rama POST. Dentro de body están los datos, cada uno con el name de su campo: nombre, telefono, pedido y recogida. Un formulario normal los manda en un formato que se llama form urlencoded, y n8n los deja directamente en body.

9. El aviso por Telegram

Pasa el ratón por la conexión entre POST y la página de gracias, pulsa el + y añade Telegram con la acción Send a text message. Elige la credencial de tu bot y pega tu chat id.

En el texto escribe Nuevo pedido y, para los datos, no hace falta teclear ninguna expresión: arrastra desde la izquierda cada campo de body y n8n la escribe por ti. El aviso del workflow descargable queda así:

Nuevo pedido

Nombre: {{ $json.body.nombre }}
Teléfono: {{ $json.body.telefono }}
Pedido: {{ $json.body.pedido }}
Recogida: {{ $json.body.recogida }}

Como en los capítulos anteriores, en Additional Fields quita la firma de n8n (Append n8n Attribution desactivado).

10. La dirección de verdad

Para usar la Production URL, publica el workflow con Publish. Ábrela en otra pestaña, como haría un cliente, rellena un pedido y envíalo: el cliente ve la página de gracias y a ti te llega al móvil el aviso con su nombre, su teléfono, lo que quiere y el día de recogida.

Test URL y Production URL

Seguridad: que no entre cualquiera

La Production URL es pública y cualquiera que la tenga puede mandarte datos. En un formulario para tus clientes eso es lo normal, pero si la dirección la va a llamar otra aplicación, ciérrala: en Authentication elige Header Auth y crea una credencial con una clave que solo conozca esa aplicación.

La otra regla es despublicar lo que no uses. Abre el menú de Publish, pulsa Unpublish y confírmalo: una dirección que no escucha no se puede usar contra ti.

Si te falla

• Ves el código en vez del formulario: falta la cabecera Content-Type en el Respond to Webhook, o Respond With no está en Text.
• La dirección dice que el webhook no está registrado: estás usando la Test URL sin haber pulsado Execute workflow, o la Production URL con el workflow sin publicar.
• El aviso no llega: revisa el chat id y comprueba que le has escrito antes a tu bot.

Los capítulos del vídeo

Preguntas frecuentes

¿Qué es un webhook en n8n?
Una dirección web de n8n que arranca el workflow cada vez que alguien la llama. Puede recibir llamadas GET, como cuando abres una página, y POST, como cuando envías un formulario.

¿Puede un mismo Webhook atender GET y POST?
Sí. En Settings activas Allow Multiple HTTP Methods, marcas GET y POST en HTTP Methods y el nodo pasa a tener una salida para cada método.

¿Por qué veo el código del formulario en vez de la página?
Porque el Respond to Webhook no lleva la cabecera Content-Type con el valor text/html; charset=utf-8. Añádela en Options > Response Headers y comprueba que Respond With está en Text.

¿Qué diferencia hay entre la Test URL y la Production URL?
La Test URL funciona después de pulsar Execute workflow y solo para una llamada; es para probar. La Production URL es la que compartes con tus clientes, y solo responde mientras el workflow está publicado.

¿Es seguro dejar el webhook abierto?
Para un formulario de clientes es lo normal, porque tiene que ser público. Si lo va a llamar otra aplicación, protégelo con Header Auth, y despublica los workflows que no uses.

Sigue la serie: ← capítulo 4: un resumen diario en Telegram · todos los capítulos de n8n desde cero · capítulo 6: Google Sheets →