Comprender los estilos de un formulario de inscripción

Qué aprenderás

Aprenda a utilizar el constructor de formularios de registro de Klaviyo para diseñar su formulario editando los ajustes de diseño disponibles en la sección Estilos. Los ajustes de estilo se aplican en todo su formulario de inscripción, incluso en todos los pasos del formulario y en su mensaje de éxito. 

Mantenga sencillo el diseño de su formulario de inscripción. Debe ser claro, despejado y tener 1 objetivo principal. Además, querrá que sea fácil de leer y de seguir. 

Antes de empezar

Antes de dar estilo a su formulario de inscripción, vaya a la pestaña Formularios de inscripción > Crear formulario de inscripción .Puede personalizar una plantilla prediseñada de la biblioteca de formularios o crear una plantilla de formulario de inscripción completamente nueva. Añada los bloques de contenido y de entrada que desee incluir antes de aplicar el estilo. 

Si está creando un formulario de inscripción sólo para móviles, consulte la sección básica: diseño de formularios para móviles.

Tipos de formularios

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

• 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 cualquier tipo de formulario. 
• Las ventanas desplegables se deslizan en la ventana del navegador desde cualquier dirección que seleccione. É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, puede utilizarla para recopilar información sobre sus navegadores de forma pasiva.
• Los formularios incrustados aparecen donde usted pega el fragmento de código proporcionado en su 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 sus compradores. Se trata de formularios de alta conversión ya que no pueden pasarse 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.
  • Considere la posibilidad de utilizar un formulario de página completa como página de aterrizaje para hacer crecer su 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, ofrecen una visibilidad continua y un diseño apto para móviles que se integra sin problemas en su sitio web. Puede configurar el banner para que se desplace con la página o permanezca fijo, añadir bloques de contenido o campos de entrada directamente al banner, o configurar el banner para que cuando alguien haga clic en él se abra un formulario diferente de su cuenta. 
  • Para que aparezca un formulario diferente cuando un comprador haga clic en el banner, haga clic en el botón de la vista previa y establezca la Acción en Abrir otro formulario, después elija el formulario en vivo que desea mostrar. Tenga 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 su formulario de inscripción, utilice una imagen lateral o de fondo. Las imágenes laterales aparecen a la izquierda o a la derecha del contenido de su formulario, mientras que las imágenes de fondo se muestran detrás de los campos de su formulario. 

Cuando utilice una imagen en un formulario, debe 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 para las imágenes en color, mientras que los PNG pueden mantener nítidas las imágenes transparentes o los logotipos. 
  • Procure 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, a fin de garantizar imágenes de alta calidad sin ralentizar los tiempos de carga de su 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.
  • Tenga en cuenta que una imagen de ancho completo a 72 ppp será a menudo superior a 1 MB, y reducir el tamaño de la imagen puede reducir su calidad. Considere el compromiso entre la calidad de la imagen y el tiempo de carga a la hora de elegir las imágenes.
• Asegúrese 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, intente mantener sus imágenes entre 600 y 1000 px de ancho, y menos de 2000px de alto para las imágenes de ancho completo. Las imágenes que no ocupan todo el ancho del correo electrónico pueden ser inferiores a 600px.
    
    • Tenga en cuenta que si utiliza un formulario de registro de página completa, necesitará 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. Tenga en cuenta, sin embargo, que esto aún puede repercutir en el tiempo de carga.
• Añada texto alternativo a su imagen para promover la accesibilidad de todos los usuarios que interactúen con sus formularios. 

Dado que los formularios de inscripción se renderizan en los navegadores (a diferencia de los correos electrónicos, que se renderizan en los ESP), existen menos recomendaciones sobre cómo formatearlos y ajustarlos. Los navegadores pueden renderizar imágenes de todo tipo y tamaño, así que, en general, limítese a imágenes de alta resolución, tamaños de archivo manejables y pruebe el aspecto en cada tipo de dispositivo. 

