Comprender los estilos de un formulario de registro

Objetivos de aprendizaje

Aprende a utilizar Klaviyo's formulario de registro builder to design your form by editing the design settings available in the Styles section. Los ajustes de estilo se aplican en todo tu formulario de registro, incluso en todos los pasos de un formulario y en su mensaje de éxito. 

Haz que el diseño de tu formulario de registro sea sencillo. Debe ser clara, despejada y tener 1 objetivo principal. Además, querrás que sea fácil de leer y seguir. 

Antes de empezar

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

Si estás creando un formulario de registro sólo 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: emergente, página completa, menú desplegable o incrustar:

• Las ventanas emergentes aparecen en medio de la ventana del navegador. Una ventana emergente llama la atención, y se utiliza mejor para ofertas importantes o mensajes críticos. Los popups tienen la tasa de conversión más alta de todos los tipos de formularios. 
• Los Flyouts se deslizan en la ventana del navegador desde cualquier dirección que selecciones. Éstas, al igual que las ventanas emergentes, pueden utilizarse para conseguir que alguien realice algo o redirigirle, pero al ser una opción menos intrusiva, puedes utilizarla para recopilar información sobre tus navegadores de forma pasiva.
• Los formularios incrustados aparecen donde pegas el fragmento de código proporcionado en tu sitio. Los formularios incrustados son el formulario de registro menos intrusivo y se suelen utilizar en el pie de página de un sitio para recopilar direcciones de correo electrónico. 
• Los formularios de página completa se muestran en toda la ventana del navegador, captando toda la atención de tus compradores. Se trata de formularios de alta conversión, ya que no pueden pasarse por alto fácilmente, aunque esto también los hace más intrusivos, ya que los compradores deben interactuar con el formulario para cerrarlo.
  • Considera la posibilidad de utilizar un formulario de página completa como página de destino para hacer crecer 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, y ofrecen una visibilidad continua y un diseño apto para móviles que se integra sin problemas en tu sitio web. Puedes configurar el banner para que se desplace con la página o permanezca fijo, añadir contenido bloque o campo directamente al banner, o configurar el banner para que cuando alguien haga clic en él se abra un formulario diferente de tu cuenta. 
  • Para que aparezca un formulario diferente cuando un comprador haga clic en el banner, haz clic en el botón de la vista previa y establece la Acción en Abrir otro formulario, luego elige el formulario activo que quieres mostrar. Ten en cuenta que esto no es posible para los formularios incrustados.

Imágenes de fondo e imágenes laterales 

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

Cuando utilices una imagen en un formulario, debes tener en cuenta algunas cosas:

• Hay muchos tipos de formatos de imagen entre los que elegir. Los JPEG equilibran bien la calidad y el tamaño de las imágenes en color, mientras que los PNG pueden mantener nítidas las imágenes transparentes o los logotipos. 
  • 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.
• Como ocurre 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 ppp suele ocupar más de 1 MB, y reducir el tamaño de la imagen puede reducir su calidad. Ten en cuenta el equilibrio entre la calidad de la imagen y el tiempo de carga cuando elijas las imágenes.
• Asegúrate de utilizar una imagen de calidad razonable para obtener los mejores resultados. 
  
  • En la web, utilizar una resolución de 72 ppp es la mejor práctica. Para equilibrar la calidad de la imagen y la velocidad de carga, intenta que tus imágenes tengan entre 600 y 1000 px de anchura, y menos de 2000px de altura para las imágenes de ancho completo. Las imágenes que no ocupen todo el ancho del correo electrónico pueden tener un tamaño inferior a 600px.
    
    • 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 (por ejemplo, una anchura mínima de 1980px) para que quepa en el formulario de mayor tamaño. Pero ten en cuenta que esto puede afectar al tiempo de carga.
• Añade texto alternativo a tu imagen para promover la accesibilidad de todos los usuarios que interactúen con tus formularios. 

