Cómo activar un formulario de inscripción para que aparezca al hacer clic en un botón

Qué aprenderás

Aprenda a activar un formulario de inscripción para que aparezca en su sitio web cuando un visitante haga clic en un botón determinado. Esta guía le guiará a través del ajuste de su formulario para que se muestre en un disparador personalizado, creando y añadiendo un nuevo botón a su sitio, y pegando un breve fragmento de código en el HTML de su sitio para que al hacer clic en el botón se dispare el formulario de inscripción. 

Si usted es un desarrollador y desea personalizar un disparador para su formulario de registro, diríjase a nuestro recurso para desarrolladores sobre cómo personalizar un disparador para un formulario emergente o flyout. 

Crear un nuevo botón 

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

1. Cree un nuevo formulario de inscripción para que aparezca cuando se pulse el botón, o elija un formulario que ya haya creado.
2. En la pestaña Estilos, su Tipo de formulario debe estar configurado como Popup, Flyout o Página completa. Los formularios incrustados no pueden activarse al hacer clic en un botón.
3. En la pestaña Targeting & Behaviors , seleccione Only show on custom trigger en Timing.
   
4. Cuando esté satisfecho con el diseño y el contenido de su formulario, haga clic en Publicar. 
5. A continuación, abra el editor de su formulario y elija la siguiente configuración
6. Copie el código siguiente:

   <button class="klaviyo_form_trigger"> Haga clic aquí</button>

7. Pegue el código en el HTML de cualquier página de su sitio web en la que desee que aparezca el botón. Este botón utilizará los estilos predeterminados de la plantilla de su sitio. Si desea personalizar aún más el aspecto del botón, consulte a su desarrollador o a un socio de Klaviyo.

Tenga en cuenta que si añade varios botones a su sitio web que activen distintos formularios de inscripción, deberá utilizar un nombre único para clasificar cada botón (por ejemplo, klaviyo_form_trigger1, klaviyo_form_trigger2). 

Configure el botón para activar su formulario de inscripción

Ahora que ha añadido un nuevo botón a su sitio web, deberá configurar el activador para que su formulario de inscripción aparezca cuando se haga clic en él. Configure el activador añadiendo un pequeño fragmento de JavaScript personalizado a su sitio web:

1. Copie el fragmento de código siguiente: 
   

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

2. Pegue el fragmento de código directamente debajo del código del botón que ha añadido a su sitio en la última sección.
3. En el fragmento que acaba de pegar, sustituya FORM_ID por el ID de su formulario de inscripción.
   • Para encontrar el ID del formulario, navegue de nuevo a Klaviyo y abra el editor de formularios para su formulario de registro. Copie el código de 6 dígitos que aparece al final de la URL para añadirlo a su fragmento de código; se trata del 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 su ID de formulario único. Asegúrese de pegar esto en cada página donde haya añadido el código del botón.
   • Aquí tiene un ejemplo del código completado en un editor de páginas de Shopify: 
     
     

     Si ajustó la clase del botón en el último paso (es decir, sustituyó klaviyo_form_trigger por algún otro texto o añadió un número), asegúrese de actualizar este código con el texto que utilizó. 

5. Guarde los cambios.

Pruebe su botón 

Una vez que haya guardado todos los cambios en el código de su sitio, visite su sitio y haga clic en su nuevo botón. Cuando lo haga, aparecerá el formulario de inscripción. 

¿Tiene problemas? Diríjase al Foro de la Comunidad de Klaviyo para obtener orientación de otros usuarios de Klaviyo. 

Recursos adicionales

• Primeros pasos con los formularios de registro
• Cómo activar de forma personalizada un formulario emergente o flyout
• Cómo elegir la orientación de los formularios y la configuración del comportamiento
• Curso: Certificación de productos Klaviyo