Añadir una imagen lateral

Para añadir una imagen lateral:

1. Vaya a la sección Estilos y desplácese hasta los ajustes de Imagen lateral.
2. Seleccione Imagen izquierda o Imagen derecha, según dónde desee que aparezca la imagen.
   
3. Seleccione 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 en función del tamaño del formulario o de si desea que la imagen aparezca más pequeña o más grande.

Tenga en cuenta que las imágenes laterales se establecen a nivel de paso, por lo que puede establecer imágenes independientes para cada paso de su formulario. Para más información sobre las opciones de visualización de imágenes laterales, diríjase a 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. Active la opción Imagen de fondo en Fondo del formulario.
2. Cargue su imagen utilizando el botón Examinar.
3. Ajuste la configuración de la pantalla a su gusto.
   

Si añade una imagen lateral o de fondo a su formulario, previsualice todos los pasos del formulario, incluido el mensaje de éxito, seleccionando cada paso en la barra de menú superior. Por defecto, la altura de su 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 su formulario incluye una imagen, parte del contenido de la imagen puede quedar cortado en los pasos de menor tamaño. Para evitarlo, fije una altura mínima en Tipo de formulario en la sección Estilos. 

Opciones de color y espaciado

Utilice 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 su formulario, a menos que aplique ajustes contradictorios (por ejemplo, para el texto o los colores) dentro de los ajustes de estilo de un bloque de contenido específico.

Fuentes y estilos de texto

Edite el texto (por ejemplo, la fuente, el tamaño, el color, etc.) de sus bloques de contenido (por ejemplo, un campo de correo electrónico o de número de teléfono) en Estilos de texto de campo de entrada.

Edite el texto de un bloque de contenido específico haciendo clic en el bloque en la vista previa del formulario y utilizando el menú Opciones de texto que aparece. Klaviyo'utiliza el estándar de codificación UTF-8, lo que significa que asiste a caracteres latinos, emojis, caracteres de doble byte y mucho más.

Su formulario de inscripción puede utilizar las fuentes web-safe nativas de los editores de Klaviyo, una de nuestras fuentes personalizadas alojadas en Klaviyo, o puede añadir sus propias fuentes personalizadas. Aprenda a utilizar fuentes personalizadas en sus formularios de inscripción. 

Cerrar iconos

Puede ajustar el tamaño, el color y el estilo del icono de cierre de su formulario (la X de la esquina superior derecha). Haga clic en el icono X del editor de formularios y, a continuación, ajuste la configuración en el editor de la izquierda. Más información sobre el estilo del icono de cierre de un formulario. 

Si ha seleccionado utilizar un formulario de página completa, la única forma de que sus compradores puedan descartar el formulario es haciendo clic en el icono de cierre. Esto es útil para captar su atención; pero, asegúrese de que el icono de cierre sea claro y visible para que los compradores no se sientan frustrados por la interrupción de su formulario de página completa.

HTML y CSS personalizados

El editor de formularios de registro de Klaviyo no admite actualmente contenido HTML o CSS personalizado. Para obtener consejos e inspiración sobre cómo personalizar su formulario utilizando el editor de Klaviyo, diríjase 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.

Próximos pasos

Una vez que haya dado estilo a su formulario de inscripción, aprenda a configurar los comportamientos de su formulario, incluyendo qué visitantes deben ver el formulario y cuándo debe aparecer. Diríjase a nuestro artículo cómo elegir la configuración de la orientación y el comportamiento de los formularios.

Una vez que haya publicado su formulario de suscripción, personalice su correo electrónico de confirmación de opt-in, si el opt-in doble está activado para su lista. A continuación, construya una serie de bienvenida para entregar la oferta de su formulario (por ejemplo, un descuento o envío gratuito en su primer pedido) y presentar su marca a los nuevos suscriptores.

Recursos adicionales

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