Cómo crear formularios y pop ups de infarto con Elementor para captar suscriptores

Pues bien, parece que estos chicos de Elementor no paran de sorprendernos 🙂

Tanto es así, que acaban de ganar el premio al mejor plugin del año para WordPress.

Nuevamente vienen a la carga con nuevas novedades, y en este caso, lo hacen de la mano de los famosos Popups.

Así que toma asiento y quédate un ratito que vengo a contarte de que trata todo esto.

Novedades de esta versión

Bueno antes de nada, es importante que tengas en cuenta que estas nuevas opciones podrás tenerlas a mano siempre que tengas la versión PRO del plugin.

Si todavía no tienes la versión premium de este maquetador, no sé a que estás esperando para pillarla… porque esta claro que estos chicos vienen a quitar de un plumazo un montón de plugins que usamos en WordPress, concentrándolos todos en uno.

Esto vas a poder hacer con la última versión:

• Crear formularios: esta opción ya venía incluida en las versiones anteriores del plugin con el widget «Forms», pero vamos a profundizar un poco en ella de cara a captar suscriptores.
• Crear pop ups: esta nueva funcionalidad promete, ya que gracias a ellas vas a poder recoger leads para ofrecer los productos o servicios de tu proyecto online de unas cuantas maneras.

Tipos de Formularios que puedes crear con Elementor

Cómo ya sabrás, anteriormente hemos creado formularios a través del famoso plugin Contact Form 7, pero gracias a Elementor PRO podrás crear formularios de contacto para tus páginas a otro nivel de diseño.

Además, con las últimas actualizaciones del maquetador puedes hacer otro tipo de formularios enfocados a captar leads para tu proyecto online, ya sea para vender productos o servicios a través de un ecommerce, o captar suscriptores para poder enviarles en el futuro newsletters con novedades.

Y por último, veremos la última incorporación de Elementor: los famosos popups que trastearemos un poco más adelante 😉

1.- Formularios de contacto

En este apartado, voy a enseñarte como crear los formularios más básicos para que, a través de la página de contacto de tu web, tus visitantes puedan ponerse en contacto contigo personalmente para preguntar por tus productos y servicios.

Pero no sólo vas a poder diseñar formularios básicos sin tener que tocar nada de código, podrás incluir todos los campos que quieras para solicitar la información que necesites a tus futuros clientes.

Recuerda, que para poder utilizar el widget de «Formulario» que incorpora este maquetador, tendrás que tener la versión PRO de Elementor.

Ajustes principales para el Formulario Email

Una vez has visto en el vídeo anterior las capacidades de este plugin, vamos a pasar a ver un poquito la parte técnica.

Sólo con arrastrar este widget dentro de la página en concreto que estés maquetando, vas a tener un formulario base como éste:

Cómo puedes ver en el primer apartado «Contenido«, vas a poder incluir todos los campos que necesites para solicitar datos personales a través del formulario.

Sólo tienes que darle al botón de «Agregar Elemento» y seleccionas el tipo de contenido a pedir.

Es muy importante que en este apartado incluyas un nuevo campo «Acceptance» para incluir el checkbox «He leído y acepto la política de privacidad», ya que si recuerdas, desde el pasado Mayo 2018 hay que cumplir estrictamente la nueva ley RGPD.

Otro punto muy importante a configurar en tu formulario es el apartado «Submit button» (para trabajar el tipo de botón a incluir), y «Actions after Submit + Email» para establecer que acción quieres utilizar cuando el usuario haga clic en el botón.

Tienes varias opciones, pero en este caso en concreto tienes que dejar la que viene por defecto «Email«.

Después, en el siguiente apartado, tienes que establecer el correo electrónico donde se va recibir la consulta por parte del visitante:

Una vez completada esta primera parte técnica, tendrás que establecer el diseño del propio formulario en el apartado «Estilo» jugando con los colores del botón, tipografías, fondos, etc.

En este vídeo, puedes ver cómo hacerlo paso a paso:

