Cómo integrar un formulario de Elementor con Sendinblue a través de Zapier [Incluye vídeo]

Cómo integrar un formulario de Elementor con Sendinblue a través de Zapier [Incluye vídeo]

Elementor Page Builder es un plugin para diseño de páginas web con WordPress que ha revolucionado el mercado y la forma de crear sitios web. Si todavía no lo conoces, te recomiendo que leas este súper post en el blog de Arturo García.

Elementor permite diseñar webs de manera gráfica, sin que la ausencia de conocimientos técnicos o de programación sea un problema.

Dentro de todas las opciones que tiene Elementor (¡que ya te digo yo que tiene unas cuantas!), podremos diseñar formularios muy completos y configurarlos para que realicen diversas acciones.

En este post voy a enseñarte a integrar un formulario de Elementor con la herramienta de email marketing Sendinblue a través de Zapier, una aplicación online que permite realizar integraciones y automatizaciones de procesos.

Lo que vamos a conseguir con esta integración es que los datos de un usuario que nos escriba a través del formulario se almacenen en una lista de suscriptores de nuestra herramienta de email marketing. Con esta integración, la cual crearemos, evitaremos tener que incluirlos nosotros de manera manual.

¿Estás listo y/o lista y/o listX y/o list@? ¡Pues vamos a configurar nuestras herramientas…!

Paso 1: Configuración del formulario en Elementor

Voy a dar por hecho que ya sabes crear un formulario con Elementor y que ya tienes los campos creados.

Podría ser algo como esto:

Este es el formulario de mi propia web. Es muy sencillo y contiene únicamente los siguientes campos (te recomiendo que no pidas más datos para no ahuyentar a tus usuarios):

  • Nombre
  • Email
  • Mensaje
  • Texto legal
  • Check de aceptación de la Política de Privacidad

No voy a explicarte ahora cómo configurar un formulario completo en Elementor; si estás leyendo esto es porque ya sabes bastante sobre eso. Solo te voy a enseñar cómo configurar las acciones que se ejecutarán después de que alguien nos envíe un formulario, que pueden ser varias.

Acciones después de enviar un formulario

Elementor proporciona una serie de acciones que se pueden llevar a cabo una vez el usuario hace clic en el botón ENVIAR de nuestro formulario.

Entre estas acciones tenemos la posibilidad de enviarnos un email a nosotros mismos con la solicitud del usuario (algo básico para saber si alguien nos escribe), podemos enviar un segundo email al propio usuario que sirva como acuse de recibo, puedes redirigir al usuario a otra página (una página de gracias, por ejemplo) o podemos utilizar alguna de las integraciones que ya existen en Elementor para herramientas como Mailchimp, ActiveCampaign, GetResponse y otras cuantas más.

Lo bueno de todas estas opciones es que las puedes combinar y que cuando el usuario envíe el formulario, ocurran varias cosas a la vez.

¡La verdad es que Elementor tiene cosas que molan mazo!

En nuestro caso, la herramienta de email marketing que vamos a utilizar no aparece en este listado y tendremos que realizar la integración entre Elementor y nuestra herramienta a través de la opción «Webhook», que aparece entre todas las que te he contado hace un par de párrafos.

La seleccionamos y, en ese momento, nos aparecerá un nuevo apartado un poco más abajo para poder configurarlo y en el que podremos insertar una URL de un Webhook (más adelante te cuento cómo).

Pero, antes de nada sería bueno que tuviésemos claro qué son los webhooks…

¿Qué son los webhooks?

Te voy a explicar que son los Webhooks de una manera que se pueda entender fácilmente (¡ni yo lo tengo claro, te lo juro!), pues es un término relacionado con programación que yo no conocía hasta hace bien poco y que tampoco sé explotar (¡me lo apunto para aprender!).

¡Ahí va eso!

Los webhooks son una «especie» de llamadas o solicitudes que se pueden hacer entre dos herramientas para compartir información entre ellas.

¿Cómo lo he explicado? ¿Lo tienes claro?…

En resumen, es algo así como: «¡Eh!, necesito esta información de ti… ¿me la pasas?»

Hoy en día existen un montón de integraciones entre herramientas de todo tipo que los propios desarrolladores de las herramientas se encargan de desarrollar.

¡Acabo de hacer un trampantojo de términos que pa qué!

Pero con el avance de la tecnología e Internet no siempre es fácil seguir el ritmo de las necesidades de los usuarios a la hora de integrar diferentes aplicaciones.

