Cómo hacer que aparezca el formulario de participación de Bloom al hacer clic en un botón

Es difícil imaginar Internet sin formularios de suscripción hoy en día. Los usamos en nuestro sitio web por dos razones principales en particular; conseguir suscriptores o generar clientes potenciales.

Encontrar la forma correcta de acercarse a su audiencia con formularios de suscripción puede ser un verdadero desafío. Algunas personas quieren ir a lo seguro y no quieren que sus visitantes sientan que están "invadiendo" su burbuja de Internet con formularios de suscripción no deseados. Ese suele ser el momento en que las personas eligen un formulario de suscripción que aparece después de hacer clic en algún lugar específico del sitio web, o cómo lo llamamos; 'Activar al hacer clic'.

En el tutorial de hoy, le mostraremos exactamente cómo puede hacer uso de estos activadores de clic en algunas de las partes más importantes de su sitio web. Una vez que haya logrado incluir la opción de hacer clic en el activador, no olvide medir los resultados que le brinda para ver si lo ayuda a progresar.

Cuándo usar un formulario de suscripción después de un clic

Básicamente, puede hacer que cualquier cosa en su sitio web active un formulario de suscripción. Pero usarlo en los lugares equivocados puede volverse rápidamente en su contra. La gente está acostumbrada a hacer clic aleatoriamente en un sitio web todo el tiempo; cuando están leyendo algo, por ejemplo. O incluso simplemente cuando miran a su alrededor, a menudo hacen clic en algún lugar del sitio web sin un propósito.

Ahora imagina que eres el visitante; con cada clic aleatorio, es posible que se enfrente a un formulario de suscripción inesperado debido a una acción que realizó sin un propósito. Sin duda, eso va a tener un efecto negativo porque, en ese momento, sentirá que no tiene ningún control cuando visite ese sitio web.

Sin embargo, colocar un formulario de habilitación de activación de clic en lugares donde las personas eligen voluntariamente hacer clic o no hacer clic (como botones o llamadas a la acción en general) es otra historia. Estamos familiarizados con hacer clic en una CTA (llamada a la acción) para que no nos asuste. Estamos eligiendo deliberadamente ver qué paso es el siguiente. Si no tenemos curiosidad por ver qué hay detrás de una llamada a la acción, simplemente no haremos clic. Pero si queremos, podemos. Esta 'opción' que tienen los visitantes los hace sentir más cómodos cuando finalmente aparece un formulario de suscripción y aumenta las posibilidades de que realmente se suscriban a su boletín informativo.

Cómo hacer que aparezca el formulario de participación de Bloom al hacer clic en un botón

Suscríbete a nuestro canal de Youtube

Cree su formulario de suscripción

Hacer que la gente haga clic en tu CTA es una forma de arte. Lograr que las personas se suscriban o se conviertan en clientes potenciales a través de un formulario de suscripción después de hacer clic en su CTA es la apreciación del arte. Tienes que experimentar y encontrar la manera correcta de acercarte a tu público objetivo para que ambas partes estén satisfechas al final.

Le mostraremos cómo hacer que se active un clic para dos botones diferentes en su sitio web donde puede beneficiarse de ese tipo de formulario de suscripción; el módulo de botones y el botón de encabezado de ancho completo. La forma de trabajar es la misma, pero verlo en diferentes escenarios puede ayudarlo a comprender la lógica. Después de eso, también puede usarlo para otros módulos.

Ahora, antes de mostrarte cómo vincular los formularios de suscripción a una CTA, veremos la configuración de un formulario de suscripción. En esta publicación, no le proporcionaremos ningún diseño específico, sino solo la lógica. Hay algunas configuraciones que son necesarias para asegurarse de que el disparador de clic funcione.

Elija el tipo de formulario de suscripción

Al agregar un nuevo formulario de suscripción, la primera opción a la que se enfrentará es el tipo de formulario de suscripción que desea utilizar. Para crear el efecto de disparador al hacer clic, puede utilizar dos de los tipos: la ventana emergente y la ventana emergente. La que probablemente elija sea la ventana emergente. Pero si quieres ser un poco más sutil, también puedes usar la mosca.

Pestaña de configuración

Comience nombrando su formulario de suscripción en la pestaña Configuración del formulario de suscripción que está creando. A continuación, conecte su formulario a un proveedor de correo electrónico. Sin el proveedor de correo electrónico, la cuenta y la lista de correo electrónico, el formulario estará inactivo.

Ficha Diseño

Dentro de la pestaña Diseño, puede diseñar el formulario que va a utilizar. En esta publicación, no vamos a hacer eso. Vamos a seleccionar un formulario de suscripción estándar sin modificaciones solo para ver si funciona. Más adelante, siempre puede volver al formulario de suscripción que creó para realizar cambios.

Ficha Configuración de pantalla

Esta es la pestaña en la que vincularemos el formulario de suscripción a uno de los botones. Para asegurarse de que los resultados funcionen, debe asegurarse de que se permita que el formulario de suscripción se muestre en la página en la que desea que funcione. Si va a utilizar el mismo formulario en todo el sitio web, puede habilitarlo fácilmente para todo, como se muestra en la imagen a continuación.

Además, queremos utilizar el formulario de suscripción para activadores solo al hacer clic. Es por eso que vamos a deshabilitar todas las demás opciones y solo habilitaremos la de 'Activar al hacer clic'. Verá que el campo Selector de CSS aparecerá inmediatamente. Más adelante en esta publicación, usaremos este campo para vincular nuestros botones al formulario de suscripción que estamos creando. Deje esta página abierta en su pestaña para que pueda acceder a ella más adelante.

