Thrive Leads y Elementor.

3 formas de insertar formularios de Thrive Leads en Elementor

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!

 

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”.

Insertar formularios de Thrive Leads en Elementor.

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.

Formularios de Thrive Leads en Elementor.

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:

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.

Plantillas de Lead Shortcodes en Thrive Leads

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).

Elementor y Thrive Leads.

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 “).

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:

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. 🙂

3 formas de insertar formularios de Thrive Leads en Elementor
2 votos | Media: 5
José Antonio Carreño
Diseñador web freelance especializado en el CMS Wordpress. Ayudo a bloggers, negocios unipersonales y emprendedores digitales a crear un blog profesional atractivo cuyo diseño esté orientado a conseguir conversiones. También te echo una mano a través de mi blog escribiendo artículos, consejos, reviews o tutoriales en los que te hablo sobre temas referentes a Wordpress, diseño web y blogging
José Antonio Carreño
- 2 días ago
José Antonio Carreño
José Antonio Carreño

10 comentarios en “3 formas de insertar formularios de Thrive Leads en Elementor

  1. 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!

  2. 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!

  3. 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!

Deja un comentario

Share This