Cómo incrustar un formulario de registro en tu sitio web

Objetivos del artículo

Aprende cómo añadir un formulario de registro incrustado en una página o ubicación específica de tu sitio web (p. ej., en el pie de página), para que se puedan registrar fácilmente los compradores que deseen saber más sobre tu marca. Incrustar un formulario de registro en el pie de página de tu sitio para que funcione en tándem con los otros formularios que publiques es una de las mejores prácticas de Klaviyo para optimizar el crecimiento de tus listas. 

Para añadir un formulario incrustado a tu sitio, tienes que hacer lo siguiente:

1. Crea y personaliza un nuevo formulario incrustado en Klaviyo
2. Copia el código de incrustación del formulario desde el modal de publicación
3. Pega el código de incrustación en los archivos de tu sitio

Antes de empezar

Antes de crear tu formulario de registro, asegúrate de que la funcionalidad del formulario de registro está habilitada en tu cuenta de Klaviyo. Esto garantiza que los formularios publicados en Klaviyo se muestren correctamente en tu sitio y se sincronicen todos los datos necesarios. 

Necesitarás hacer lo siguiente para que los formularios incrustados funcionen:

• Habilita la funcionalidad de formularios de registro. Esto también se conoce como instalar el "seguimiento en el sitio".
• Pega el código de incrustación en tu sitio donde quieras que se muestre el formulario.

Ten en cuenta que solo es necesario pegar el código de incrustación para los formularios incrustados. Los formularios emergentes, desplegables y de página completa no requieren pegar código y se pueden publicar directamente desde el creador de formularios de Klaviyo

A partir del 6 de diciembre de 2024, Klaviyo mejoró la forma de calcular las vistas de formularios incrustados, para medir con mayor exactitud las interacciones. Ahora, las vistas de los formularios incrustados solo se registrarán cuando el formulario esté visible en la ventana gráfica del usuario. Esto podría causar un cambio notable en el recuento de vistas y un aumento de las tasas de envíos, especialmente en el caso de los formularios incrustados en el pie de página de un sitio, ya que solo se contarán si el visitante se desplaza hacia abajo lo suficiente para que el formulario se muestre parcialmente en su ventana gráfica. 

Añade un formulario incrustado a tu sitio web

Si usas Shopify, BigCommerce o WooCommerce, los suscriptores que se registren usando los formularios incrustados de tu plataforma se añadirán automáticamente a tu lista de Klaviyo mediante la integración. Por ello, no tienes que sustituir el formulario incrustado de tu integración con uno de Klaviyo, aunque puedes crear uno en Klaviyo si deseas que los suscriptores se unan a una lista distinta. 

Crea y personaliza un nuevo formulario incrustado en Klaviyo

1. Selecciona la pestaña Formularios de registro en la barra de navegación izquierda de Klaviyo.
2. Selecciona Crear formulario. Desde aquí, puedes hacer lo siguiente:
   • Personalizar una plantilla prediseñada de la biblioteca de formularios. Haz clic en el menú desplegable junto a Todos los tipos y después selecciona Incrustado para filtrar la biblioteca de formularios y mostrar todas las plantillas de formularios incrustados prediseñados.
   • Empezar con una plantilla de formulario incrustado en blanco seleccionando Crear formulario desde cero en la esquina superior derecha.
3. En el modal de creación que aparece:
   • Ponle un nombre a tu formulario. 
   • Elige a qué lista se unirán los nuevos suscriptores.
   • Confirma Incrustado como tipo de formulario.
     
4. Haz clic en Guardar y diseñar.
5. Usa el editor para asignarle un estilo a tu formulario y añade los bloques o campos que desees. Puedes obtener orientación sobre cómo personalizar el formulario en Primeros pasos con los formularios de registro.
   

   Si planeas incrustar tu formulario en el pie de página de tu sitio, te recomendamos solo pedir direcciones de correo electrónico para mejorar el volumen de registros.

6. Cuando tu formulario te parezca conforme, haz clic en Publicar. Ten en cuenta que el formulario no aparecerá todavía en tu sitio; también tienes que pegar el código de incrustación en tu sitio para activarlo.
7. En el modal Se publicó correctamente que aparece, haz clic en Copiar para que se copie el código de incrustación al portapapeles. Este es el código que necesitarás pegar en los archivos de tu sitio, en la sección siguiente de este artículo.
   

Ten en cuenta que el código de incrustación de un formulario también se puede encontrar en la pestaña  Segmentación y comportamiento del editor de formularios.

Pega el código de incrustación en tu sitio

Después de publicar tu formulario en Klaviyo y de copiar el código de incrustación, tendrás que pegar este código en los archivos de tu sitio web para que se muestre el formulario. La ubicación en donde pegarás el código depende de dónde desees que aparezca el formulario (p. ej., en un archivo de tema o en un archivo de página específico) y quizás varíe según la integración. 

