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.
Elementor es un plugin para diseño de páginas web con WordPress que ha revolucionado el mercado y la forma de crear sitios web.
Elementor permite diseñar webs de manera gráfica, sin que la ausencia de conocimientos técnicos o de programación sea un problema.
Puedes leer este megapost de mi blog si quieres saberlo todo sobre Elementor Page Builder
Dentro de todas las opciones que tiene Elementor (¡que ya te digo yo que tiene unas cuantas!), podremos diseñar un formulario muy completo y configurarlos para que realicen diversas acciones.
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…!
NOTA IMPORTANTE: ESTA INTEGRACIÓN ES VÁLIDA PARA CUALQUIER OTRA HERRAMIENTA DE EMAIL MARKETING, NO SOLO PARA SENDINBLUE.
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
- 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 Mailerlite, 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.
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 😛
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.
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!!!
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!!
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 ?
Hola!
He seguido tu tutorial para integrar sendinblue con elementor, pero no se porqué, al hacer la prueba con diferentes cuentas, me pone el mismo remitente que el email del supuesto usuario que se registra. No me llega el email de bienvenida, sino un aviso de spam por reenviar de mi misma cuenta.
He probado cambios en elementor y no doy con ello… la cuenta en cuestion es con la que he registrado zapier y sendinblue,
Podrias ayudarme??
Hola Ana,
Eso puede ser un error en la configuración del formulario de Elementor.
Comprueba que los campos de la ficha «Email» son los siguientes:
Si utilizas la opción «Email 2» para enviar un acuse de recibo al usuario, la configuración debe ser:
Con esto deberías tener bien configurado el formulario. Luego, la configuración de Zapier, si la haces exactamente como en el post, debería funcionar.
Espero haberte ayudado 😉
Un saludo!!
PD.: cuidado con las comillas que se muestran en el comentario, pues son tipográficas. Debes poner comillas altas (dos rayitas verticales).
Muchas gracias por el rico contenido. Su explicación es muy clara y directa. Estaba buscando una solución hace unos días y ya la había probado con MailOptin pero no funcionaba bien y comencé a pensar en OptinMonster. El soporte de Sendinblue me recomendó buscar ayuda de un webmaster y encontré su material.
Gracias por compartirlo y saludos desde Brasil.
Muchas gracias a ti por leer mi blog, Adir 😉
Gracias por el tutorial Edu! Una pregunta: Esa integración de Zapier, si estoy usando la versión gratuita, tiene alguna limitación en cuanto a la cantidad de contactos que pueden llenar el formulario? Es que ademas cuando seleccione conectar con Webhook, a diferencia de tu video que salia como gratuita, a mi me aparece que es una aplicación «Premium»…pude conectarla igual pero no se si es que solo me durara un mes la conexión antes de cobrarme un plan. Sabes que significa ese «Premium»?
Hola Simón,
Aunque pone Premium a mí me funciona perfectamente. Eso sí, si no tienes un plan de pago, solo podrás recibir 100 contactos al mes a través del Zap.
Un saludo.
Buenas, ¿¿¿me podrías decir como has hecho el formulario y todo???
Hola Jaume,
Claro, aquí tienes: https://refrescandonegocios.com/crear-formulario-contacto-elementor-wordpress/
Un saludo.