Los estilos de un formulario de registro

Qué aprenderás

Aprende a usar el creador de formularios de registro de Klaviyo para diseñar tu formulario editando los ajustes de diseño disponibles en la sección Estilos. Los ajustes de estilo se aplican a todo el formulario de registro, incluidos todos los pasos del formulario y su mensaje de éxito.

Mantén el diseño de tu formulario de registro sencillo. Debe ser claro, ordenado y tener 1 propósito principal. Además, querrás que sea fácil de leer y seguir.

Antes de empezar

Antes de aplicar el estilo a tu formulario de registro, ve a la pestaña Formularios de registro > Crear formulario de registro. Puedes personalizar una plantilla prediseñada de la biblioteca de formularios o crear una plantilla de formulario de registro totalmente nueva. Añade cualquier bloque de contenido y de entrada que quieras incluir antes de aplicar el estilo.

Si estás creando un formulario de registro solo para móviles, consulta conceptos básicos: diseño de formularios para móviles.

Tipos de formulario

En la parte superior de la sección Estilos, puedes elegir un tipo de formulario: ventana emergente, página completa, desplegable o integrado:

• Los popups aparecen en el centro de la ventana del navegador. Un popup llama la atención y es más adecuado para ofertas importantes o mensajes críticos. Los popups tienen la tasa de conversión más alta de todos los tipos de formulario.
• Los flyouts se deslizan hacia la ventana del navegador desde cualquier dirección que selecciones. Al igual que los popups, se pueden usar para conseguir que alguien haga algo o redirigirlo, pero como es una opción menos intrusiva, puedes usarla para recopilar información sobre los visitantes de tu sitio de forma pasiva.
• Los formularios integrados aparecen donde pegas el fragmento de código proporcionado en tu sitio. Los formularios integrados son el formulario de registro menos intrusivo y se suelen usar en el pie de página de un sitio para recopilar direcciones de email.
• Los formularios de página completa se muestran sobre toda la ventana del navegador, captando toda la atención de tus compradores. Se trata de formularios de alta conversión, ya que no se pueden pasar por alto fácilmente. Sin embargo, esto también los hace más intrusivos, ya que los compradores deben interactuar con el formulario para cerrarlo.
  • Considera la posibilidad de usar un formulario de página completa como página de destino para aumentar tu lista de suscriptores.
• Los banners aparecen como una barra en la parte superior o inferior de una página web. Son menos intrusivos que las ventanas emergentes o los formularios de página completa, ya que ofrecen una visibilidad continua y un diseño compatible con dispositivos móviles que se integra sin problemas con tu sitio web. Puedes configurar el banner para que se desplace con la página o permanezca fijo, añadir bloques de contenido o campo directamente en el banner, o configurar el banner para que, cuando alguien haga clic en él, active la apertura de un formulario distinto de tu cuenta.
  • Para activar la aparición de un formulario diferente cuando un comprador haga clic en el banner, haz clic en el botón de la vista previa y configura la Acción en Abrir otro formulario; a continuación, elige el formulario activo que quieras mostrar. Ten en cuenta que esto no es posible en formularios integrados.

Imágenes de fondo e imágenes laterales

Para añadir imágenes personalizadas a tu formulario de registro, usa una imagen lateral o una imagen de fondo. Las imágenes laterales aparecen a la izquierda o a la derecha del contenido del formulario, mientras que las imágenes de fondo se muestran detrás de los campos del formulario.

Al usar una imagen en un formulario, hay algunas cosas que debes tener en cuenta:

• Hay muchos tipos de formatos de imagen entre los que elegir. Los JPEG equilibran bien la calidad y el tamaño para las imágenes con muchos colores, mientras que los PNG pueden mantener nítidas las imágenes o los logotipos transparentes.
  • Intenta que el tamaño del archivo sea de 50-100 KB para las imágenes laterales y de menos de 200 KB para las imágenes de fondo, para garantizar imágenes de alta calidad sin ralentizar los tiempos de carga de tu sitio.
• Al igual que con todas las imágenes que se ven en la web, los archivos de mayor tamaño provocan tiempos de carga más lentos.
  • Ten en cuenta que una imagen de ancho completo a 72 dpi suele ocupar más de 1 MB, y reducir el tamaño de la imagen puede reducir su calidad. Al elegir imágenes, ten en cuenta la compensación entre la calidad de la imagen y el tiempo de carga.
• Asegúrate de usar una imagen de calidad razonablemente alta para obtener los mejores resultados.
  
  • En toda la web, usar una resolución de 72 dpi es la práctica recomendada. Para equilibrar la calidad de la imagen y la velocidad de carga, intenta que tus imágenes tengan entre 600 y 1000 px de ancho, y menos de 2000 px de alto en el caso de las imágenes de ancho completo. Las imágenes con un ancho inferior al ancho completo del email pueden ser menores de 600 px.
    
    • Ten en cuenta que, si utilizas un formulario de registro de página completa, necesitarás una imagen más grande y de alta resolución (p. ej., un ancho mínimo de 1980 px) para que se ajuste al formulario de mayor tamaño. Sin embargo, ten en cuenta que esto aún puede afectar al tiempo de carga.
