Elementor Page Builder está de moda. Poco a poco se va convirtiendo en un referente y cada vez son más los que se pasan a este maquetador / editor web en su WordPress.
Y es del todo normal: para mi a día de hoy es el mejor que hay. Ya lo sabes.
Sin embargo, reconozco que hay una cosilla que Elementor todavía no tiene cubierta del todo: el tema de crear formularios de captación de leads desde su propia herramienta.
Es cierto que Elementor Pro ha incluido en sus últimas actualizaciones la posibilidad de conectar formularios con algunas plataformas de email marketing, pero aún me parece que esta posibilidad está un poco en pañales principalmente por dos motivos:
1. Los formularios no se pueden conectar mediante código HTML, sólo por API.
2. Las API’s disponibles son muy escasas. Tan sólo hay 3 (Mailchimp, Redirect y Webhook).
Es por ello que, a día de hoy, sigo recomendado y utilizando para esta tarea el uso de Thrive Leads.
Sin embargo, he detectado a través de consultas que me han hecho varios lectores del blog, que hay mucha gente que se lía a la hora de combinar Thrive Leads con Elementor más que un gato intentado atrapar la luz de un puntero láser (y lo que es peor, obteniendo el mismo resultado).
Bien, pues precisamente para deshacer el ovillo es para lo que nace este post. 🙂
Voy a contarte paso a paso cómo insertar e integrar formularios creados en Thrive Leads dentro de tus páginas y entradas creadas con Elementor de 3 maneras distintas. Seguramente, las 3 formas más comunes.
Estos 3 procedimientos serán los siguientes:
- Insertar un formulario de suscripción simple creado en Thrive Leads.
- Insertar un formulario en 2 pasos directamente desde Thrive Leads, creando tanto el botón como la ventana emergente del formulario con dicha herramienta.
- Insertar un formulario en 2 pasos diseñando el botón con Elementor y el formulario con Thrive Leads.
¡Empezamos!
Índice de contenidos
Insertar un formulario de suscripción sencillo de Thrive Leads en Elementor utilizando la opción “Lead Shortcodes”
Esta primera forma es la más fácil de todas. Como te he dicho antes, con ella conseguirás insertar en tu blog o web un formulario sencillo para captar suscriptores.
Evidentemente, lo primero que tendrás que hacer es crear un formulario en Thrive Leads.
Para ello, dentro de tu panel de administración de WordPress, dirígete a “Thrive Dashboard” – “Thrive Leads” – “Lead Shortcodes”.
Pulsa en el botón “Add new”, dale un nombre al este shortcode que vas a crear y pulsa en “Add Lead Shortcode”.
Después, ya dentro de la pantalla del Lead Shortcode que acabas de generar, pulsa en “Create Form” para poder empezar a crear tu formulario de suscripción. Tendrás que darle también un nombre al formulario en cuestión.
Cuando ya lo tengas creado, fíjate en el botón azul de la parte derecha que tiene un icono de un lápiz blanco. Este es el botón de editar (y, por tanto, de diseñar) tu formulario.
Púlsalo, selecciona una de las plantillas que Thrive Leads pone a tu disposición y crea tu formulario de suscripción a tu gusto con las herramientas que el plugin pone a tu disposición.
Una vez tengas creado el formulario, vuelve al panel principal de Thrive Leads.
Verás que al lado del nombre del formulario que has generado, tienes un pequeño fragmento de código que tiene la siguiente sintaxis:
[thrive_leads id=’número_de_ID’]
Bien, pues este es el código que nos interesa. Copialo para poder utilizarlo ahora después dentro de Elementor.
Es el momento de que vayas a la página o entrada donde quieras insertar tu formulario y pulses en ella sobre “Editar con Elementor”.
Una vez dentro de Elementor, localiza la zona donde quieras insertar tu formulario.
¿Ya la tienes? Perfecto.
Ahora busca entre las herramientas de Elementor la que tiene el nombre de “Shortcode”. Esta es la que nos interesa.
Arrastra esta herramienta hasta la zona donde quieras insertar tu formulario de suscripción. En principio no te aparecerá nada. No te asustes por ello.
Si pulsas sobre el cuadradito gris donde has arrastrado el elemento de la herramienta “Shortcode” de Elementor, verás que a la derecha te aparece una ventanita con un cuadro de texto.
Bien, pues aquí es donde tienes que pegar el shortcode que has copiado antes en Thrive Leads.
Pulsa “Aplicar” para ver los cambios en tiempo real dentro de Elementor o directamente en el botón “Guardar” de la parte inferior. Si pulsas primero en “Aplicar” también debes pulsar luego el botón “Guardar” para que no pierdas los cambios.
Como diría nuestro actual presidente del gobierno…fin de la cita. 😉
Con esto ya tendrás tu formulario de suscripción insertado en tu diseño de tu página o entrada creada con Elementor. Ha sido muy fácil, ¿verdad?
Crear formulario en 2 pasos (botón + formulario) dentro de Thrive Leads e insertarlo en Elementor
Bien, ahora vamos con la “chicha” del asunto y donde mucha gente se enreda muchísimo.
He detectado que la mayoría de personas tienen verdaderos quebraderos de cabeza a la hora de insertar un botón que, al pulsarlo, haga saltar una ventana emergente que contenga su formulario de suscripción.
En realidad no es tan complicado. Pero sí que noto que en muchas ocasiones hay gente que mezcla procedimientos para hacerlo, conceptos o añade código innecesariamente que hace que el botón no funcione.
Voy a pasar a explicar dos métodos alternativos para hacer esto.
Fíjate bien que he dicho alternativos. Esto es, debes seguir uno u otro. Pero no mezcles los dos. 😉
Puedes utilizar el que más te guste o el que veas más conveniente teniendo en cuenta también algunas observaciones que te haré al final del artículo.
Método 1: Botón y formulario creado en Thrive Leads e insertado con un shortcode en Elementor.
Para empezar a hacer tu formulario de dos pasos mediante este primer proceso, repite los pasos que hemos con el formulario sencillo justo hasta que creas el nuevo formulario dentro de Thrive Leads y le das un nombre.
En el momento de seleccionar una plantilla para tu formulario en Thrive Leads, selecciona la que más te guste para lo que será la ventana emergente de tu formulario.
Una vez hayas elegido tu plantilla, vas a borrar todos sus elementos por completo y a dejar tu pantalla de diseño de formulario de Thrive Leads en blanco.
Sí, sí… has leído bien. Deja todo en blanco.
Tranquilo, que no me he vuelto loco y no te he hecho elegir una plantilla para nada. Ya verás más adelante que tu elección te va a resultar útil. 😉
Después, crea un simple botón y editalo a tu gusto. Este será el botón que, al pulsarlo, genere una ventana emergente (conocida también como “lightbox”), la cual contendrá tu formulario.
Cuando termines de diseñar tu botón, quiero que te fijes en la parte de abajo de tu pantalla de Thrive leads.
Ahí verás que un botón azul muy grande que pone “Default State”. Justo al lado hay otro en gris que pone “Add”. Púlsalo y selecciona “Lightbox”.
De este modo entrarás en la pantalla de edición de la que va a ser la ventana emergente que aparecerá al pulsar el botón que acabas de crear en el estado por defecto (“Default State”).
Edita el formulario a tu gusto y guárdalo. Ahora vuelve a pulsar sobre “Default State” para volver a la pantalla de edición y diseño del botón.
Ha llegado el momento de indicarle a nuestro botón que debe abrir la ventana emergente que acabamos de crear cuando cualquier usuario lo pulse. O lo que es lo mismo, vamos a vincular el botón con tu «lightbox».
Para ello, selecciona el botón haciendo click en él y, en sus opciones de diseño, pulsa en “Event Manager”. Acto seguido, pulsa en el botón verde que pone “Add event” (Añadir evento).
Ahora tendrás en pantalla con dos campos a seleccionar: uno es el disparador (Trigger) y el otro la acción que se realizará cuando ocurra lo que se indique en el disparador (Action).
Bien, pues selecciona como disparador “Click” y como acción “Open Lightbox State”.
Después, en el nuevo campo desplegable que te aparecerá (el que pone “Select lightbox state”) selecciona la ventana emergente que acabas de crear. Si no has cambiado su nombre por defecto, se llamará “Lightbox 1”.
Pulsa en “Save Event” y luego en “Close”. ¡Ya tienes vinculado el botón con la ventana emergente! 😀
Ahora guarda todos los cambios antes de cerrar la ventana de edición de Trive Leads pulsando en “Save changes”.
Ya puedes volver a la pantalla principal de Thrive Leads. Acto seguido, al igual que hicimos con el formulario simple en el primer apartado de este post, copia el shortcode que se ha generado con tu nuevo formulario (ya sabes, algo del tipo «[thrive_leads id=’número_de_ID’]»).
A partir de aquí, repite el proceso que hemos visto antes para insertar este código que acabas de copiar en Elementor con su herramienta llamada “Shortcode”.
Como dirían los franceses… C’est fini!
Al igual que antes, aquí te dejo un vídeo de todo el proceso por si en algo no me he explicado bien o no has entendido alguna cosilla bien al 100%.
Al final no ha sido tan complicado, ¿a que no? 😉
Método 2: Botón creado con Elementor y formulario en ventana emergente creado con Thrive Leads.
Bueno, pues ahora que ya sabes como hacer todo con Thrive Leads, voy a enseñarte una segunda forma de hacer lo mismo pero de manera diferente para que tengas alternativas (que nunca está de más, ¿no crees?)
En esta ocasión, vamos a ir primero al panel principal de Thrive Leads y más concretamente a su sección llamada “ThriveBoxes”.
Para crear un nuevo formulario dentro de esta sección, vas a ver que el proceso es similar al que hemos visto en los otros dos apartados.
Pulsa en el botón “Add new” que se encuentra al lado del título “Thriveboxes”, ponle un nombre que quieras y pulsa en “Add Thrivebox”.
Cuando ya tengas creado tu Thrivebox, crea un formulario pulsando en “Create Form”. Da un nombre a dicho formulario y vuelve a pulsar en el botón verde que tiene el mismo texto (“Create Form”).
Cuando lo tengas creado, pulsa en el botón azul con el lápiz para editar el diseño de tu formulario y tu ventana emergente.
Diséñala a tu gusto ya sea seleccionando una de las plantillas que pone Thrive Leads a tu disposición o haciendo tu diseño desde cero. Como prefieras.
Cuando hayas terminado de diseñar todo a tu gusto, guarda los cambios pulsando en “Save Changes” y vuelve al panel principal de Thrive Leads.
¿Recuerdas cuando copiábamos el shortcode en los dos métodos anteriores para luego insertarlo en Elementor? Bien, pues aquí va a ser muy parecido pero no exactamente igual.
Copia el shortcode que se te ha generado después de diseñar tu Thrivebox, que será algo de este tipo:
[thrive_2step id=’numero_de_ID’]Trigger goes here[/thrive_2step]
Ahora pulsa en “Editar con Elementor” en cualquier página o entrada en la que quieras incluir un botón que al ser pulsado lance este formulario que acabas de crear.
Una vez en la pantalla de diseño de dicha página (es decir, la pantalla de edición de Elementor), incluye un botón y dale el diseño que quieras con las opciones de este maquetador visual web.
Ahora viene el “quid” de la cuestión. Vamos a ver cómo enlazar correctamente ese botón creado en Elementor con la Thrivebox generada en Thrive Leads.
En ese botón que has creado en Elementor, deja la opción “Enlace” en blanco.
En la opción “Texto” de dicho botón, copia el código de la Thrivebox que has copiado antes pero sustituyendo el texto “Trigger goes here” por el texto que quieres que aparezca en tu botón (por ejemplo, «thrive_2step id=’numero_de_ID’]Este será el texto de mi botón[/thrive_2step]»).
Al hacer esto, verás que dentro de Elementor te aparecerá todo el código y no sólo el texto del botón que tú deseas. No te asustes. Guárdalo tal cual.
Si ahora vas a la página como tal (es decir, ves la página de manera normal, sin el editor de Elementor) verás que tu botón se ve correctamente, sólo con el texto que le has especificado y, al pulsarlo, lanzara tu Thrivebox sin problema alguno.
¡Fantástico! ¡Lo has conseguido! Ya has combinado Thrive Leads con Elementor como un auténtico maestro. 😉
Como en los métodos anteriores, aquí tienes un vídeo de todo el proceso con la idea de que no tengas ni una sola duda al seguir este tutorial.
Observaciones a tener en cuenta a la hora de seguir uno u otro método
Para terminar, quiero hacerte algunas aclaraciones respecto a estos procedimientos que he podido sufrir por mi mismo para que tú lo tengas en cuenta a la hora de realizar en tu blog o web un procedimiento u otro.
1. En los sliders de Elementor, el segundo de los métodos no funciona. Si quieres que en un botón de un slider salte una ventana emergente con un formulario no te quedará más remedio que utilizar otro plugin llamado Convertplug (te digo este porque es el que yo he probado para hacerlo y sé que funciona, pero seguro que hay alguno más).
2. Si usas el segundo de los métodos, la ventana emergente sólo se lanzará si se hace click encima del texto, no de todo el botón. Pero si quieres utilizar los botones de Elementor o las opciones de diseño de dichos botones generados con este maquetador visual, no tienes otra opción.
3. Si generas tanto el botón como el formulario con Thrive Leads, ten en cuenta que el tiempo de carga será un poquito mayor. Esto sucede irremediablemente porque tienes que realizar más llamadas en el código, ya que todo se carga desde el plugin y no en la página directamente.
De hecho, al hacerlo así, notarás que primero se carga toda la página que hayas creado y un pelín después el botón diseñado con Thrive Leads (ocurre lo mismo si sólo cargas un formulario sin botón).
Pero vamos, tampoco te alarmes por ello, que no es ni mucho menos una barbaridad. 😉 De hecho, yo por norma general es el método que uso habitualmente.
Conclusión
Desde el día de hoy, insertar formularios de Thrive Leads en Elementor ya no tiene misterios. Conoces todos sus secretos y nunca jamás tendrás problema para combinar uno con otro. 😉
Como siempre, puedes dejarme tus impresiones un poco más abajo en los comentarios. Recuerda también compartir el artículo en las redes sociales para que pueda ayudar al máximo número de personas posible. 🙂
21 comentarios en «3 formas de insertar formularios de Thrive Leads en Elementor»
Hola Jose, recién veo tu post por cierto es un excelente aporte a los que estamos comenzando en esto del blogging, me surge la siguiente duda… es posible realizar lo que expusiste en este post pero en vez de utilizar thrive leads hacerlo con Magic Action box? , es decir existe alguna manera de INSERTAR FORMULARIOS DE MAGIC ACTION BOX O DE ALGUN PLUGIN GRATUITO EN ELEMENTOR?
Saludos…
Hola Geomar,
Si hablamos de insertar los formularios mediante shortcodes, es posible siempre y cuando tu herramienta te los facilite. Simplemente tendrías que utilizar los shortcodes propios de dicha herramienta. Tampoco puedo decirte mucho más porque no utilizo Magic Action Box.
Saludos!
Me ha venido super este post!
Gracias por compartilo
Me alegro Joel. Gracias a ti por dejar tu comentario. 🙂
Hola José.
Ninguna de las 3 formas de integrar Thrive Leads con Elementor me funcionan.
El shortecode de Elementor ni siquiera muestra mis formularios…¿habrá sido alguna actualización reciente que haya causado el problema?
Saludos,
Jaime.
Hola Jaime,
Hasta donde yo sé, ninguna de las actualizaciones ha causado un problema similar al que comentas. Menos aún con la opción de «Lead Shortcodes», que funciona con la herramienta Shortcodes de Elementor la cual está 100% funcionando a la perfección.
¿Puede ser que se trate de algún tema de incompatibilidad con otros plugins o el tema que estás utilizando? Compruébalo y me comentas.
De todos modos, si piensas que es un problema de la versión, siempre puedes volver a una versión anterior de Elementor fácilmente desde «Elementor – Herramientas – Control de versiones». 😉
¡Saludos!
Juan Antonio.
El artículo es muy interesante y expuesto con enorme claridad y detalle.
Tenía cierta idea de cómo hacerlo, pero has aportado mejoras y pulido ciertas dudas.
Comentarte que, en la nueva versión 2.05 de Thrive leads, cambia sustancialmente la forma de trabajar, sobre todo, con shortcodes. Pero he encontrado la manera.
Muy agradecido y te seguiré de cerca.
Un abrazo.
Hola Luis,
Efectivamente, con la última actualización del maquetador de Thrive Themes, ahora las cosas son un pelín diferentes en el editor. Quizás es un buen motivo para grabar un vídeo y explicar la nueva forma de trabajar que comentas. Lo tendré en cuenta. 😉
¡Un fuerte abrazo!
Perdona. Jose Antonio.
Hola Jose, algunos meses atrás cree mi formulario con la opción 2 que explicas (botón y formulario con Thrive leads), con la nueva actualizaciones, he conseguido un pequeño obstáculo que te comento a continuación. He seguido todos los pasos tal como explicas; en la parte de elegir la plantilla de formulario tampoco tuve problema (elimine todo de la plantilla, deje todo en blanco , luego añadí un botón nuevo, lo configure y guardé), hasta ahí todo perfecto. Ahora bien, cuando doy click en ADD NEW STATE y elijo “Lightbox” como siempre, solo que aquí es donde ocurre el problemilla (debería aparecer la plantilla que previamente seleccioné, cosa que ya no ocurre sino que sale un “Content box” en blanco. Y como sabrás ahí he quedado trancado. No se si ya has visto ese detalle. Si puedes echarme una mano con eso te agradecería.
Saludos
: Me encanta tus videos y me encanta que uses elementor, tengo una duda me gustaría crear un directorio de contenidos pero no se si es posible visualizar por ejemplo el contenido en elementor. Es decir si el usuario mediante un formulario privado crea una especie de Post sea vea con Elementor y el Post creado también visualizarlo con Elementor. Se puede hacer? Puedo ver las páginas que has hecho en Elementor. Muchas gracias por tu tiempo y tus videos
Hola Sol,
Realmente no entiendo muy bien lo que planteas. Según te he entendido yo, me preguntas si un usuario puede crear posts con Elementor. Bien, pues sí, es posible. Elementor vale para diseñar páginas y entradas.
Aparte de esto, hoy han sacado una nueva herramienta en la versión Pro para diseñar posts en tu blog de manera más avanzada. Te dejo el enlace: https://elementor.com/single-post-widgets/
Si no es esto lo que me preguntabas, aclárame qué quieres hacer exactamente con un ejemplo o algo así.
Saludos!
Hola Jose Antonio. Me ha encantado el artículo. Realmente te explicas genial y me encanta que cada apartado lo tengas apoyado de forma visual.
Quiero explicarte mi experiencia a ver si te has encontrado con ella.
He creado una optin form con Thrive Leads del tipo «content lock»… esos formularios que se ponen para bloquear el contenido de un post y que aparezca cuando dejas los datos.
Pues bien…. El shortcode que te genera es parecido al de «thrive box» pero lo que va en medio de los shorcodes es el contenido que quieres bloquear.
Lo he intentado hacer usando Elementor pero no me bloquea bien el contenido. Sale la optin form y también sale el contenido que tendría que estar bloqueado.
¿Tienes alguna idea de cómo solucionarlo?
Muchas gracias por la ayuda… un abrazo
Hola Jose
Excelente artículo , enhorabuena !!
Me he puesto manos a la obra con los formularios de Thrive leads y Elementor, y me he estancado con un problema de «1º de columpios»
Me diseño un formulario de shortcode , eligo una plantilla y cambio colores y algo de texto, luego selecciono el botón verde de GUARDAR abajo .
Después voy a ver en la web como ha quedado y compruebo que no se han guardado los cambios.
Si me aparece el formulario, pero el de la plantilla original tal cual viene de serie en trhive leads, sin los cambios de colores ni textos que le he realizado y guardado
¿Me podrías dar una pista de que me puede estar pasando?
LLevo toda la tarde con este problema que no me deja avanzar 🙁
Muchas gracias de antemano
Un saludo
P.D: Puedo enviarte una captura de pantalla si lo crees necesario
Hola Raúl,
Seguramente es un problema de caché de tu web. Prueba a borrar tanto la caché de tu navegador como la de tu plugin de caché, así como la de tu servidor (si la tuvieses). Marca también la opción «Lazy Loads» en los ajustes de Thrive Leads. Y, por último, prueba también en una ventana de incógnito en tu navegador. A ver si así solucionas el problema.
Saludos!
Hola José, te comento que compre el plugin, peo no encontraba como integrarlo con elementor, ahora veo que no hay limitaciones para diseñar en wordpress. Gracias por los videos.
Hola Arthur,
Limitaciones en realidad nunca hubo. Sólo que ahora es mucho más sencillo implementar cualquier cosa, pero limitaciones no hay siempre que tengas conocimientos de código CSS, HTML, PHP, etc. 😉
Me alegra leer que el tutorial te ha sido de utilidad.
Gracias por tu comentario. Un saludo!
Buenas tardes Jose Antonio,
Muchísimas gracias por el artículo. Me ha venido estupendamente.
Tengo sin embargo una duda, ¿puedo usar un shortcode de un formulario en dos páginas diferentes?
He clonado la página y no me va bien el shortcode y he creado una página nueva y tampoco me funciona.
¿Tengo que crear un formulario diferente para cada página en la web? Me parece poco operativo.
Muchas gracias!
Hola Sergio,
Sí, no debe darte ningún problema por el hecho de utilizar el mismo shortcode en dos páginas diferentes. De hecho, yo en esta misma web estoy utilizando un mismo shortcode en diferentes páginas y ya ves que funciona a la perfección.
Saludos!
Hola José Antonio!
Para crear mi formulario de suscripción, tenienendo Elementor Pro y Mailchimp.. ¿Con cuál me recomendarías crearlo, directamente con la opción que me da MailChimp o sería mejor hacerlo con el widget de Elementor y luego conectarlo?
Muchas gracias
Saludos
Maite
Hola Jose Antonio,
Muchas gracias por este articulo tan completo. Estoy utilizando la segunda opcion del boton de elementor + el shortcode de thriveleads, pero lamentablemente no me funciona.
Han cambiado algo en la configuracion y tenemos que hacerlo de forma distinta?