Diseñar el formulario

Los ajustes Appearance de Sami B2B Onboarding cambian el aspecto de todo el formulario: su fuente, tamaño, ancho, estilo de campos y colores. Se aplican a un solo formulario, así que cada uno de tus formularios puede tener su propio aspecto, y nunca modifican tu tema.

Abre los ajustes Appearance

1. Abre el formulario

   Ve a Forms y haz clic en Edit junto al formulario. Se abre el creador.

2. Abre Appearance

   En la columna de la izquierda, haz clic en Appearance. El panel muestra todos los ajustes siguientes y la vista previa del centro cambia a medida que los modificas.

   

   Cada ajuste de Appearance cambia la vista previa al instante.

3. Guarda

   Cuando el formulario tenga el aspecto que quieres, haz clic en Save en la barra de guardado. Si el formulario está publicado, quienes compran verán el nuevo aspecto la próxima vez que lo abran.

Ajustes de Appearance

Ajuste	Qué cambia	Valor predeterminado
Font	La tipografía de todo el formulario. Abre el panel Select font.	Theme default
Font size scale	El tamaño de todo el texto del formulario, del 80 % al 130 % del tamaño de tu tema, en pasos del 5 %.	100%
Width	El tamaño máximo del formulario, en px (de 320 a 1200) o en % del espacio en el que se encuentra (de 30 a 100). El formulario está centrado y se estrecha en pantallas pequeñas.	640 px
Layout	Default coloca los campos directamente en la página. Boxed pone el formulario en una tarjeta propia, con margen interior y borde.	Default
Style	El aspecto de cada cuadro de campo. Consulta Estilos de campo.	Classic
Field spacing	El espacio entre campos: Comfortable o Compact.	Comfortable
Color scheme	Los colores de fondo, de texto y de botones del formulario. Consulta Colores.	Default
CSS class	Añade al formulario un nombre de clase propio, para que los estilos de tu tema puedan aplicarse a él, por ejemplo wholesale-form.	Vacío

Cuando cambias Width entre px y %, vuelve a empezar en 640 px o en 100%.

Elige una fuente

1. Abre la lista de fuentes

   En Appearance, haz clic en el cuadro Font. Se abre el panel Select font.

2. Busca una fuente

   Escribe en Search o desplázate. La lista tiene dos grupos:

   • System fonts: Theme default, la fuente que tu tema ya usa, y después System UI, Helvetica, Arial, Georgia, Times New Roman y Monospace. Para ellas no se carga nada adicional.
   • Other fonts: casi 1000 fuentes web. Cada una se muestra con su propia tipografía. Se cargan desde Google Fonts en tu tienda online, lo que puede hacer que la página tarde un poco más en cargarse.

3. Elige la fuente y su grosor

   Haz clic en una fuente. La vista previa cambia al instante. Si la fuente tiene varios grosores, elige uno en la lista Weight de la parte inferior del panel, por ejemplo Regular, Bold o Italic. Haz clic en Done.

   La nota bajo Font confirma lo que elegiste, por ejemplo Bold. Loads from Google Fonts on the storefront.

Estilos de campo

Haz clic en el cuadro Style para ver los ocho estilos, cada uno dibujado como un campo de muestra Company name. Haz clic en uno para aplicarlo a todos los campos del formulario.

Estilo	Qué aspecto tiene un campo
Material filled	Un cuadro gris con la etiqueta en su interior, en la parte superior.
Material outlined	Un cuadro con borde y la etiqueta sobre su borde superior.
Classic	Un cuadro gris suave con una sombra ligera y esquinas redondeadas. Es el predeterminado.
Classic rounded	Classic, con los cuadros de una línea totalmente redondos.
Flat	Un cuadro gris con esquinas rectas y sin sombra.
Flat rounded	Flat, con los cuadros de una línea totalmente redondos.
Line	Solo una línea bajo la respuesta.
Line rounded	Se ve igual que Line: un subrayado no tiene esquinas que redondear.

