Conoce nuestros programas:
GUÍAS
Índice
expand_more
Índice
¿Qué vas a descubrir?

Sabes que, por estos lares, nos gustan mucho herramientas como Make. La potencia de las automatizaciones es una corriente imparable y ya son muchas las herramientas NoCode que integran, de forma nativa, flujos de automatización de procesos.

Una de ellas es Airtable. También Webflow está desarrollando sus propias automatizaciones. Y es precisamente estas dos herramientas las que vamos a conectar, sin necesidad de terceros, para automatizar el envío de respuestas de un formulario a una base de datos.

¿Cómo lo haremos? Mediante un webhook, pero en este caso un webhook de Airtable que nos conectará, directamente, con las respuestas que recibamos en nuestra web.

¿Quieres ver cómo se hace? Pues sigue leyendo, esto te interesa

Si quieres aprender en profundidad de todas estas herramientas y crear las mejores soluciones para negocios, entonces hazte PRO en SharingAway y accede al universo NoCode.

Creamos el formulario en Webflow

En este artículo no voy a detenerme en cuestiones de diseño. Simplemente quiero que entiendas la funcionalidad en cuestión.

Para ello, usaré este diseño rápido que simula la propia página de Sharingaway.

Es un formulario en el que vamos a pedir a nuestros contactos que dejen su nombre, apellidos, email y, opcionalmente, un comentario.

A cada campo de este formulario, además, debemos de asignar un nombre descriptivo, para que luego sea fácilmente identificable en la respuesta que extraigamos desde nuestro webhook.

Esto lo encontramos, al seleccionar el placeholder donde irá la información que introduzca el usuario en el campo, en los ajustes, que puedes localizar en la rueda dentada del panel de la derecha.

Como puedes ver en la imagen de arriba, aquí podemos, además, determinar qué tipo de campo es.

Creamos el webhook en Airtable

Una vez tenemos listo nuestro formulario, es hora de crear la base de datos que contendrá las respuestas recibidas. La creamos en Airtable y, lógicamente, contendrá los mismos campos del formulario.

Una vez creada la tabla, vamos a irnos al panel de automatizaciones, que puedes sacarlo desde el botón que encuentras en el panel superior.

Como toda automatización, lo primero que necesitamos es crear un trigger que desencadene todo. En nuestro caso será un webhook.

Antes de seguir definiendo los pasos de esta automatización, debemos de introducir este webhook en Webflow para que las respuestas del formulario construyan su estructura.

Incorporamos el webhook a Webflow

Para insertar el webhook en Webflow, debemos de irnos a los Projects Settings del proyecto en el que está el formulario, en concreto a la parte de “Integrations”.

Bajamos hasta donde pone webhooks y pulsamos en “ + Add webhook”. En los ajustes, marcamos que el webhook se active por un “Form submission” y pegamos la url del webhook.

Finalizamos la automatización en Airtable

Para que el webhook funcione a la hora de testearlo en Airtable, debemos de publicar nuestro sitio y rellenar un formulario de prueba. Esos datos son los que estructurarán la respuesta que mandemos a la base de datos.

De vuelta en Airtable, le damos a “Test trigger” y vemos que la respuesta ha sido satisfactoria.

La respuesta la encontramos dentro del body que vemos en la imagen superior. Y como puedes ver en la imagen siguiente, ya hemos recibido los datos del formulario.

Por último, con los datos ya recibidos, el siguiente paso es crear un record dentro de nuestra base.

Dentro de las opciones, vamos generando los campos que queremos que vaya rellenando con los datos que sacamos del webhook.

Para finalizar, y muy importante, cerciórate que activas la automatización para que todo funcione correctamente.

Vamos a probar que todo funciona correctamente:

Y vemos que sí.

De este modo, bastante rápido, hemos conectado ambas herramientas y nos hemos evitado un paso intermedio, introduciendo otras herramientas como Make.

A partir de aquí, y con la información almacenada en Airtable, ya sabes que las posibilidades de automatización son ilimitadas.

¡Nos vemos por la Comunidad!

Únete al PRO hoy mismo

Tu camino hacia la mejor formación de vanguardia empieza aquí

Quiero ser PRO

Sigue descubriendo a tu comunidad

No items found.
No items found.
Cómo enviar datos de un formulario de Webflow a Airtable