Cómo hacer que se active un formulario de registro para que aparezca cuando se haga clic en un botón

Qué aprenderás

Descubre cómo activar un formulario de registro para que aparezca en tu sitio web cuando un visitante haga clic en un botón específico. Esta guía te guiará para ajustar tu formulario para que se muestre con un activador personalizado, crear y añadir un nuevo botón 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 crear un activador con código 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 todas las páginas en las que añadas el botón. Verifica que los formularios de registro estén activados en tu sitio web.

Crear un nuevo botón

This content requires Functional cookies to be enabled.

Update Cookie Settings

Antes de añadir 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 insertados no se pueden activar al hacer clic en un botón.
3. Selecciona Segmentación y comportamiento > Pantalla. En Programación, configura Mostrar formulario como 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 satisfecho con el diseño y el contenido del formulario, haz clic en Publicar o programar, selecciona la opción Publicar ahora y, después, haz clic en Publicar ahora para publicar el formulario.
2. Copia el código siguiente:

<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 aún más el aspecto del botón, consulta a tu desarrollador o a un socio de Klaviyo.

Si añades varios botones a la misma página, da a cada botón un nombre de clase único (p. ej., klaviyo_form_trigger1, klaviyo_form_trigger2), aunque abran el mismo formulario de registro. El fragmento de JavaScript que aparece a continuación se adjunta solo al primer botón con una clase coincidente. Añade un fragmento de código 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 has añadido un nuevo botón a tu sitio web, lo siguiente será configurar el activador para que tu formulario de registro aparezca cuando se haga clic en él. Configura el activador añadiendo a tu sitio un pequeño fragmento de JavaScript personalizado:

1. Copia el fragmento de código que aparece 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 añadiste a tu sitio en la última sección.
2. En el fragmento de código que acabas de pegar, sustituye FORM_ID por el ID de tu formulario de registro.
   • Para encontrar el ID del formulario, vuelve a Klaviyo y abre el editor de formularios de tu formulario de registro. Copia el ID inmediatamente después de /forms/ en la URL. El ID puede contener letras y números; mantén las mayúsculas y minúsculas exactamente como se muestran al sustituir 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 todas las páginas donde hayas añadido el código del botón.
   • Este es un ejemplo del código completado en un editor de páginas de Shopify:
     

1. Guarda los cambios.

Prueba tu botón

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

¿Tienes algún problema? Ve al foro de la Community de Klaviyo para obtener orientación de otros usuarios de Klaviyo.

Recursos adicionales