Cómo hacer que aparezca un formulario de registro al pulsar un botón

Objetivos del artículo

Aprende a activar un formulario de registro para que aparezca en tu sitio web cuando un visitante haga clic en un botón determinado. Esta guía te mostrará cómo ajustar tu formulario para que se muestre en un activador personalizado, cómo crear y añadir un nuevo botón a tu sitio y cómo pegar un breve fragmento de código 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 personalizar un activador para tu formulario de registro, consulta nuestro recurso para desarrolladores sobre cómo personalizar el activador de un formulario emergente o menú desplegable. 

Crear un nuevo botón 

En primer lugar, crea un nuevo botón en tu sitio web que haga aparecer el formulario de registro cuando se haga clic en él. Tendrás que asegurarte de que tu formulario de registro está configurado correctamente en Klaviyo antes de añadir el botón a tu sitio. Para ello:

1. Crea un nuevo formulario de registro para que aparezca cuando se pulse el botón, o elige un formulario que ya hayas creado.
2. En la pestaña Estilos, tu Tipo de formulario debe estar configurado como Popup, Menú desplegable o Página completa. Los formularios incrustados no pueden activarse cuando se pulsa un botón.
3. En la pestaña Comportamientos de Targeting & , selecciona Mostrar sólo al activar 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 la siguiente configuración
6. Copia el código que aparece a continuación:

   <button class="klaviyo_form_trigger"> Haz clic aquí</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 utilizará los estilos por defecto de la plantilla de tu sitio. Si quieres personalizar 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 que activen cada uno un formulario de registro diferente, tendrás que utilizar un nombre único para clasificar cada botón (por ejemplo, klaviyo_form_trigger1, klaviyo_form_trigger2). 

Configura el botón para activar tu formulario de registro

Ahora que has añadido un nuevo botón a tu sitio web, tendrás que configurar el activador para que tu formulario de registro aparezca cuando se haga clic en él. Configura el activador añadiendo un pequeño fragmento de JavaScript personalizado a tu sitio web:

1. Copia el siguiente fragmento de código: 
   

   <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 has añadido a tu sitio en la última sección.
3. En el fragmento que acabas de pegar, sustituye FORM_ID por el ID de tu formulario de registro.
   • Para encontrar el ID del formulario, navega de nuevo a Klaviyo y abre el editor de formularios para tu formulario de registro. Copia el código de 6 dígitos que aparece al final de la URL para añadirlo a tu fragmento de código; es el ID del formulario.
     
4. El código completado debe incluir el nuevo código del botón, y el activador del formulario de registro con tu ID de formulario único. Asegúrate de pegar esto en cada página donde hayas añadido el código del botón.
   • Aquí tienes un ejemplo del código completado en un editor de páginas de Shopify: 
     
     

     Si has ajustado la clase del botón en el último paso (es decir, has sustituido klaviyo_form_trigger por otro texto o has añadido un número), asegúrate de actualizar este código con el texto que has utilizado. 

5. Guarda los cambios.

Prueba tu botón 

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

¿Tienes problemas? Dirígete al Klaviyo Foro de la comunidad de para obtener orientación de otros Klaviyo usuarios de. 

Recursos adicionales

• Primeros pasos con los formularios de registro
• Cómo activar de forma personalizada un formulario emergente o menú desplegable
• Cómo elegir la orientación de los formularios y la configuración del comportamiento
• curso: Klaviyo certificación de productos