Como los formularios de registro se visualizan en los navegadores (a diferencia de los correos electrónicos, que se visualizan en los proveedores de envío de correos electrónicos), hay menos recomendaciones sobre cómo formatearlos y ajustarlos. Los navegadores pueden renderizar imágenes de todos los tipos y tamaños, así que, en general, limítate a imágenes de alta resolución, tamaños de archivo manejables y prueba la apariencia en cada tipo de dispositivo. 

Añadir una imagen lateral

Para añadir una imagen lateral:

1. Dirígete a la sección Estilos y desplázate hasta los ajustes de Imagen Lateral.
2. Selecciona Imagen izquierda o Imagen derecha, según dónde quieras que aparezca la imagen.
   
3. Selecciona una imagen. Por defecto, los formularios con imágenes laterales tienen un ancho de 780px y un tamaño medio; sin embargo, esto puede ajustarse en la sección Imagen lateral de la pestaña Estilos dependiendo del tamaño del formulario o de si quieres que la imagen aparezca más pequeña o más grande.

Ten en cuenta que las imágenes laterales se establecen a nivel de paso, por lo que puedes establecer imágenes independientes para cada paso de tu formulario. Para 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 el formulario de registro. 

Añade una imagen de fondo

Para añadir una imagen de fondo:

1. Activa la opción Imagen de fondo en Fondo del formulario.
2. Sube tu imagen utilizando el botón Examinar.
3. Ajusta la configuración de la pantalla 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ú superior. Por defecto, la altura de tu formulario se ajusta en función del contenido y los campos de formulario de 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 quedar cortado en los 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

Utiliza las opciones Estilos de formulario y Estilos de campo de entrada para establecer los colores, los colores de los bordes, el relleno y los márgenes. Estos ajustes se aplicarán a todos los pasos de tu formulario, a menos que apliques ajustes contradictorios (por ejemplo, para texto o colores) dentro de los ajustes de estilo de un bloque de contenido específico.

Fuentes y estilos de texto

Edita el texto (por ejemplo, fuente, tamaño, color, etc.) de tu bloque de contenido (por ejemplo, un campo de correo electrónico o de número de teléfono) en el campo Estilos de texto.

Edita el texto de un bloque de contenido concreto haciendo clic en el bloque en la vista previa del formulario y utilizando el menú Opciones de texto que aparece. Klaviyoutiliza el estándar de codificación UTF-8, lo que significa que equipa de asistencia caracteres latinos, emojis, caracteres de doble byte y mucho más.

Tu formulario de registro puede utilizar las fuentes web nativas de los editores de Klaviyo, una de nuestras fuentes personalizadas alojadas en Klaviyo o puedes añadir tus propias fuentes personalizadas. Aprende a utilizar fuentes personalizadas en tu formulario de registro. 

Cerrar iconos

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 X del editor de formularios y, a continuación, ajusta la configuración en el editor de la izquierda. Más información sobre el estilo del icono de cierre de un formulario. 

Si has seleccionado utilizar un formulario de página completa, la única forma de que tus compradores puedan descartar el formulario es haciendo clic en el icono de cerrar. 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 sientan frustrados por la interrupción de tu formulario de página completa.

HTML y CSS personalizados

KlaviyoActualmente, el editor de formularios de registro del equipo de asistencia no personaliza el contenido HTML o CSS. Para obtener consejos e inspiración sobre cómo personalizar tu formulario utilizando el editor de Klaviyo, dirígete al foro de la comunidad. 

Resultado

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

Siguientes pasos

Una vez que hayas dado estilo a tu formulario de registro, aprende a configurar los comportamientos de tu formulario, incluyendo qué visitantes deben ver el formulario y cuándo debe aparecer. Dirígete a nuestro artículo Cómo elegir la configuración de la orientación y el comportamiento de los formularios.

Una vez que hayas publicado tu formulario de registro, personaliza tu confirmación de suscripción por correo electrónico, si la doble confirmación de suscripción está activada para tu lista. A continuación, construye una serie de bienvenida para entregar la oferta de tu formulario (por ejemplo, un descuento o envío gratuito en su primer pedido) e introducir al nuevo suscriptor en tu marca.

Recursos adicionales

• Primeros pasos con los formularios de registro
• Cómo probar A/B un formulario de registro
• Curso: Crear formularios de registro estratégicos