En los estilos redondeados, los cuadros que admiten varias líneas, como Long text, mantienen las esquinas suavemente redondeadas en lugar de ser totalmente redondos.

Cada tarjeta muestra el aspecto de un campo con ese estilo.

Colores

La fila Color scheme muestra diez combinaciones ya preparadas: Default, Forest Light, Cool Ocean, Matcha Calm, Warm Sand, Blush, Slate, Charcoal, Forest Dark y Midnight. Cada muestra enseña sus colores de fondo, de texto y de botón. Haz clic en una para usarla.

• Default toma los colores propios de la página, de modo que el formulario combina con tu tema. Para cambiar esos colores, cambia los ajustes de tu tema.
• Cualquier otra combinación pinta el fondo propio del formulario por detrás. Los botones y los marcadores de paso toman el color de botón de la combinación.

Crea tus propios colores

1. Abre la combinación

   Bajo las muestras, haz clic en Edit scheme. Se abre el panel Editing de la combinación que elegiste, por ejemplo Editing Warm Sand.

2. Cambia los colores

   Haz clic en un color para abrir el selector de color. Arrastra en el cuadrado y en las franjas de color, escribe un código hexadecimal o usa el cuentagotas para elegir un color de tu pantalla si tu navegador lo ofrece. Los colores que puedes configurar:

   Color	Qué pinta
   Background	Detrás del formulario.
   Text	Etiquetas, encabezados y respuestas.
   Solid button background	Los botones principales, como Submit application, y los marcadores de paso.
   Solid button label	El texto de esos botones.
   Outline button	El borde de los botones con contorno, como Back.

   Background, Text y Outline button pueden decir Theme color, lo que significa que el formulario usa ahí el color de tu tema.

   En cuanto cambias un color, la combinación pasa a ser Custom y se añade una muestra Custom a la fila. Estos colores se aplican solo a este formulario. Las combinaciones de colores propias de tu tema no cambian.

   

   Cambia cualquier color y el formulario obtiene una combinación Custom propia.

3. Cierra o restablece

   Cierra el panel para conservar tus colores. Para volver a los colores de tu tema, haz clic en Remove color scheme en la parte inferior del panel: el formulario vuelve a Default.

Añade tu logotipo

El logotipo está en el encabezado del formulario, encima de su título.

1. Abre el encabezado

   En la columna, haz clic en Elements y luego en Header en la parte superior de la lista.

2. Sube el logotipo

   Activa Show store logo, haz clic en Upload image y elige el archivo. Debe ser una imagen .jpg, .png o .svg de 1 MB o menos. Un tamaño de unos 200×60 px es el que mejor encaja.

   Para cambiarlo más adelante, haz clic en Replace image. Para quitarlo, haz clic en Remove.

3. Guarda

   Haz clic en Save en la barra de guardado.

Comprueba el diseño

La vista previa del creador dibuja tu formulario con el mismo código que usa tu tienda online, así que la disposición, el estilo de campo, el espaciado y la combinación de colores que ves son los que obtiene quien compra.

• Usa los botones Desktop preview y Mobile preview que hay sobre la vista previa para comprobar ambos tamaños de pantalla.
• Los ajustes que dejas en manos de tu tema, Theme default para la fuente y Default para los colores, toman la fuente y los colores de tu tema en la tienda online. Para verlos, haz clic en Preview (el botón del ojo) en la barra de herramientas. Abre la página del formulario en tu tienda en una pestaña nueva, tal como se guardó por última vez.

Siguientes pasos

• Crear tu formulario: configura el ancho, la etiqueta y el texto de ejemplo de cada campo.
• Después de que quien compra envíe el formulario: escribe la pantalla de agradecimiento que ve quien compra después de este formulario.
• Añadir un formulario a tu tienda: coloca el formulario terminado en una página, en una sección del tema o en cualquier sitio con HTML.