Ejemplos de diseños de Formularios

En la propia web de Haciaelautoempleo, Omar utiliza el widget de Formulario de Elementor para crear uno acorde a su estilo y marca personal:

También puedes ver otro estilo totalmente distinto en la web de Abrazando el Cambio, donde Alicia utiliza un diseño más colorido y femenino, igualmente, acorde a su público objetivo:

Consejo: Si ves en alguna página web un formulario de contacto visualmente atractivo y que te llame mucho la atención, aunque no esté diseñado con Elementor, siempre podrás replicarlo con el maquetador. Esta es una buena forma de aprender y coger ideas de otros sitios 🙂

Plantillas Base que puedes utilizar de la propia Biblioteca de Elementor

Si entras dentro de la biblioteca del maquetador, puedes buscar plantillas específicas para páginas de contacto,que incluyen formularios con diseños muy atractivos, que puedes aprovechar para tu propio proyecto.

Además, a través de esta página, puedes descargarte un montón de plantillas que podrás utilizar en tu proyecto o en los de tus propios clientes.

2.- Formularios para captar suscriptores

Esta es otra opción muy interesante que incorpora Elementor, de cara a crear formularios con el objetivo de captar leads para tu proyecto.

Además, gracias a las últimas actualizaciones, puedes vincularlos con más proveedores de email marketing como es el famoso Mailchimp o Active Campaign.

Aunque todavía les quedan algunas cositas por pulir y algunas funcionalidades pendientes, cómo el tema del doble optin, entre otras (que comentaremos luego) sin duda es una de las mejores formas de crear formularios de captación de suscriptores, ahorrándote incluso si cabe, plugins como Thrive Leads.

Ajustes principales para el Formulario Captación Leads

Aquí el procedimiento es muy parecido al anterior: arrastras el widget de Formulario y personalizas los campos del formulario que necesites.

Luego retocas el apartado «Estilo y Avanzado«, en función de los colores, tipografías y espacios que vaya a tener el diseño de tu formulario.

Una vez realizados estos primeros ajustes, luego pasamos a la parte más técnica.

En primer lugar tienes dos opciones.

Puedes vincular en el apartado general de «Elementor>Ajustes>Integraciones» dentro del escritorio WP, la API Key del proveedor de email marketing que vayas a utilizar, de la siguiente forma:

O bien, como segunda opción, seleccionar la opción «Custom» para introducir la API Key directamente desde el maquetador de esta otra forma:

Una vez validado este dato, sólo tendrás que seleccionar la lista y el grupo que hayas creado dentro de Mailchimp (o el proveedor que tengas y esté disponible en el listado de opciones de Elementor), junto con los campos de información que vas a solicitar para empezar a captar suscriptores.

Nota: Si alguno de los proveedores de email marketing que vayas a utilizar no te aparece en el listado de «Actions after submit«, puedes vincularlo a través de la herramienta Zapier con la opción «Webhook«.

Muy importante marcar el «Doble optin» para cumplir a rajatabla el tema de la RGPD.

Después, para finalizar el proceso de suscripción, puedes crear una segunda acción para redirigir al usuario una vez se suscriba a una página de gracias para la confirmación e informarle que en segundo paso tiene que aceptar la solicitud de consentimiento para cumplir con la protección de datos.

Nunca se sabe si en un futuro pueden pedírtelo, así que mejor prevenir que curar.

Para ello, agregas la acción «Redirect» y posteriormente pones la URL de la página de gracias que hayas creado en el apartado «Redirect to» (puedes diseñarla también con Elementor).

Vamos, resumiendo, aquí tienes un Gif muy bien explicado en apenas 5 segundos de los pasos que tienes que realizar:

*IMPORTANTE: Hasta ahora, si vinculas tu formulario de Elementor para captar leads con Active Campaign, el proceso de doble optin no lo desarrolla correctamente (a menos que los chicos de Elementor lo arreglen). Por lo tanto puedes tener un pequeño problema a la hora de cumplir la ley RGPD.