Busca la plataforma que usas en la lista siguiente y luego dirígete al artículo enlazado abajo para obtener una guía más específica sobre cómo pegar el código de incrustación para esa integración. 

Consulta la viñeta "Otras plataformas" si no encuentras tu plataforma.

• BigCommerce
  En el caso de BigCommerce, pega el código de incrustación en los archivos de tu sitio donde desees que aparezca. 
  • Visita Añadir el código de incrustación a tu sitio de BigCommerce.
• Shopify
  En el caso de Shopify, añade la aplicación Klaviyo Embedded Form a la plantilla de tu página y pega el código de incrustación del formulario.
  • Visita Añadir el código de incrustación a tu sitio de Shopify.
• Square
  En el caso de Square, pega el código de incrustación en los archivos de tu sitio donde desees que aparezca.
  • Visita Añadir el código de incrustación a tu sitio de Square.
• WooCommerce
  En el caso de WooCommerce, pega el código de incrustación en el HTML de tu sitio. 
  • Visita Añadir el código de incrustación al pie de página de tu sitio de WooCommerce.
• Otras plataformas
  Si tu plataforma no está en esta lista o usas una integración personalizada que no se integra de forma nativa con Klaviyo, tendrás que asegurarte de que se peguen 2 fragmentos de código en tu sitio para que funcione el formulario incrustado: 
   
  • Seguimiento en el sitio (también conocido como Klaviyo.js) para habilitar la funcionalidad de los formularios de registro. 
    • Ten en cuenta que muchas plataformas añaden automáticamente el seguimiento en el sitio a tu sitio cuando lo integras (como Wix, PrestaShop, Magento 1 y 2, etc.). Verifica la configuración de integración de tu plataforma en Klaviyo para confirmar que esta opción está seleccionada.
      • Si tu plataforma no tiene una integración nativa de Klaviyo, tienes que añadir manualmente el seguimiento en el sitio.
  • El código de incrustación del formulario específico 
    • Una vez habilitado el seguimiento en el sitio, tienes que pegar el código de incrustación de tu formulario en el código HTML/código fuente de tu sitio donde deseas que aparezca (p. ej., en el pie de página). 
      • El código de incrustación de un formulario se puede copiar de la pestaña Segmentación y comportamiento del editor de formularios.

Siguientes pasos

Una vez que hayas publicado tu formulario incrustado en Klaviyo, pegado su código de incrustación en tu sitio y guardado los cambios, dirígete a tu sitio web y actualiza la página.

El formulario incrustado debe aparecer en tu sitio donde hayas pegado el código de incrustación. 

Solución de problemas con formularios incrustados

Si tu formulario incrustado está activo en Klaviyo pero no se muestra en tu sitio, consulta los siguientes consejos de solución de problemas:

• Actualiza la caché del navegador.
• Comprueba que tu sitio web esté integrado correctamente con Klaviyo y que tu sitio también esté activo.
• Confirma que habilitaste formularios de registro en tu cuenta (es lo mismo que habilitar el seguimiento en el sitio).
• Asegúrate de haber guardado los cambios en tu sitio web después de pegar el código de incrustación.
• En el editor de formularios de registro de Klaviyo, ve a la sección de Segmentación y comportamiento y revisa lo siguiente:
  • En la sección Visualización, comprueba que: 
    • El código de incrustación pegado en tu sitio coincida con el código que proporciona Klaviyo.
    • La configuración del dispositivo en Klaviyo corresponde al dispositivo que estás usando para ver el formulario.
  • En la sección Segmentación, comprueba que:
    • Cumples con los criterios de restricción de los Visitantes.
    • El formulario se configuró para mostrarlo en el URL que estás viendo e incluye los parámetros de UTM especificados.
    • Tu ubicación se ajusta a la geolocalización establecida para el formulario.
    • Tu carrito cumple con los requisitos de contenido configurados para el formulario.
• Vuelve a ejecutar la prueba en una nueva ventana en modo incógnito ("privada") del navegador.
• Confirma que solo una cuenta de Klaviyo está integrada con tu sitio. Obtén más información sobre las integraciones.

Otras posibles razones por las que no aparece el formulario

• Si tienes una CSS personalizada en tu sitio web, posiblemente entre en conflicto con el fragmento de seguimiento en el sitio de Klaviyo ("Klaviyo.js") e interfiera con tu formulario. Haz que tu desarrollador use las herramientas de desarrollo de tu navegador para inspeccionar el código del sitio e identificar el problema o ponte en contacto con el equipo de asistencia.
• Si estás usando un sitio de aplicación de página única ("SPA"), es posible que tu configuración cause que el formulario aparezca de forma intermitente. Consulta con tu desarrollador para obtener ayuda.

Recursos adicionales

• Cómo ponerse en contacto con el equipo de asistencia
• Solucionar problemas con formularios de registro
• Primeros pasos con los formularios de registro