Marca y dominios
Apariencia y personalización
Colores, fuentes, presets, imágenes de portada y modo oscuro. Haz que cada formulario sea una parte natural de tu marca.
Panel de tema
Haz clic en Tema (icono de paleta) en la barra de herramientas superior. El panel se ancla a la derecha y muestra los cambios al instante.
El interruptor Modo (Claro / Oscuro) en la parte superior del panel cambia el esquema de color que estás editando. Cada modo guarda sus propios valores de tema, por lo que puedes ajustar ambos de forma independiente.
El selector Tema, debajo, muestra primero tus temas del espacio de trabajo para ese modo y luego los preajustes integrados. El pie de página muestra Todos los cambios guardados hasta que edites algo; entonces aparecen Descartar y Guardar.
Preajustes
El selector de temas incluye siete preajustes para modo claro y nueve para modo oscuro. Cada uno aplica un conjunto completo de colores coordinados, una fuente y un redondeo de esquinas con un solo clic.
Tema formbase predeterminado — se aplica automáticamente a cada formulario nuevo, uno por modo
Preajustes — los temas seleccionados que se muestran a continuación
Personalizado — “Solo este formulario”. Lo que muestra el selector en cuanto cambias cualquier valor a mano
Disponible en Gratis
Los temas personalizados, incluidos los preajustes y la personalización independiente de los modos claro y oscuro, están disponibles en todos los planes. Consulta planes y precios.
Preajustes de modo claro
| Preajuste | Estilo |
|---|---|
| Solarized Light | Cálido y de bajo contraste con tonos ámbar |
| Atom One Light | Contraste nítido con acentos azules |
| Catppuccin Latte | Pastel cálido con malva y melocotón |
| Rosé Pine Dawn | Pasteles suaves de rosa y pino con acentos iris |
| Mint Paper | Verde azulado fresco sobre marfil con toques esmeralda |
| Coral Reef | Melocotón cálido y coral con acentos soleados |
| Sunny | Amarillo dorado cálido sobre una base marfil |
Preajustes de modo oscuro
| Preajuste | Estilo |
|---|---|
| Dracula | Oscuro con colores de acento vibrantes |
| Monokai | Paleta oscura clásica con verde cálido y naranja |
| Midnight Synth | Medianoche profunda con resplandor neon synthwave |
| Vulcan | Oscuro y elegante con grises fríos y azul eléctrico |
| Tokyo Night | Ambiente urbano oscuro con neon e índigo |
| Gruvbox Dark | Tierra retro cálida con mostaza y naranja quemado |
| Rosé Pine Moon | Noche ciruela oscura con acentos iris |
| Forest Night | Pino profundo con tonos de musgo y bosque |
| Black | Negro absoluto con escala de grises — inspirado en Vercel |
Temas del espacio de trabajo
Un tema del espacio de trabajo es un tema con nombre para un modo, claro u oscuro, que comparten varios formularios. Úsalo para mantener todos los formularios fieles a tu marca: cambia el tema una vez y todos los formularios que lo usan se actualizan. Para aplicar tema a ambos modos, mantén dos, como Acme Claro y Acme Oscuro.
Crear un tema del espacio de trabajo
Abre el panel de tema en un formulario, elige Claro u Oscuro, y elige un preajuste o ajusta los colores hasta que el formulario se vea como quieres.
Haz clic en Guardar como tema del espacio de trabajo debajo del selector de temas y dale un nombre, como el de tu empresa.
Ese modo del formulario ahora está vinculado al nuevo tema. El selector muestra su nombre y cuántos formularios lo usan.
Úsalo en otro formulario
Abre el panel de tema en el otro formulario, elige el tema en Temas del espacio de trabajo y haz clic en Guardar. El selector solo muestra los temas del espacio de trabajo para el modo que estás editando, así que vincula los modos claro y oscuro por separado.
Editar un formulario vinculado
Un formulario vinculado se edita como cualquier otro. En cuanto tus cambios difieren del tema del espacio de trabajo, el pie de página te pregunta dónde guardarlos:
Guardar en [nombre del tema] actualiza el tema del espacio de trabajo y todos los formularios vinculados a él.
Guardar solo para este formulario conserva el cambio en este formulario. Ese modo deja de seguir el tema del espacio de trabajo y pasa a ser un tema personalizado.
Aplicar un preajuste a un modo vinculado también lo desvincula. Para volver a vincularlo, elige el tema del espacio de trabajo en el selector y guarda.
Los formularios publicados se actualizan en su próxima publicación
Guardar un tema del espacio de trabajo cambia de inmediato el borrador de todos los formularios vinculados. Los encuestados ven el nuevo aspecto después de que cada formulario se publique de nuevo, igual que con cualquier otro cambio. Hasta entonces, los formularios vinculados muestran Publicar cambios.
Renombrar o eliminar
En un formulario vinculado, abre el menú ⋯ junto al selector de temas. Renombrar cambia el nombre en todos los lugares donde se usa el tema. Eliminar quita el tema; los formularios que lo usaban conservan su aspecto actual como tema personalizado.
Controles del tema
Elige un preajuste o un tema del espacio de trabajo y luego ajusta la tipografía y los colores. Cada color describe un propósito en lugar de un componente concreto. Por ejemplo, cambiar Texto actualiza a la vez el texto de la página, los títulos de las preguntas, el texto de los campos y el texto de las opciones. Pasa el cursor sobre el nombre de un color para ver qué controla. Un punto marca los colores que has cambiado pero no has guardado.
Tipografía
| Ajuste | Qué controla |
|---|---|
| Fuente | Tipografía para los campos del formulario, el texto de la página y los bloques compartidos. Once familias, listadas abajo |
| Tamaño | Tamaño de texto base, de 12 a 22 px. Las etiquetas y controles relacionados escalan con él |
| Radio de esquina | Redondeo de esquina compartido para campos, tarjetas, opciones y botones, de 0 a 32 px |
Colores
Los colores se agrupan según dónde aparecen en el formulario.
| Grupo | Color | Qué controla |
|---|---|---|
| Página | Fondo | Lienzo detrás de formularios, bloques multimedia y márgenes de foco |
| Página | Texto | Texto principal, títulos de pregunta, texto de campos y texto de opciones |
| Página | Atenuado | Rellenos de bajo énfasis, como encabezados de tabla y estados de hover discretos |
| Página | Texto atenuado | Descripciones, textos de ayuda, marcadores de posición y leyendas |
| Página | Enlace | Enlaces en línea en texto enriquecido y textos del formulario |
| Campos y opciones | Campo | Campos, tarjetas, popovers, filas de archivos y opciones |
| Campos y opciones | Borde | Contornos de campos, tarjetas, opciones, tablas y subidas de archivos |
| Campos y opciones | Seleccionado | Relleno de opciones seleccionadas, más resaltados suaves de hover y arrastre |
| Campos y opciones | Texto seleccionado | Texto e iconos sobre superficies seleccionadas |
| Campos y opciones | Anillo de foco | Anillos de foco, contornos de selección y bordes activos |
| Botones y errores | Botón | Botones de Enviar/Siguiente, barras de progreso y acciones principales |
| Botones y errores | Texto de botón | Texto e iconos en las acciones principales |
| Botones y errores | Error | Errores de validación, bordes inválidos y fallos al subir archivos |
| Valoración | Contorno de estrella | Estrellas de valoración inactivas |
| Valoración | Relleno de estrella | Estrellas de valoración seleccionadas |
| Valoración | Marca de obligatorio | Asterisco de obligatorio en las preguntas |
El grupo Valoración también tiene Tamaño de estrella, el tamaño visual de las estrellas de valoración, en píxeles, de 12 a 48.
Fuentes
formbase incluye once familias tipográficas. La fuente que elijas en Tipografía se aplica a todo el texto del formulario.
| Familia tipográfica | Estilo |
|---|---|
| Cal Sans UI | Sans-serif predeterminada de formbase |
| Inter | Sans-serif geométrica limpia |
| Manrope | Sans-serif geométrica moderna |
| Arial | Sans-serif de sistema neutral |
| Tahoma | Sans-serif compacta |
| Times New Roman | Serif clásica |
| Georgia | Serif elegante para pantalla |
| Lora | Serif caligráfica contemporánea |
| Palatino Linotype | Serif de estilo libresco, de trazo antiguo |
| JetBrains Mono | Monoespaciada pensada para desarrolladores |
| Comic Sans MS | Informal y de aspecto dibujado a mano |
Imagen de portada y logotipo
La imagen de portada y el logotipo se sitúan en la parte superior del lienzo. Se configuran directamente en el lienzo, no dentro del panel de tema. Para ver el proceso paso a paso, consulta Entender el editor → Portada y logotipo.
Modo oscuro
formbase admite el modo oscuro en dos lugares: el panel de control y los formularios publicados.
Panel de control
Activa el modo oscuro desde el menú de usuario en la parte inferior de la barra lateral. El ajuste se aplica a tu cuenta en todos los dispositivos.
Formularios publicados
Los formularios publicados siguen por defecto las preferencias del sistema del respondente. Si su dispositivo está en modo oscuro, el formulario se muestra en modo oscuro.
Configurar ambos modos
Si solo configuras un tema claro, el formulario usa los colores oscuros predeterminados de formbase cuando el modo oscuro está activo. Para un control total, configura ambos esquemas de color con el alternador claro/oscuro en la parte superior del panel de tema.
Cuando cambias entre Claro y Oscuro en el panel de tema, el panel de control cambia para coincidir. Esto te permite previsualizar tu tema en contexto mientras editas.
Patrones de personalización comunes
Combina con tu marca — elige la fuente de tu marca, ajusta el color Botón a tu color de marca principal y sube tu logotipo. Usa un preajuste como punto de partida y luego guarda el resultado como un tema del espacio de trabajo para que todos los formularios lo compartan.
Encuesta con modo oscuro prioritario — fuerza el modo oscuro desde los ajustes de incrustación al compartir, y luego personaliza el esquema de color oscuro para una mejor legibilidad. Usa un acento de alto contraste para el color de valoración activo, de modo que las estrellas resalten sobre fondos oscuros.
Incrustación minimalista — ajusta el color Fondo para que coincida con tu sitio web, oculta la imagen de portada y el logotipo en los ajustes de incrustación, usa un color Borde discreto y reduce el radio de esquina a 0.
Cuestionario divertido — elige Comic Sans MS, sube el radio de esquina hacia 32 para formas de píldora, usa un color Seleccionado llamativo y añade una imagen de portada desde la pestaña Unsplash del selector de portada.
Marca
Por defecto, los formularios publicados muestran un pequeño distintivo de formbase. Puedes desactivarlo con el ajuste Mostrar marca de formbase en Configuración del formulario → General. Eliminar el distintivo requiere un plan Pro o Business — consulta planes y precios.
Prueba los modos claro y oscuro antes de publicar
Previsualiza tu formulario con el modo oscuro del sistema activado antes de publicarlo. El contraste del logotipo y los colores de acento suelen necesitar un ajuste para la variante oscura — especialmente las imágenes de portada y los colores de botón que quedan bien sobre un fondo claro pero se pierden sobre uno oscuro.