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.

Antes de empezar, asegúrate de que el JavaScript onsite de Klaviyo (Klaviyo.js) esté instalado en cada página donde agregues el botón. Verifica que los formularios de registro estén habilitados en tu sitio web.

Crear un nuevo botón

This content requires Functional cookies to be enabled.

Update Cookie Settings

Antes de agregar un nuevo botón a tu sitio web, configura el formulario de registro en Klaviyo:

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. Selecciona Editar estilos en el editor de formularios. Configura Tipo de formulario como Ventana emergente, desplegable, página completa o banner. Los formularios incrustados no se pueden activar al hacer clic en un botón.
3. Selecciona Segmentación y comportamiento > Mostrar. En Timing, establece Mostrar formulario en Solo con un activador personalizado.

Los activadores personalizados omiten las reglas de segmentación, dispositivo y frecuencia del formulario. Si necesitas limitar quién puede abrir el formulario, aplica esas condiciones al botón del sitio web o al código personalizado.

1. Cuando estés conforme con el diseño y el contenido del formulario, haz clic en Publicar o programar, selecciona la opción Publicar ahora y, luego, haz clic en Publicar ahora para activar el formulario.
2. Copia el código a continuación:

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

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

Si agregas varios botones a la misma página, asigna a cada botón un nombre de clase único (p. ej., klaviyo_form_trigger1, klaviyo_form_trigger2), incluso si abren el mismo formulario de registro. El fragmento de JavaScript de abajo solo se adjunta al primer botón con una clase coincidente. Agrega un fragmento coincidente para cada botón.

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

This content requires Functional cookies to be enabled.

Update Cookie Settings

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>

1. Pega el fragmento de código directamente debajo del código del botón que agregaste al sitio en la última sección.
2. 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, vuelve a Klaviyo y abre el editor de formularios para el formulario de registro. Copia el ID inmediatamente después de /forms/ en la URL. El ID puede contener letras y números; conserva el uso de mayúsculas y minúsculas exactamente como aparece al reemplazar FORM_ID en el fragmento de código.
     

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

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

Recursos adicionales