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 del sitio para que funcione en tándem con los otros formularios publicados es una de las mejores prácticas de Klaviyo para optimizar el crecimiento de las 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. Publica el formulario y luego copia el código de inserción.
3. Agrega el formulario a tu sitio con las instrucciones de tu plataforma a continuación.

Antes de empezar

Antes de crear tu formulario de registro, asegúrate de que la funcionalidad del formulario de registro esté habilitada en tu sitio web. Esto permite que los formularios publicados en Klaviyo se muestren en tu sitio y sincronicen datos con Klaviyo.

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

• Seguimiento en el sitio (Klaviyo.js) instalado en el sitio para habilitar la funcionalidad del formulario de registro.
• El código de inserción del formulario colocado donde quieras que se muestre, o el ID del formulario agregado a un bloque de la app Klaviyo Embedded Form en Shopify.

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 en que se calculan las vistas de los formularios incrustados para medir con mayor precisión la interacción. Las vistas de los formularios incrustados se registran solo cuando el formulario está visible en la ventana gráfica del usuario. Este cambio puede ocasionar un cambio notable en el recuento de vistas y un aumento de las tasas de envío, especialmente en el caso de formularios incrustados en el pie de página de un sitio, ya que solo se contabilizarán si una persona visitante se desplaza hacia abajo lo suficiente como para que el formulario entre parcialmente en su ventana gráfica.

Añade un formulario incrustado a tu sitio web

Si usas un formulario de registro proporcionado por Shopify, BigCommerce o WooCommerce, verifica que la integración esté configurada para sincronizar suscriptores con la lista de Klaviyo que quieres. No necesitas reemplazar ese formulario si ya envía suscriptores a la lista correcta, aunque puedes crear un formulario incrustado de Klaviyo para recopilar suscriptores en una lista diferente.

Crea y personaliza un nuevo formulario incrustado en Klaviyo

1. Selecciona formularios de registro en la barra de navegación de Klaviyo.
2. Selecciona Crear formulario. Si aparece un selector de canal, ingresa un nombre, selecciona Web y luego haz clic en Crear para abrir la biblioteca de formularios. Desde la biblioteca, puedes hacer lo siguiente:
   • Personaliza una plantilla prediseñada de la biblioteca de formularios. Abre Estilo de formulario y selecciona Incrustado para mostrar plantillas de formularios incrustados. Selecciona la plantilla que deseas.
   • Comienza con un formulario en blanco seleccionando Crear formulario en blanco.
3. Configura el formulario en el panel que se abre:
   • Ingresa o confirma el nombre del formulario.
   • Elige la lista de suscriptores para cada canal que recopile el formulario.
   • Si comenzaste con un formulario en blanco, selecciona Insertar como tipo de formulario.
     

4. Para usar una plantilla, haz clic en Crear formulario. Para un formulario en blanco, 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.
   

1. Cuando estés satisfecho con tu formulario, resuelve cualquier alerta que bloquee el proceso. Haz clic en Publicar o programar, selecciona Publicar ahora y luego haz clic en Publicar ahora. El formulario se publica en Klaviyo, pero también debe agregarse al sitio web como se describe a continuación antes de que los visitantes puedan verlo.
2. Si se publicó el ¡Se publicó tu formulario! cuando aparezca la ventana, haz clic en Copiar para copiar el código de incrustación al portapapeles. Si esta ventana no aparece, copia el código con la ruta del editor que se indica a continuación.
   

Para copiar el código de inserción desde el editor, selecciona Segmentación y comportamiento > Visualización. Copia el fragmento debajo de Código de inserción.

Agrega el formulario incrustado a tu sitio

Después de publicar el formulario en Klaviyo y copiar el código de inserción, sigue las instrucciones de la plataforma que se indican a continuación para agregar el formulario donde quieras que aparezca (p. ej., un archivo de tema o una página específica). Para el bloque de la app Formulario incrustado de Klaviyo de Shopify, usa el ID del formulario del código en lugar del fragmento completo.

Busca la plataforma que usas en la lista de abajo y luego dirígete al artículo enlazado debajo para obtener una guía más específica sobre cómo agregar el formulario incrustado a esa plataforma.

Si no ves tu plataforma, consulta la viñeta “Otras plataformas”.

• BigCommerce
  En el caso de BigCommerce, pega el código de incrustación en los archivos del sitio donde quieras que aparezca.
  • Visita Añadir el código de incrustación a tu sitio de BigCommerce.
• Shopify
  En el caso de Shopify, agrega el bloque de la aplicación Klaviyo Embedded Form a la plantilla de la página y pega el ID del formulario desde el código de inserción. Por ejemplo, en <div class="klaviyo-form-ABC123"></div>, el ID del formulario es ABC123.
  • Visita Añadir el código de incrustación a tu sitio de Shopify.
• Square
  Para Square, agrega una sección de código de inserción en el editor de sitios de Square Online y pega el código de inserción donde quieras que aparezca el formulario.
  • 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 del 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 la lista anterior 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 del formulario en el código HTML/código fuente de tu sitio donde deseas que aparezca (p. ej., en el pie de página).
      • Para copiar el código de inserción de un formulario, selecciona Segmentación y comportamiento > Visualización en el editor de formularios y, luego, copia el fragmento en Código de inserción.

Siguientes pasos

Una vez que hayas publicado tu formulario incrustado en Klaviyo, lo hayas agregado a tu sitio con las instrucciones de tu plataforma y hayas guardado los cambios, dirígete a tu sitio web y actualiza la página.

El formulario insertado debe aparecer en la ubicación que elegiste en el sitio.

1. Envía el formulario con datos de contacto de prueba. Si recopila direcciones de correo electrónico, usa una que no hayas usado antes para este formulario.
2. Para la doble confirmación de suscripción por correo electrónico, confirma la suscripción con el correo electrónico de confirmación. Después de completar cualquier confirmación requerida, verifica que se te haya agregado a la lista de suscriptores seleccionada para el formulario.

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:

• Borra la caché del navegador y luego vuelve a cargar la página.
• Comprueba que tu sitio web esté integrado correctamente con Klaviyo y que tu sitio también esté activo.
• Confirma que habilitaste el formulario de registro en tu sitio web (es lo mismo que habilitar el seguimiento en el sitio).
• Asegúrate de guardar los cambios del sitio web después de agregar el código de inserción del formulario o, en Shopify, el ID del formulario.
• 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 inserción pegado en el sitio coincide con el código proporcionado por Klaviyo, o el bloque de la app de Shopify contiene el ID del formulario correspondiente
    • 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 la configuración de Público del formulario
    • El formulario se configuró para mostrarlo en el URL que estás viendo e incluye los parámetros de UTM especificados.
    • Tu ubicación coincide con cualquier segmentación por ubicación configurada para el formulario
    • Para Shopify, tu carrito cumple con los requisitos de contenido del carrito configurados para el formulario.
• Si el formulario puede mostrarse a visitantes nuevos, vuelve a ejecutar la prueba en una nueva ventana de incógnito (privada). Si el formulario está restringido a perfiles existentes, suscriptores o miembros de una lista o segmento, usa un navegador que Klaviyo reconozca como un perfil que cumpla esas condiciones.
• 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 CSS personalizado en tu sitio, es posible que anule el estilo del formulario o que oculte el 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