Por ello surgieron los hooks o webhooks, que no son más que la manera de poder integrar ‘ad-hoc’ dos o más herramientas para llevar a cabo una tarea concreta.

Ahora que tienes más o menos el concepto en tu mente, vamos a ver cómo crear la integración entre nuestro formulario de Elementor y nuestra herramienta de email marketing.

La integración la haremos a través de Zapier.

Las 9 fases cruciales para diseñar una web atractiva y efectiva

¿Quieres aprender todos los pasos para diseñar una web profesional con la que conseguir resultados reales para vivir de ella?

¡Hey! ¿Te apetecería recibir CONTENIDOS FRESQUITOS en tu correo?

Si buscas info sobre Diseño Web, Elementor, WordPress, Marketing Digital, Redes Sociales y otros temillas refrescantes... ¡apúntate ahora y TE REGALO UN CHECKLIST de comprobaciones que deberías hacer antes de publicar tu web!

Paso 2: Crear integración a través de Zapier

Para comenzar a trabajar con Zapier, tendremos que crearnos una cuenta.

Después de eso, entraremos en la plataforma y para comenzar a crear nuestra integración solo tenemos que ir al botón naranja del menú superior llamado ‘Make a Zap’ (en español, «Crear un Zap»).

#1. Configuración de la APP ‘Webhooks by Zapier’

Una vez hacemos clic en el botón ‘Make a Zap’, comenzamos a hacer la integración, siguiendo los siguientes pasos:

1. Escoger una APP para el lanzar la acción (Trigger): el primer paso que Zapier nos va a solicitar al hacer un Zap es escoger la APP que lanzará el evento. Escogeremos la APP ‘Webhooks by Zapier’, escribiendo su nombre en el buscador.

2. Seleccionar trigger (disparador): opción de seleccionar Retrieve Poll o Catch Hook. Seleccionamos ‘Catch Hook’ y continuamos.

3. Configurar hook: en este paso veremos una opción llamada ‘Pick off a Child Key’. Aquí no tocamos nada y hacemos clic en Continuar.

4. Enviar una solicitud al hook: para comprobar que el hook funciona correctamente vamos a copiar la URL que nos ha generado Zapier…

… y la pegaremos en el campo ‘Webhook URL’ del formulario de Elementor.

Una vez tengamos la URL del Webhook pegada en su lugar, Zapier nos solicitará hacer un test para ver que todo funciona. Este test no es más que realizar un envío desde nuestro formulario de Elementor. Con esta prueba, Zapier podrá detectar los campos que tenemos configurados en nuestro formulario de Elementor, para luego asociarlos a la integración.Estos son los campos que he utilizado para el test:

Una vez realizado el test, haremos clic en el botón «OK, I did this» y en la siguiente pantalla veremos que se ha generado un hook llamado «Hook A». Si lo desplegamos veremos todos los campos que ha detectado Zapier en nuestro formulario.

5. Fin de la configuración del Webhook.

#2. Seleccionar nuestra herramienta de email marketing

Ahora que tenemos insertada la URL del Webhook de Zapier en nuestro formulario de Elementor, cuyo test ha sido satisfactorio, vamos a crear la segunda parte de esta integración, que no es otra que seleccionar la herramienta de email marketing con la que vamos a trabajar.

En este caso, voy a realizar la integración con la herramienta de email marketing que utilizo en la actualidad: Sendinblue. Aquí te dejo una review completa sobre esta potente herramienta.

¡Ahí vamos!

1. Buscar y seleccionar Sendinblue en el buscador de APP’s.

2. Seleccionar la acción que llevaremos a cabo en Sendinblue. En este caso solo existe una: «Añadir suscriptor a una lista».

3. Seleccionar nuestra cuenta de Sendinblue, nos logueamos y hacemos clic en el botón ‘Test’ para comprobar que la ha detectado correctamente. Si el test es correcto, el propio botón cambiará a color verde y aparecerá el texto ‘Success!’

4. Configurar opciones de suscripción: en este paso debemos indicar la lista, el email y otros campos del formulario que queremos integrar (nombre, apellidos, teléfono, etc.) de todos los que ha detectado Zapier tras el test anterior (paso 4 del punto anterior).

El resultado al finalizar debería ser algo similar a esto:

5. Ahora enviaremos un test a Sendinblue para comprobar que todo funciona y que los usuarios se suscriben.

Una vez enviado, debería aparecer una pantalla de confirmación de que el test ha ido bien…

