Cómo activar un formulario de registro para que aparezca cuando se hace clic en un botón

Objetivos del artículo

Conoce cómo hacer que un formulario de registro aparezca en tu sitio web cuando un visitante haga clic en un botón específico. Esta guía te explicará cómo ajustar el formulario para que se muestre con un activador personalizado, crear y agregar un botón nuevo a tu sitio, y pegar un fragmento de código corto en el HTML de tu sitio para que, al hacer clic en el botón, se active el formulario de registro.

Si eres desarrollador y quieres programar un activador personalizado para tu formulario de registro, consulta nuestro recurso para desarrolladores sobre cómo activar de forma personalizada un formulario emergente o desplegable.

Pegar este código requiere acceder al HTML de tu sitio y a tu plataforma de ecommerce, por lo que nuestro equipo de asistencia no puede brindarte ayuda práctica. Si no tienes un desarrollador en tu equipo y no sabes cómo agregar el código por tu cuenta, considera ponerte en contacto con un socio de Klaviyo para que te ayude.

Crear un nuevo botón

Primero, crea un nuevo botón en el sitio web que active el formulario de registro para que aparezca cuando se haga clic. Asegúrate de que el formulario de registro esté configurado correctamente en Klaviyo antes de agregar el botón al sitio. Para hacerlo:

1. Crea un nuevo formulario de registro para que aparezca cuando se haga clic en el botón, o elige un formulario que ya hayas creado.
2. En la pestaña Estilos, el Tipo de formulario debe configurarse como Popup, desplegable o página completa. Los formularios integrados no se pueden activar cuando se hace clic en un botón.
3. En la pestaña Targeting & Behaviors , selecciona Mostrar solo con activador personalizado en Timing.
   
4. Cuando estés satisfecho con el diseño y el contenido de tu formulario, haz clic en Publicar.
5. Luego, abre el editor de tu formulario y elige la siguiente configuración
6. Copia el código a continuación:
   

   <button class="klaviyo_form_trigger">Click here</button>

7. Pega el código en el HTML de cualquier página de tu sitio web en la que quieras que aparezca el botón. Este botón usará los estilos predeterminados de la plantilla de tu sitio. Si quieres personalizar más la apariencia del botón, consulta a tu desarrollador o a un socio de Klaviyo.

Ten en cuenta que si agregas varios botones a tu sitio y cada uno activa diferentes formularios de registro, tendrás que usar un nombre único para clasificar cada botón (por ejemplo, klaviyo_form_trigger1, klaviyo_form_trigger2).

Configura el botón para que active tu formulario de registro

Ahora que agregaste un nuevo botón a tu sitio web, lo siguiente es configurar el activador para que el formulario de registro aparezca cuando se haga clic. Configura el activador agregando un pequeño fragmento de JavaScript personalizado a tu sitio:

1. Copia el fragmento de código a continuación:
   

   <script type="text/javascript">
   	document.querySelector('.klaviyo_form_trigger').addEventListener('click', function (){
   		window._klOnsite = window._klOnsite || []; 
   		window._klOnsite.push(['openForm', 'FORM_ID']);
   	});
   </script>

2. Pega el fragmento de código directamente debajo del código del botón que agregaste al sitio en la última sección.
3. En el fragmento de código que acabas de pegar, reemplaza FORM_ID por el ID del formulario de registro.
   
   • Para encontrar el ID del formulario, regresa a Klaviyo y abre el editor de formularios de tu formulario de registro. Copia el código de 6 dígitos al final de la URL para agregarlo en tu fragmento de código; este es el ID del formulario.
   
4. El código completado debe incluir el código del nuevo botón y el activador del formulario de registro con tu ID de formulario único. Asegúrate de pegarlo en cada página donde agregaste el código del botón.
   
   • Aquí tienes un ejemplo del código completado en un editor de páginas de Shopify:
   

   Si ajustaste la clase del botón en el último paso (es decir, reemplazaste klaviyo_form_trigger con otro texto o agregaste un número), asegúrate de actualizar este código con el texto que usaste.

5. Guarda los cambios.

Probar tu botón

Una vez que hayas guardado todos los cambios en el código de tu sitio, visita el sitio y haz clic en tu nuevo botón. Cuando lo hagas, aparecerá el formulario de registro.

¿Tienes problemas? Ve al Community Forum de Klaviyo para obtener orientación de otros usuarios de Klaviyo.