Entender los estilos de un formulario de registro

Objetivos del artículo

Aprende a usar el creador de formularios de registro de Klaviyo para diseñar el formulario al editar la configuración de diseño disponible en la sección Estilos. La configuración de estilo se aplica en todo el formulario de registro, incluso en todos los pasos del formulario y en el mensaje de confirmación.

Mantén el diseño del formulario de registro simple. Debe ser claro, sin desorden y tener 1 objetivo principal. Además, querrás que sea fácil de leer y seguir.

Antes de empezar

Antes de dar estilo al 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 completamente nueva. Agrega los bloques de contenido y de entrada que quieras incluir antes de dar estilo.

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

Tipos de formularios

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

• Los emergentes aparecen en medio de la ventana del navegador. Un emergente llama la atención y se usa mejor para ofertas importantes o mensajes críticos. Los emergentes tienen la tasa de conversión más alta de cualquier tipo de formulario.
• Los menús desplegables se deslizan hacia la ventana del navegador desde cualquier dirección que selecciones. Estas, al igual que los pop-ups, se pueden usar para que alguien haga algo o para redirigirlo, pero como es una opción menos intrusiva, puedes usarla para recopilar información sobre tus navegadores de forma pasiva.
• Los formularios incrustados aparecen donde pegues el fragmento de código proporcionado en el sitio. Los formularios de registro incrustados son el tipo de formulario de registro menos intrusivo y suelen usarse en el pie de página de un sitio para recopilar direcciones de correo electrónico.
• Los formularios de página completa se despliegan en toda la ventana del navegador y captan 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 molestos, ya que los compradores deben interactuar con el formulario para cerrarlo.
  • Considera 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 los popups o los formularios de página completa, ya que ofrecen visibilidad continua y un diseño optimizado para 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, agregar bloques de contenido o campos de entrada directamente al banner, o configurar el banner para que, cuando alguien haga clic en él, se active la apertura de un formulario diferente de tu cuenta.
  • Para activar 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 como Abrir otro formulario; luego, elige el formulario en vivo que quieres mostrar. Ten en cuenta que esto no es posible para los formularios incrustados.

Imágenes de fondo e imágenes laterales

Para agregar 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.

Cuando uses una imagen en un formulario, hay algunas cosas que debes tener en cuenta:

• Hay muchos tipos de formatos de imagen para elegir. Los archivos JPEG equilibran bien la calidad y el tamaño para imágenes coloridas, mientras que los archivos PNG pueden mantener nítidas las imágenes o los logotipos transparentes.
  • Procura 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 tamaños de archivo más grandes hacen que los tiempos de carga sean más lentos.
  • Ten en cuenta que una imagen de ancho completo a 72 dpi a menudo será mayor que 1 MB, y reducir el tamaño de la imagen puede reducir su calidad. Al elegir imágenes, considera 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 la web, usar una resolución de 72 dpi es una práctica recomendada. Para equilibrar la calidad de las imágenes y la velocidad de carga, intenta mantener las imágenes entre 600 y 1000 px de ancho, y con menos de 2000 px de alto para las imágenes de ancho completo. Las imágenes que no sean de ancho completo del correo electrónico pueden ser menores de 600 px.
    
    • Ten en cuenta que, si usas un formulario de registro de página completa, necesitarás una imagen más grande y de alta resolución (por ejemplo, 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 el tiempo de carga.
• Agrega texto alternativo a la imagen para fomentar la accesibilidad para todos los usuarios que interactúan con tus formularios.

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

Agrega una imagen lateral

Para agregar 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, según dónde quieras que aparezca la imagen.
   

3. Selecciona una imagen. De forma predeterminada, los formularios con imágenes laterales están configurados con un ancho de 780px y un tamaño mediano; sin embargo, esto se puede ajustar en la sección Side Image de la pestaña Styles, según el tamaño del formulario o si quieres que la imagen se vea 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 del formulario. Para obtener más información sobre las opciones de visualización de las imágenes laterales, consulta nuestro artículo cómo agregar imágenes laterales en formularios de registro.

Agrega una imagen de fondo

Para agregar una imagen de fondo:

1. Activa la configuración Background Image en Form Background.
2. Sube tu imagen con el botón Examinar.
3. Ajusta la configuración de visualización como prefieras.
   

Si agregas una imagen lateral o de fondo al formulario, previsualiza todos los pasos del formulario, incluido el mensaje de confirmación, seleccionando cada paso en la barra de menú superior. De forma predeterminada, la altura del formulario se ajusta según el contenido y los campos del formulario en cada paso, por lo que algunos pasos pueden ser más altos o más bajos que otros. Cuando el 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 la configuración de Estilos de formulario y Estilos de campo para definir colores, colores de borde, relleno y márgenes. Esta configuración se aplicará en todos los pasos del formulario, a menos que apliques configuraciones en conflicto (p. ej., para texto o colores) dentro de la configuración de estilo de un bloque de contenido específico.

Fuentes y estilos de texto

Edita el texto (p. ej., fuente, tamaño, color, etc.) de los bloques de contenido (p. ej., un correo electrónico o un campo 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 de 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.

El formulario de registro puede usar las fuentes web seguras nativas de los editores de Klaviyo, una de nuestras fuentes personalizadas alojadas en Klaviyo o puedes agregar tus propias fuentes personalizadas. Descubre cómo usar fuentes personalizadas en los formularios de registro.

Iconos de cierre

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

Si seleccionaste usar un formulario de página completa, la única forma en que los compradores pueden cerrar el formulario es haciendo clic en el ícono de cerrar. Esto es útil para captar su atención, pero asegúrate de que el ícono de cerrar 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

Actualmente, el editor de formularios de registro de Klaviyo no es compatible con contenido HTML o CSS personalizado. Para obtener consejos e inspiración para personalizar tu formulario con el editor de Klaviyo, visita el foro de Community.

Resultado

Ahora aprendiste a ajustar varias configuraciones de estilo en el editor de formularios para diseñar el formulario de registro.

Siguientes pasos

Una vez que hayas dado estilo al formulario de registro, descubre cómo configurar los comportamientos del formulario, incluyendo qué visitantes deben ver el formulario y cuándo debe aparecer. Consulta nuestro artículo cómo elegir la segmentación de formularios y la configuración del comportamiento.

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

Recursos adicionales