… y el usuario del test debería aparecer ya en nuestra lista de suscripción:

#3. Finalizar Zap

Una vez hemos configurados Elementor, Zapier y Sendinblue, solo nos queda poner nombre a nuestro Zap y activarlo.

Desde este momento la integración está finalizada y nuestro formulario estará enviando los datos de nuestros usuarios a la lista de Sendinblue que hemos creado para la ocasión.

Estos pasos para realizar la integración con Sendinblue son válidos también para otras herramientas de email marketing que estén en el listado de APP’s de Zapier. Solo tendrás que adaptar ciertos pasos a la configuración específica de tu herramienta.

Vídeo: Cómo integrar un formulario de Elementor con Sendinblue a través de Zapier

Conclusión

Elementor avanza a pasos agigantados y está revolucionando el diseño web, pero todavía tiene algunas cosas por desarrollar. Mientras tanto, podemos tirar de Zapier para poder automatizar lo máximo posible nuestro negocio, algo de sobra necesario para poder centrar la atención en otras cosas que requieren nuestro tiempo.

¿Qué te ha parecido esta automatización? ¿Crees que es muy complicada? ¿Sabes de algún otro método para sacar partido a los formularios de Elementor?

Déjame un comentario aquí para seguir aprendiendo 🙂

Y si te apetece compartir este post en Redes Sociales y ponerme 5 estrellitas aquí debajo, los ofendiditos de Twitter dejarán de ofenderse por todo 😛

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (4 votos, promedio: 5,00 de 5)
Cargando…

Edu Rubianes

Soy Diseñador Freelance de Páginas Web con WordPress. Mi misión es ayudar a EMPRENDEDORES y PEQUEÑAS EMPRESAS a tener una web moderna y fresca para mejorar su imagen y sus ventas.

Esta entrada tiene 4 comentarios

  1. Muy interesante, me va a venir muy bien porque es justo lo que voy a hacer en mi web. Lo mejor de todo es el vídeo, es muy claro.

    1. Muchas gracias, Catalina!!! 😊😊

      Sobre mis vídeos… tengo que mejorar el audio… un tal Pablo que conocemos bien me ha sacado tarjeta amarilla, jeje!

      Un abrazo fuerte!!!

  2. Excelente artículo Edu, me estuve peleando con Elementor para integrarlo y aunque uso Zapier bastante, jamás se me ocurrió usarlo en Elementor.

    He renunciado a Elementor, me la pasé dos semanas reparando webs de clientes, a cero coste porque eran recientes, y este año ya ha roto muchos sitios, y vuelvo a Thrive Architect con todo su ecosistema, que debes probar, Themify Builder y Beaver Builder, mucho más estables.

    Pero éste artículo me ha ustado mucho, y tengo el video guardadito.

    Un saludo!!

    1. Qué pasa, Edmundo!!!

      Me alegro de que te haya gustado! Yo no domino Zapier demasiado, pero ante una necesidad me he buscado la vida. Me mola investigar y buscar soluciones a problemas. Cuando consigo mi objetivo, me tomo una cerveza. Y si no, también, jajaja!

      Sé que Elementor no te acaba de enganchar, pero creo que es porque no acabas de acostumbrarte…yo no he probado ni Thrive ni Beaver, pero con Elementor me siento cómodo. Aún así, estoy de acuerdo contigo en que cada vez que lo actualizan, hay que encomendarse a San Backup 😂

Deja un comentario

Información básica sobre protección de datos

  • Responsable Eduardo Rubianes .
  • Finalidad Moderar los comentarios.
  • Legitimación Tu consentimiento.
  • Destinatarios RAIOLA NETWORKS, S.L..
  • Derechos Acceder, rectificar y suprimir los datos.
  • Información Adicional Puedes consultar la información detallada en el Aviso Legal.

Cerrar menú

Las 9 fases cruciales para diseñar una web atractiva y efectiva

Responsable del fichero: Refrescando Negocios. Finalidad: envío de contenidos e información comercial. Legitimación: gracias a tu consentimiento. Tus datos se encuentran alojados en la plataforma de email marketing Sendinblue, cuyo titular es SendinBlue, Sociedad por Acciones Simplificada, alojada en Francia. Podrás acceder, rectificar, limitar y suprimir tus datos a través del email info@refrescandonegocios.com, así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar mi Política de Privacidad en https://refrescandonegocios.com/aviso-legal.

Curso GRATUITO por entregas con el que aprenderás a diseñar una web profesional y a conseguir resultados reales para vivir de ella.