Mi recomendación es que en el apartado «Actions after submit» incluyas 2 acciones después de incluir tu proveedor de email marketing:

1.- «Redirect» a una URL donde des las gracias al usuario por suscribirse en tu formulario y avisándole de que le llegará un email para terminar de apuntarse a tu lista.

2.- «Email«, para enviar un correo electrónico a la bandeja de entrada del usuario que incluya el enlace de aceptación de tu proveedor de email, con el objetivo de quedarte con constancia de que ha aceptado la política de privacidad, y terminar de confirmar que realmente sí quiere apuntarse a tu newsletter.

————–

Ya tendrías creado tu formulario para captar suscriptores para tu lista de email marketing.

Sólo te falta hacer pruebas para comprobar que todo funciona correctamente.

Recuerda que puedes guardar ese formulario como una plantilla para insertarlo después en cualquier parte de la web que necesites, ya sea a través del «Shortcode» insertándolo donde lo necesites, o bien a través de las condiciones de visualización.

Aquí puedes ver un vídeo tutorial explicado paso a paso, espero que te ayude:

Plantillas para crear Formularios de Captación Suscriptores

Dentro del apartado «Bloques» cuando añades una plantilla desde el propio maquetador, puedes seleccionar algunos de los modelos que hay disponible en la pestaña «Subscribe«.

Es cierto que los tipos son limitados, aunque siempre puedes ver modelos de formularios de la competencia para captar ideas e intentar replicarlos 😉

Otras utilidades del widget Formulario

Este widget de Elementor no sólo te va servir para que los clientes se pongan en contacto contigo, sino que además puedes crear formularios avanzados para otras funcionalidades, como son:

• Carga de archivos.
• Casilla de verificación de aceptación
• Selectores de fecha y hora
• Campos de contraseña
• HTML

Aquí tienes un tutorial completo por si necesitas aplicar algunas de estas utilidades.

Los PopUps de Elementor PRO

Bueno, después de haberte enseñado como crear los formularios más básicos para que puedan contactar contigo a través de tu web y a la vez puedas captar leads para tu lista de email marketing, vamos a pasar a ver lo último de lo último en Elementor, la nueva funcionalidad de los PopUps.

Tipos de Pop Ups que trae Elementor

Una vez actualices el plugin, vas a disponer de unos cuantos tipos de popups que diseñar.

Algunos enfocados para crear “login” en intranets para empresas, otros para incentivar “ventas” en tiendas online y alguno que otro para animar la “captación de suscriptores” en blogs y negocios online. ¿Nada mal no? ?

Dentro del menú Plantillas en el escritorio de tu WordPress, se te va habilitar una nueva opción «Popups» para empezar a crear tu primer diseño.

Una vez selecciones el tipo de plantilla popup a crear, vas a tener disponible para elegir un montón de modelos dentro de la biblioteca de Elementor.

Hay distintas plantillas a elegir dependiendo de la categoría que elijas, según el tamaño y la localización del popup que quieras insertar en tu web, entre las que tenemos:

• Bottom-Bar: este popup es el que va mostrarse situándose en el footer de nuestro sitio web en forma de rectángulo abarcando toda la pantalla.

• Classic: este otro es el típico que conocemos todos, de forma cuadrada con una imagen, texto y un botón de llamada a la acción.

• Fly-in: es un popup flotante que puedes tener distintas disposiciones laterales o en las esquinas.

• Full Screen: este si es el típico popup que tal y como dice su nombre, abarca toda la pantalla de la web.

• Hello Bar: popup que aparece en el header de tu sitio web.

• Slide-In: y por último, este modelo aparece deslizándose en la zona lateral de la página.

Una vez has visto que plantillas hay en la biblioteca, vamos a ver ahora los tipos de popups que puedes insertar en tu web, en función de la funcionalidad que necesites:

