Tomar el diseño de BrandStudio
Cada formulario nuevo lleva los colores y la tipografía de tu marca de BrandStudio, también uno creado a partir de una plantilla o por Kenji. Para ello, en el paso «Diseño» está arriba la tarjeta «Marca» con el interruptor «Tomar el diseño de BrandStudio». Mientras está activado, los controles de debajo están bloqueados; si cambias algo en BrandStudio, el formulario lo sigue automáticamente.
Si desactivas el interruptor, el formulario conserva el aspecto que tiene en ese momento y, a partir de ahí, lo diseñas tú; la tarjeta muestra «diseño propio». Si vuelves a activarlo, el formulario sigue de nuevo a la marca: tu diseño propio se guarda aparte y «Deshacer: diseño propio del …» lo recupera. Si tu marca aún no tiene colores, hasta entonces se aplica el tema sencillo con la tipografía de la marca.
La tarjeta «Marca» solo aparece si tu cuenta tiene una marca. El interruptor surte efecto al instante, sin «Guardar».
- Abre el formulario en el paso «Diseño».
- Desactiva «Tomar el diseño de BrandStudio» si quieres diseñarlo tú.
- Ajusta los colores, la tipografía y los campos y haz clic en «Guardar».
Logotipo y datos de empresa
Con «Mostrar el logotipo y los datos de empresa de la marca» en la misma tarjeta, sobre el formulario aparecen el logotipo y el nombre de tu marca y, debajo, el nombre de la empresa, el correo electrónico, el teléfono, el sitio web y los iconos de tus canales en redes sociales que hayas guardado en SocialStudio. La notificación, la copia y la copia en PDF llevan los mismos datos, y el título de la página en el navegador pasa a ser algo como «Reservar mesa · Café Lumen».
El interruptor está activado de forma predeterminada y no depende del diseño: quien diseña su formulario por su cuenta sigue mostrando su logotipo. Si a la marca le faltan datos de empresa, el formulario toma el remitente de Invoice. Se aplica tras «Guardar»; «Vista previa en el navegador» muestra cómo queda.
- Abre el paso «Diseño».
- En la tarjeta «Marca», activa o desactiva «Mostrar el logotipo y los datos de empresa de la marca».
- Haz clic en «Guardar» y compruébalo con «Vista previa en el navegador».
Ambientes y colores
Si lo diseñas tú, un clic en «Ambientes» lo ajusta todo a la vez: Sencillo, Medianoche, Salvia, Arena, Rosa, Océano, Tinta o Cielo. Después afinas uno a uno en «Colores»: «Fondo», «Tarjeta» —la superficie sobre la que están los campos—, «Color del texto» y «Botones y acento».
«Fondo» y «Tarjeta» tienen además el control «Opacidad», para que pueda transparentarse una imagen de fondo. El texto y el acento siguen siendo totalmente opacos: un texto semitransparente dependería de lo que tenga debajo y podría volverse ilegible sin que nadie lo notara. Elige un color de texto y un color de tarjeta claramente distintos: de ellos depende la legibilidad de tu formulario.
- En el paso «Diseño», desactiva la adopción del diseño de BrandStudio.
- Haz clic en un ambiente, por ejemplo «Arena».
- Ajusta colores concretos y la opacidad y haz clic en «Guardar».
Tipografía
En «Tipografía» eliges una de once tipografías libres: «Sistema», Inter, DM Sans, Poppins, Space Grotesk, Karla, Lora, Playfair Display, Fraunces, Manrope o IBM Plex Mono. La vista previa la muestra al instante.
Una tipografía propia la subes como archivo: «Subir tu propio archivo de tipografía (woff2, máx. 2 MB)». El nombre del archivo pasa a ser su nombre, y «Quitar» la vuelve a quitar. Si tu tipografía está alojada en un servicio de tipografías, abre «Tipografía propia por enlace» e introduce el enlace al archivo CSS (https) y el nombre de la familia tipográfica; la vista previa muestra si ambos encajan. La tipografía se carga entonces desde donde apunte el enlace. Un archivo subido tiene prioridad sobre el enlace y la selección.
- En el paso «Diseño», desactiva la adopción del diseño de BrandStudio.
- Elige una tipografía en «Tipografía», o sube un archivo woff2.
- Haz clic en «Guardar».
Estilo de campo y redondeo
En «Campos» decides cómo se ven los campos de entrada: «Borde», con un contorno fino; «Superficie», con un fondo ligeramente tintado, o «Línea», con solo una línea base, la forma más sobria. El control «Redondeo» hace que la tarjeta, los campos y los botones sean más angulosos o más redondeados.
Como todos los controles de este paso, solo surte efecto si has desactivado la adopción del diseño de BrandStudio, y se aplica tras «Guardar».
Imagen de fondo
Detrás de la tarjeta puede ir una imagen. En «Imagen de fondo» hay tres fuentes: un archivo propio (PNG, JPEG o WebP de hasta 3 MB), la búsqueda «O buscar imágenes libres …» y «O elegir de mis imágenes» de tu MediaStudio. En cualquier caso, la imagen se copia en tu formulario y se sirve desde tu dirección: no interviene ningún servicio externo.
La tarjeta con los campos sigue siendo legible por encima; cuánto se transparenta la imagen lo regulas con la opacidad de «Tarjeta». «Quitar imagen» la vuelve a quitar. Una imagen elegida se guarda al instante. La subida, la búsqueda y tu propia biblioteca están bloqueadas mientras el formulario siga a tu marca.
- En el paso «Diseño», desactiva la adopción del diseño de BrandStudio.
- En «Imagen de fondo», escribe un término como «café» y haz clic en «Buscar».
- Haz clic en una imagen: queda al instante detrás del formulario.
Vista previa y prueba
En el centro de «Diseño» aparece tu formulario tal como lo ven tus clientes: con los mismos colores, tipografías y filas que en la página del formulario. Con «Escritorio», «Tableta» y «Móvil» cambias el ancho; en el ancho de móvil, las filas se colocan una debajo de otra, igual que para el cliente. A la izquierda está la estructura: un clic en un campo te lleva a «Construir» con ese campo ya seleccionado.
«Probar» hace que la vista previa se pueda rellenar: las condiciones se aplican y no se guarda nada. «Vista previa» vuelve atrás. «Vista previa en el navegador» primero guarda y luego abre la página real del formulario en una pestaña nueva; allí ves también el logotipo y los datos de empresa, el precio orientativo y el total del pedido. Funciona incluso mientras el formulario sigue cerrado; una franja en la parte superior indica «Vista previa», y desde allí no se envía nada.
En el paso «Construir», el formulario se muestra a propósito con un estilo neutro; su aspecto lo ves en este paso.
- Abre el paso «Diseño» y elige «Móvil».
- Haz clic en «Probar» y rellena el formulario a modo de prueba.
- Haz clic en «Vista previa en el navegador» para ver la página real.