Empecemos

Aunque la lógica detrás de agregar un formulario de suscripción de activación por clic en diferentes módulos es la misma, la explicaremos en dos ejemplos; el módulo de botones y el botón de encabezado de ancho completo.Sin entender la lógica, simplemente puede seguir los pasos de esta publicación para que esto suceda.

Sin embargo, si desea que el disparador de clic funcione en otros lugares distintos a los que se explican a continuación, deberá realizar una pequeña modificación. Lo único que va a cambiar es la clase que estamos usando, ya que esta siempre es diferente. Si desea que este disparador de clic suceda en cualquier otra parte de su sitio web, simplemente siga los mismos pasos que se muestran a continuación y cambie la clase CSS de acuerdo con lo que esté usando.

Conecte el módulo de botones al formulario de suscripción emergente

El primer ejemplo que lo guiaremos es el Módulo de botones. Lo bueno de crear un activador de clic para un módulo de botones es que las posibilidades son infinitas. Puede crear cualquier tipo de sección o fila que contenga un módulo de botones y ser tan creativo como desee.

Sin más tiempo, comencemos a crear un activador de clic para el botón. Tenemos dos formas de hacer esto; utilizando la clase CSS o creando un ID de CSS asignado al módulo.

Mediante el uso de la clase CSS

Abra la página o cree la página donde desea que funcione el activador de clic. A continuación, agregue un módulo de botones o abra la configuración del módulo de botones del botón en el que desea que funcione.

Vaya a la pestaña Avanzado y desplácese hacia abajo. Haga clic en el campo Elemento principal y observe cómo aparece la clase CSS asignada al botón. Copie la clase CSS, la necesitaremos de inmediato.

Luego, vaya a la pestaña Configuración de pantalla del formulario de suscripción que está creando. En la parte anterior, ya te mostramos dónde va a suceder la magia. Activamos 'Activar al hacer clic' y desactivamos todas las demás posibilidades mencionadas. Justo debajo de 'Truco al hacer clic', tendrás que pegar la siguiente línea:

*.et_pb_button_0.et_pb_button.et_pb_module

Como puede ver, es simplemente un símbolo '*' seguido de la clase que copió justo antes de este paso.

Al utilizar este método, hay una cosa que debe tener en cuenta; la clase CSS del botón difiere para cada botón en la misma página, pero tan pronto como agregue un botón a otra página, comenzará desde '0' de inmediato. Esto significa que cada primer módulo de botones en cada página activará el formulario de suscripción si su formulario de suscripción está disponible para todas las páginas y publicaciones.

Si desea evitar esto, puede usar hacer que el disparador de clic ocurra a través de una ID de CSS. Pero en los casos en los que asigna un ID de CSS específico al módulo completo, la forma más sencilla de hacerlo es a través de la clase CSS.

Puede determinar en qué páginas puede aparecer un determinado formulario de suscripción en la Configuración de pantalla de su formulario de suscripción. Al hacerlo, tendrá el control y sabrá exactamente en qué páginas aparecerá el formulario de suscripción después de hacer clic en el botón que se le asigna.

Mediante el uso de ID de CSS

El segundo método consiste en utilizar una ID de CSS. Abra el Módulo de botones, vaya a la pestaña Avanzado y asígnele una ID de CSS. En este caso, usaremos 'popup'.

Continúe yendo a la pestaña Contenido del Módulo de botones y escribiendo el símbolo "#" seguido de lo que desee. Al hacer esto, se asegurará de que el visitante permanezca en el mismo lugar de la página mientras hace clic en el botón.

Continuando, regrese a la configuración de su formulario de suscripción y agregue "una ventana emergente #" al campo Activador al hacer clic. Siempre debe escribir “un #” seguido del ID de CSS que asignó al módulo de botones.

a#popup

Conecte los botones de encabezado de ancho completo al formulario de suscripción

El otro ejemplo en el que le mostraremos cómo hacer un formulario de suscripción de Activar al hacer clic es el Botón de encabezado de ancho completo. La única posibilidad que tenemos aquí es usar el botón de la clase CSS. No podemos asignar una ID de CSS a través del constructor Divi al botón en particular.

Mediante el uso de la clase CSS

Cree un encabezado de ancho completo o abra el encabezado de ancho completo donde desea agregar el formulario de suscripción de Activador al hacer clic. Vaya a la pestaña Avanzado del encabezado Ancho completo y desplácese hacia abajo hasta que encuentre el 'Botón uno'. Haga clic en el campo y copie la clase CSS asignada al botón.

Luego, vaya a la pestaña Contenido y escriba el símbolo "#" seguido de cualquier otra cosa en el campo URL del Botón # 1.

Finalmente, vaya a la pestaña Configuración de pantalla de su suscripción y escriba el símbolo "*" seguido de la clase que copió asignada al botón.

*.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button

Pensamientos finales

Este tutorial debería ayudarlo a comenzar con los activadores al hacer clic y el formulario de suscripción de Bloom. Incluso podría hacerle reconsiderar la forma en que actualmente está tratando de ganar suscriptores o clientes potenciales. Si tiene alguna pregunta o sugerencia; no dude en dejar un comentario en la sección de comentarios a continuación. Y mientras estás ahí; díganos en qué casos utilizaría el formulario de suscripción de Trigger On Click.

¡Asegúrese de suscribirse a nuestro boletín informativo por correo electrónico y al canal de YouTube para que nunca se pierda un gran anuncio, un consejo útil o un obsequio de Divi!

Imagen destacada de BarsRsind / shutterstock.com