• Añade texto alternativo a tu imagen para promover la accesibilidad para todos los usuarios que interactúan con tus formularios.

Dado que los formularios de registro se muestran en los navegadores (a diferencia de los emails, que se renderizan en los ESP), hay menos recomendaciones sobre cómo darles formato y ajustarlos. Los navegadores pueden renderizar imágenes de todo tipo y tamaño, así que, en general, mantén imágenes de alta resolución, tamaños de archivo manejables y prueba el aspecto en cada tipo de dispositivo.

Añade una imagen lateral

Para añadir una imagen lateral:

1. Ve a la sección Estilos y desplázate hasta la configuración de Imagen lateral.
2. Selecciona Imagen izquierda o Imagen derecha, en función de dónde quieras que aparezca la imagen.
   

3. Selecciona una imagen. De forma predeterminada, los formularios con imágenes laterales tienen 780px de ancho y un tamaño mediano; sin embargo, esto se puede ajustar en la sección Imagen lateral de la pestaña Estilos, según el tamaño del formulario o si quieres que la imagen aparezca más pequeña o más grande.

Ten en cuenta que las imágenes laterales se configuran a nivel de paso, por lo que puedes establecer imágenes distintas para cada paso de tu formulario de registro. Para obtener más información sobre las opciones de visualización de las imágenes laterales, consulta nuestro artículo cómo añadir imágenes laterales en formularios de registro.

Añadir una imagen de fondo

Para añadir una imagen de fondo:

1. Activa el ajuste de Imagen de fondo en Fondo del formulario.
2. Sube tu imagen con el botón Examinar.
3. Ajusta la configuración de visualización a tu gusto.
   

Si añades una imagen lateral o de fondo a tu formulario, previsualiza todos los pasos del formulario, incluido el mensaje de éxito, seleccionando cada paso en la barra de menús superior. De forma predeterminada, la altura de tu formulario se ajusta en función del contenido y de los campos del formulario en cada paso, por lo que algunos pasos pueden ser más altos o más bajos que otros. Cuando tu formulario incluye una imagen, parte del contenido de la imagen puede recortarse en pasos de menor tamaño. Para evitarlo, establece una altura mínima en Tipo de formulario en la sección Estilos.

Opciones de color y espaciado

Usa los ajustes de estilos de formulario y estilos de campo para establecer colores, colores de borde, relleno y márgenes. Estos ajustes se aplicarán en todos los pasos de tu formulario, a menos que apliques ajustes contradictorios (p. ej., para el texto o los colores) en la configuración de estilo de un bloque de contenido específico.

Fuentes y estilos de texto

Edita el texto (por ejemplo, la fuente, el tamaño, el color, etc.) de tus bloques de contenido (por ejemplo, un campo de email o de número de teléfono) en Estilos de texto del campo de entrada.

Edita el texto de un bloque de contenido específico haciendo clic en el bloque en la vista previa del formulario y usando el menú de opciones Texto que aparece. El editor de formularios de Klaviyo utiliza el estándar de codificación UTF-8, lo que significa que admite caracteres latinos, emojis, caracteres de doble byte y más.

Tu formulario de registro puede usar las fuentes seguras para web nativas de los editores de Klaviyo, una de nuestras fuentes personalizadas alojadas en Klaviyo o puedes añadir tus propias fuentes personalizadas. Descubre cómo usar fuentes personalizadas en tu formulario de registro.

Iconos de cierre

Puedes ajustar el tamaño, el color y el estilo del icono de cierre de tu formulario (la X de la esquina superior derecha). Haz clic en el icono de la X en el editor de formularios y, a continuación, ajusta la configuración en el editor de la izquierda. Más información sobre cómo aplicar estilo al icono de cierre de un formulario.

Si seleccionaste usar un formulario de página completa, la única forma en que tus compradores pueden cerrar el formulario es haciendo clic en el icono de cierre. Esto es útil para captar su atención; pero asegúrate de que el icono de cierre sea claro y visible para que los compradores no se frustren por la interrupción de tu formulario de página completa.

HTML y CSS personalizados

El editor de formularios de registro de Klaviyo no es compatible actualmente con contenido HTML o CSS personalizado. Para obtener consejos e inspiración sobre cómo personalizar tu formulario con el editor de Klaviyo, ve al foro de la Community.

Resultado

Ya has aprendido a ajustar varios ajustes de estilo en el editor de formularios para diseñar tu formulario de registro.

Próximos pasos

Una vez que hayas dado estilo a tu formulario de registro, aprende a configurar los comportamientos de tu formulario, incluido qué visitantes deberían ver el formulario y cuándo debería aparecer. Ve a nuestro artículo cómo elegir la segmentación de formularios y la configuración de comportamientos.

Una vez que hayas publicado tu formulario de registro, personaliza tu email de confirmación de registro si la doble confirmación de registro está activada para tu lista. Luego, crea una serie de bienvenida para entregar la oferta de tu formulario (por ejemplo, un descuento o envío gratis en su primer pedido) y presentar tu marca a los nuevos suscriptores.

Recursos adicionales