• 1.- Login PopUp: A través de este popup, puedes insertar un cuadro de login para que tus usuarios se logueen para entrar dentro de tu web. Puede ser útil si tienes alguna membresía o acceso tipo intranet. Aquí puedes ver un tutorial más relevante con el paso a paso. 
• 2.-Hello Bar Countdown Popup: Cómo te decía antes, puedes crear popups para que aparezcan en el header. En este vídeo puedes ver un ejemplo para crear el tuyo. 
• 3.- Popup for your Shop Archive Page: Si tienes una tienda online donde vendes productos, puedes introducir un popup a nivel de la página principal «Archive», donde aparece la lista de los artículos. Aquí tienes más info. 
• 4.- Related Articles Popup: En cambio, si tienes un blog, puedes insertar popups para mostrar al final de cada post, otros artículos relacionados para tus usuarios sigan en la web y no salgan de ella al terminar de ver tus contenidos. En este otro tutorial, los chicos de Elementor te explican como llevarlo a cabo. 
• 5.- Menu that triggers a popup: También puedes crear menús responsive interactivos a través de los popups. Mira como hacerlo en este vídeo. 
• 6.- Shopping cart popup: ¿Tus clientes no terminan de finalizar las compras a través de tu web? Pues una posible solución es crear un popup para incentivar las ventas en la página de checkout. Aquí puedes ver el paso a paso de cómo crearlo.
• 7.- Button to trigger a popup: ¿Quieres crear un botón para desencadenar un trigger en otra ventana? Pues con los popups también puedes hacerlo. Mira más en este tutorial.

Cómo habrás podido ver, las posibilidades con Elementor para crear popups son múltiples.

¿A qué esperas para empezar a darles forma en tu sitio web?

Sin duda es una buena forma de aumentar la captación de suscriptores o incentivar las ventas de tu proyecto 🙂

Ajustes principales de Popups

1.- Ajustes

Una vez visto los tipos de popups que podemos diseñar con Elementor, vamos a pasar a la parte más técnica.

¡Allá vamos!

Cuando creamos una plantilla popup y entramos en el maquetador, lo primero que puedes hacer es elegir una categoría o bien crear una desde cero con los widgets de Elementor.

Después, nos aparecerá esta pantalla para elegir los «Ajustes principales» de nuestro popup:

Como ves, en este primer apartado puedes ajustar la disposición del popup, el tamaño, alto y la posición principal que va tener (horizontal o vertical).

Luego puedes indicar si quieres que el popup tenga una capa de fondo oscura (Overlay) y si quieres o no mostrar el botón «x» para que el usuario pueda cerrar el popup: Close Button (te recomiendo dejarlo activado ya que sino puede ser intrusivo, dado que estás obligando sí o sí al visitante a suscribirse a tus contenidos y más de uno puede tomárselo a mal).

En el siguiente apartado «Configuración general» puedes modificar el título del popup y el estado del mismo (borrador, pendiente de revisión, privado o publicado).

Por último, en el apartado «Preview Settings» puedes establecer el popup como contenido dinámico dependiendo de si quieres crearlo para la categoría «archive» o «individual».

2.- Estilo

En los ajustes de estilo puedes trabajar el tipo de fondo y borde del popup, así como la sombra de caja.

El apartado «Overlay«, te permite personalizar el color de fondo de la capa oscura del popup o bien con una imagen e incluso un degradado.

Por último, la pestaña «Closse Button» te da la opción de indicar si quieres ese botón «x» dentro o fuera del popup, la posición y el color del mismo.

3.- Avanzado

Dentro de este apartado puedes ajustar las opciones para mostrar o cerrar automáticamente el popup dentro de un período determinado de tiempo en segundos.

Además, puedes activar los botones para prevenir que el usuario cierre el propio popup con la tecla ESC o incluso impedir que haga scroll.

Después como siempre, puedes trabajar el relleno y los márgenes del widget, así como incluir clases de CSS personalizadas.

4.- Condiciones de visualización

Aquí vas a poder indicar donde quieres que se muestre tu popup.

