Hace unos días vimos como instalar N8N en un servidor VPS. Hoy veremos como usar webhooks para conectar N8N a un formulario de contacto en WordPress. Nuestro objetivo será realizar un tratamiento automatizado de los correos que recibamos en nuestra web a través de dicho formulario.
Vamos a empezar con algo sencillo. De momento, vamos a añadir un formulario de contacto a nuestro WordPress. Haremos que las solicitudes de contacto que nos lleguen se reenvíen a N8N y desde aquí se guarden en una Google Sheet para su posterior tratamiento.
Después veremos como usar IA para redirigir esos correos a distintos departamentos, según la solicitud.
Pero empecemos por lo básico.
Creando el formulario
Lo primero es crear el formulario. Para ello usaremos el plugin de creación de formularios más usado, Contact Form 7. Lo instalamos, activamos y creamos un formulario.
¿Por qué Contact Form y no otros plugins más bonitos y modernos como WPForms o Ninja Forms? Pues básicamente, porque vamos a necesitar que el formulario de contacto se conecte a un webhook y eso lo podremos hacer con la versión gratuita de Contact Form, mientras que con los otros plugins tendremos que decantarnos por las versiones de pago.
Para aprender, usaré un plugin gratuito. Pero si en vuestra página usáis otro plugin de contacto, necesitaréis las versiones de pago para hacer la conexión (Ninja Forms Webhooks o WPForms Webhook addon)
Hecho este inciso, continuamos. Una vez creado el formulario, el siguiente paso es crea una página y añadir el shortcode del formulario. Voy un poco rápido, porque asumo que si estás leyendo esto ya sabrás «defenderte» con WordPress y no tendrás demasiados problemas para poner Contact Form 7 a funcionar. Si tienes algún problema, puedes contactar conmigo.
Si lo hemos hecho todo bien, tendremos una página como esta:
Si tenemos bien configurado el envío de correos, el formulario debería funcionar así tal y como está. Podemos hacer una prueba y si nos llega el contacto, genial, podemos seguir adelante. Si no funciona, os recomiendo leer esta otra entrada: Envío de correos en WordPress.
Lo siguiente es conectarnos a N8N. Para eso tendremos que crear un webhook en N8N
Configurando Webhooks en N8N
Abrimos nuestra instalación de N8N y creamos una nueva automatización pulsando en el botón correspondiente (Create Workflow)
Veremos la pantalla vacía para la creación del workflow, con un botón central que pone «Add first step.» Pulsamos y en el buscador que nos aparecerá en la columna lateral derecha ponemos «webhook» y lo añadimos
Nos saldrá la pantalla para añadir webhooks en N8N. Aquí tenemos que hacer dos cosas.
Primero, como vamos a conectarnos al webhook a través de un formulario, tenemos que cambiar el «HTTP Method» de GET a POST.
Segundo, vamos a necesitar la URL. La copiamos. Que antes de hacerlo, tenemos dos versiones, test o producción. En este caso da un poco igual, pero si estamos con un gran proyecto o una automatización muy compleja pues lo normal es hacer primero la implementación en test y después pasarla a producción. Como mi caso son pequeñas pruebas, selecciono «producción», no tiene más importancia.
Cerramos la pantalla de opciones y le damos en el botón de arriba a la derecha «Publish». Importante darle a este botón, en caso de no hacerlo no se guardarán los cambios y la conexión no funcionará. Es un error bastante habitual cuando estamos empezando a trabajar con N8N.
Conectar Contact Form con el webhook
Ya tenemos nuestro webhook a la espera de recibir peticiones POST. Ahora tenemos que hacer que nuestro formulario mande dichas peticiones. Para ello instalamos el plugin CF7 to Webhook. Tras ello, si editamos el formulario veremos una nueva pestaña «Webhook»
En esta pestaña, tenemos que activar la opción «Send to webhook» y añadir la URL del Webhook, que es la URL creada en el punto anterior. Si no la llegasteis a copiar, con hacer clic en el nodo correspondiente nos saldrá otra vez.
Hay otra opción «Send mail». Esto es para que el formulario de contacto siga funcionando como hasta ahora, enviando correos. Pero puede ser que queramos realizar el envío de correos desde N8N. En ese caso deberíamos desactivar esta opción, para que no se envíen mails duplicados. De momento, lo dejamos enviando.
Vamos a ver si lo hemos hecho todo bien. Nos vamos al formulario de contacto, rellenamos y enviamos. Si la conexión está bien hecha, en nuestro workflow nos aparecerá una ejecución reciente:
Pulsando en el nodo «Webhook» podremos ver la petición POST que hemos recibido. Las cabeceras HTTP, el body, la URL del webhook y unos cuantos datos mas. Volveremos a esta parte a la hora de conectar con el Google Sheet
Depurando errores
¿Y si ha pasado algo mal? En ese caso no tendremos ninguna ejecución. Hay varias opciones.
Primera, que Contact Form no haya llegado a enviar el correo. En este caso tampoco habremos recibido el correo habitual que manda el plugin. Si este es nuestro problema, tendremos que revisar porqué no está enviando mails nuestra web. Pero esto no sería un problema del N8N
Si el problema está en el N8N lo más habitual es que nos llegue un correo de «Webhook Error» por parte del plugin que instalamos. Seguramente nos indique que existe un error 404. Esto puede ocurrir por varios motivos. El primero, que hayamos copiado mal la URL del webhook. El segundo, que hayamos dejado GET como HTTP method, cuando debe estar en POST. Y el tercer error, el más habitual, que no diéramos en el botón «Publish» de la automatización, con lo que la URL seguirá sin ser pública.
Casi seguro que el problema es uno de estos tres. Revisamos, corregimos y seguimos.
Enviando los datos de N8N a Google Drive
El siguiente paso será conectar N8N con una Hoja de cálculo en Google Drive para almacenar los datos. Para esto, crearemos un Google Sheet vacío, y pondremos estas cabeceras en la primera fila: Nombre, Correo, Asunto, Mensaje.
Dejamos abierto esta hoja en una pestaña del navegador y volvemos a N8N. Toca añadir otro nodo. En el buscador pondremos «Google Sheet» y lo seleccionamos. Nos saldrán varias opciones, la que nos interesa es «Append row in sheet»
Nos saldrá una pantalla en la que se nos pedirá nuestros credenciales. Aquí la situación se empieza a complicar un poco, porque vamos a tener que crear unos credenciales para Google Sheet, lo cual no es lo más sencillo del mundo.
Veamos paso a paso como hacerlo. Pero antes de seguir, hay una información que vamos a necesitar más adelante. Si pulsamos en «Set up credentials» nos saldrá la pantalla de creación de credenciales. Dejad abierta esta pestaña y abrir una nueva pestaña en el navegador, porque ahora vamos a tener que configurar un proyecto en Google Cloud para obtener estas credenciales
Credenciales para Google Sheet
Crear proyecto en Cloud Console
Para conectarnos a Google Sheet vamos a tener que crear un proyecto en Google Cloud, activar la API de Google Sheet y generar unos credenciales para poder conectarnos. Vamos paso a paso.
Lo primero, entramos en: https://console.cloud.google.com
Arriba a la derecha veremos un botón que pone «Selector de proyecto» y al pulsarlo, saldrá un popup con otro botón, «Nuevo proyecto». Es el que usaremos para crear nuestro proyecto. En principio, solo nos hará falta ponerle un nombre. Por ejemplo «Automatizaciones N8N»
Con esto, tendremos creado nuestro proyecto, ahora tocará habilitar las APIs que vamos a querer usar en nuestro proyecto. Que en este caso son dos, la de Google Drive y la de Google Sheet.
Desde la pantalla del proyecto, pulsamos en el botón «Dashboard» o «Panel», si es que no estamos ya allí tras haber creado el proyecto.
Y ahora, tenemos que seleccionar «APIs y servicios» en el menú de la izquierda.
Esto nos mostrará el uso y APIs habilitadas en este proyecto. De momento no tendremos ninguna actividad, que acabamos de crear el proyecto.
Como digo, habrá que activar dos APIs. Para eso tenemos el botón de «Habilitar APIs y Servicios». Le damos y nos saldrán todas las APIS disponibles, que son bastantes. Así que usaremos el buscador para localizar «Google Drive API» y «Google Sheets API» y habilitamos ambas.
Crear credenciales en Google Cloud
Una vez habilitadas las APIs, el siguiente paso es crear credenciales para que N8N pueda autenticarse y usar estas APIs
De nuevo, nos vamos al panel de nuestro proyecto y al menú de APIs y Servicios, pero esta vez seleccionamos «Credenciales»
Bien, en esta pantalla, arriba, seleccionamos «Crear credenciales», y entre las opciones mostradas elegimos «Crear ID de cliente de OAuth». Nos saldrá una pantalla en la que se nos preguntará el tipo de credencial (Aplicación Web en nuestro caso) y un nombre, donde pondremos lo que queramos.
Y ahora necesitamos una «URIs de redireccionamiento autorizados». Bien, pues volvemos a la pestaña donde habíamos dejado abierto N8N y copiamos la «OAuth Redirect URL». Y añadimos esta URL como autorizada.
Como podemos ver, todo esto resulta algo tedioso, pero son mecanismos de seguridad necesarios para que nadie acceda a nuestros datos. No solo se usan credenciales de acceso, sino que ademas solo vamos a permitir accesos desde determinados puntos. Con todo esto, resulta casi del todo imposible que alguien use esta conexión sin permiso.
Ya va quedando poco. Llegados a este punto, tendremos la pantalla de confirmación de que se ha creado el cliente. Aquí vamos a necesitar copiar el ID de Cliente y el secreto. Fijaos en el aviso de que el secreto no lo volveremos a poder ver jamás, así que tendremos que copiarlo. También podemos descargar el fichero json con esta información.
Pero de primeras lo que vamos a hacer es copiar dichos datos a la pestaña de credenciales N8N que tenemos abierta. Al copiarlos se habilitará un botón que indica «Sign in with Google». Le damos y saldrá la habitual pantalla de autenticación en Google.
Nos autenticamos, nos saldrá un aviso de que la aplicación no está verificada. Esto es normal, al ser la nuestra una aplicación para uso interno. Si estuviéramos creando un sistema de autenticación para usuarios en un SaaS o algo similar, tendríamos que verificar nuestra aplicación, pero no es este el caso. Así que decimos que confiamos y seguimos.
Si hemos hecho bien todo, nos saldrá la habitual pantalla de conceder permisos de Google. Le damos permiso a todo lo que nos pides y ya casi hemos terminado
Pues ya deberíamos estar conectados. Ya lo único que nos queda es indicar en que hoja de Google Sheet vamos a guardar los datos. Si seguimos en la configuración del nodo de N8N veremos dos opciones «Document: From list» y «Sheet: From list»
Toca ir ahora a Google Drive. Nos vamos y creamos una nueva hoja de cálculo, a la que le ponemos el nombre que queramos. Por ejemplo «Formulario Contacto N8N». Y antes de seguir, creamos una primera línea a modo de cabecera, poniendo «Nombre», «Correo», «Asunto» y «Mensaje». Grabamos.
Si volvemos a la configuración del nodo, donde pone «Document: From list» ya debería dejarnos seleccionar este nuevo documento que hemos creado.
Y ya solo un último paso. Indicar como grabar los datos. Para esto veremos que a nuestra izquierda tenemos los datos del webhook. Buscamos «your-name», «your-email», etc y los conectamos arrastrándolos a los campos «Nombre», «Correo», etc.
Así:
¡Y ya estaría! Cerramos el nodo, publicamos el workflow y vamos a probar que todo funciona.
Por cierto, es posible que no os salgan los datos del webhook a la izquierda. Esto ocurre porque no tengamos unidos los nodos. Si nos vamos al lienzo del workflow, debemos asegurarnos de que los nodos estén así, conectados. De no ser así, pues los arrastramos con el ratón para conectarlos.
Probando que todo funciona
Pues ya estaría. Para comprobar que hemos hecho bien la conexión, nos vamos al formulario de contacto y escribimos cualquier cosa. No debería darnos ningún error, y los datos deberían haberse grabados en nuestro Google Sheet
¿Y si algo ha ocurrido mal? Pues habrá que revisar lo ocurrido. Como ya comenté antes, seguramente nos haya llegado un correo de «Webhook error» con más detalles sobre el error. Tocaría revisar de nuevo paso a paso las instrucciones para crear la conexión, a ver que se nos ha podido pasar por alto. En el N8N, en «Executions» debería haber registro de la conexión y detalles del fallo. De ni siquiera haber registro aquí, pues el error debería estar en el WordPress/envio de correos.
Aunque lo primero que tendría en cuenta es, ¿le dimos al botón de Publish para guardar los cambios? Porque en la mayoría de las veces, el fallo es tan simple como ese.
Conclusiones
En este artículo hemos aprendido a crear una automatización en N8N usando webhooks para almacenar los correos que recibimos en una hoja de Google Sheet . Es posible que estéis pensando que ha sido muchísimo trabajo para algo que tampoco es para tanto.
Bien, lo primero es que lo más complejo de todo el proceso ha sido la creación de las credenciales en Google Cloud, y esto es algo que no tendremos que repetir en cada automatización.
Lo segundo, es que esto es un primer paso. Lo importante es el concepto de recibir los correos para realizar tratamientos automáticos con ellos. Más adelante veremos como poder categorizar estos mails de forma automática, reenviarlos a distintos departamentos, realizar acciones en función al tipo de correo, etc.
Y recuerda, si tienes alguna duda, puedes contactar conmigo.
