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.

Crear un nuevo botón

This content requires Functional cookies to be enabled.

Update Cookie Settings

Primero, crea un nuevo botón en tu sitio web que haga que el formulario de registro aparezca cuando se haga clic en él. Antes de añadir el botón a tu sitio, tendrás que asegurarte de que el formulario de registro esté configurado correctamente en Klaviyo. Para ello, sigue estos pasos:

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 incrustados no se pueden activar cuando se hace clic en un botón.
3. En la pestaña Segmentación y comportamientos , selecciona Mostrar solo en activador personalizado en Temporización.
   

4. Cuando estés satisfecho con el diseño y el contenido de tu formulario, haz clic en Publicar.
5. A continuación, abre el editor de tu formulario y elige los siguientes ajustes
6. 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.

Ten en cuenta que, si añades 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 (p. ej., klaviyo_form_trigger1, klaviyo_form_trigger2).

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 código de 6 dígitos al final de la URL para añadirlo a tu fragmento de código; este es el ID del formulario.
     

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