Sólo tienes que agregar la condición que quieras: que se muestre en todo el sitio web, en el listado archive de post o en un post individual concreto.

Recuerda que al igual que puedes incluir condicionales también puedes excluir, por ejemplo, indicando que se muestre en toda la web, excepto en un post concreto que tú le indiques a Elementor.

5.- Triggers

Los triggers son aquellas acciones que debe realizar el usuario para que se abra el popup.

Por tanto, vas a poder establecer:

• On Page Load: el popup se mostrará cuando se cargue la página tras «x» segundos que establezcas.
• On Scroll: cuando el usuario haga scroll hacia arriba o abajo, dependiendo del % que establezcas en las opciones del mismo.
• On Scroll To Element: si el usuario hace scroll a un elemento con una clase específica que puedes indicar, se muestra el popup.
• On click: al hacer un nº determinado de clics, entonces se abrirá el popup.
• After Inactivity: o bien, puedes establecer que después de un tiempo de inactividad (en segundos), para que se vuelva a mostrar tu popup.
• On Page Exit Intent: si el usuario intenta salir de la página, entonces le decimos que se muestre el popup activando este botón.

6.- Advanced rules

Dentro de las reglas avanzadas, puedes realizar los siguientes ajustes:

• Show after X page views: mostrar el popup después de un número determinado de páginas vistas.
• Show after X sessions: en este caso, haces que aparezca el popup después de x sesiones por parte del usuario.
• Show up to X times: con esta opción le dices a Elementor cuantas veces muestras el popup diseñado.
• When arriving from specific URL: aquí enseñas el popup cuando el usuario llega desde una URL específica.
• Show when arriving from: en este apartado muestras el popup si llega desde los enlaces internos, externos o motores de búsqueda (hasta esas 3 opciones te permite establecer).
• Hide for logged in users: si no quieres que le aparezca tu popup a los usuarios registrados, sólo tienes que activar este botón.
• Show on devices: por último, con esta opción puedes decirle a Elementor, que tu popup sea mostrado en los distintos dispositivos (pc, tablet y/o móvil).

7.- Guardar como plantilla

Cómo siempre, Elementor te permite guardar todas tus creaciones para poder guardarlas como plantillas y reutilizarlas en otros lugares de tu sitio web, e incluso exportarlas e importarlas en otras páginas.

Aquí puedes ver un pequeño resumen de todo lo que he explicado arriba detenidamente:

Cómo crear los Pop Ups

Todo lo que hemos visto esta genial para tener una idea general de los tipos de popups y saber como crearlos, pero como mejor se ve es a través de un ejemplo práctico y con un vídeo, así que voy a explicarte brevemente como puedes diseñar popups de infarto para tu web 😉

En este otro vídeo, puedes ver los ajustes básicos del popup y otras opciones a modo de resumen por parte del equipo de Elementor:

Ejemplos Reales

Aquí tienes un claro ejemplo de Popup cuando entramos en la web de Omar, donde nos salta uno enfocado a captar leads cuando hay apertura de plazas para la Academia.

Conclusiones

Cómo habrás visto los chicos de Elementor no paran… ya no sé de que forma van acabar sorprendiéndonos.

Está claro que han venido a revolucionar el mundo del diseño web con WordPress.

Y claro, visto esto, ¿crees que Elementor puedes ser una alternativa para crear popups, si lo comparamos con Thrive Leads?. Esta más que claro que sí.

El problema es que a nivel de datos estadísticos, todavía no podemos obtener resultados, así que para ello si te seguiría recomendando como mejor opción Thrive Leads, de cara a poder trabajar una estrategia en condiciones y hacer test A/B.

Por otro lado, el tema de que un único plugin haga todas estas tareas… si en un futuro desaparece y tenemos que sustituirlo por otro, puede ser un problema…

Pero parece que a los chicos de Elementor, todavía les queda para rato, ¿no crees?

¿Y tú que opinas de todo esto? Te espero en los comentarios 🙂