Resumen
NueForm proporciona amplias capacidades de personalización de temas que te permiten hacer coincidir tus formularios con tu marca. Cada aspecto visual de un formulario puede ser personalizado, desde colores y fuentes hasta logotipos y CSS personalizado.
Propiedades del Tema
Las propiedades del tema se establecen a nivel de formulario y se aplican a cada pregunta del formulario. Se convierten en propiedades personalizadas CSS (variables) en el momento del renderizado, por lo que todos los componentes se adaptan automáticamente.
Propiedades de Color
| Propiedad | Variable CSS | Descripción | Predeterminado |
|---|---|---|---|
| Color de Fondo | --fc-bg | El color de fondo de todo el formulario. | #0a0a0a |
| Color de Texto | --fc-text | El color de texto principal para preguntas y contenido. | #e8e8e8 |
| Color del Tema (Acento) | --fc-accent | El color de acento usado para resaltados, estados activos y números de pregunta. | #6366f1 |
| Color de Texto de Respuesta | --fc-answer-text | El color del texto escrito por el encuestado en los campos de entrada. | #e8e8e8 |
| Color de Marcador de Posición | --fc-placeholder | El color del texto de marcador de posición en los campos de entrada. | rgba(255,255,255,0.25) |
| Color de Botón | --fc-btn-bg | El color de fondo de los botones principales (OK, Iniciar, Enviar). Recurre al color del tema si no se establece. | #6366f1 |
| Color de Texto de Botón | --fc-btn-text | El color del texto de los botones principales. | #ffffff |
| Color de Título | --fc-title-color | El color de los títulos de preguntas/actividades. Recurre al color de texto. | Hereda el color de texto |
| Color de Descripción | --fc-description-color | El color de las descripciones de preguntas/actividades. | Color de texto al 55% de opacidad |
| Color de Texto de Opción | --fc-option-color | El color de las etiquetas de opciones de elección y contenido de actividad. | Hereda el color de texto |
| Color de Fondo del Indicador | --fc-indicator-bg | Color de fondo de los indicadores de actividad en actividades Fuse. | Acento al 15% de opacidad |
| Color de Texto del Indicador | --fc-indicator-text | Color de texto de los indicadores de actividad. | Color de acento |
Variables de Color Derivadas
El sistema de temas genera automáticamente variables CSS adicionales a partir de tus colores base para usar en varios estados de componentes:
| Variable CSS | Descripción |
|---|---|
--fc-accent-hover | Color de acento aclarado para estados de hover. |
--fc-accent-8 hasta --fc-accent-60 | Color de acento a varios niveles de opacidad (8%, 10%, 15%, 20%, 30%, 40%, 60%). |
--fc-text-2 hasta --fc-text-85 | Color de texto a varios niveles de opacidad (2%, 4%, 5%, 6%, 8%, 10%, 12%, 15%, 20%, 40%, 55%, 75%, 80%, 85%). |
--fc-input-bg | Fondo de entrada (color de texto al 5% de opacidad). |
--fc-card-bg | Fondo de tarjeta (color de texto al 4% de opacidad). |
--fc-border | Color de borde (color de texto al 12% de opacidad). |
--fc-muted | Texto silenciado/secundario (color de texto al 45% de opacidad). |
--fc-primary | Color primario (alias del acento). |
--fc-btn-bg-hover | Fondo de botón aclarado para estados de hover. |
Propiedades de Fuente
NueForm carga fuentes de Google Fonts automáticamente. Se puede usar cualquier familia de fuentes de Google.
| Propiedad | Variable CSS | Descripción | Predeterminado |
|---|---|---|---|
| Fuente de Pregunta | --fc-font-question | Familia de fuente para títulos de preguntas. | Inter |
| Fuente de Respuesta | --fc-font-answer | Familia de fuente para texto de entrada del encuestado. | Inter |
| Fuente de Botón | --fc-font-button | Familia de fuente para etiquetas de botones. | Inter |
| Fuente de Descripción | --fc-font-description | Familia de fuente para descripciones de preguntas/actividades. | Hereda la fuente de pregunta |
| Fuente de Opción | --fc-font-option | Familia de fuente para etiquetas de opciones de elección y contenido de actividad. | Hereda la fuente de respuesta |
| Fuente del Indicador | --fc-font-indicator | Familia de fuente para texto de indicadores de actividad. | Hereda la fuente de pregunta |
| Tamaño de Fuente de Pregunta | --fc-font-size-question | El tamaño de fuente para títulos de preguntas. Acepta cualquier valor de tamaño CSS (rem, px, etc.). | 1.875rem (30px) |
Las fuentes se cargan desde Google Fonts bajo demanda. El sistema genera automáticamente la URL de importación CSS correcta de Google Fonts, solicitando pesos del 300 al 700 para cada familia de fuente. La fuente predeterminada Inter está precargada y no requiere una solicitud a Google Fonts.
Marca
Logotipo
Puedes agregar un logotipo a tus formularios en dos posiciones:
Logotipo Superior:
| Ajuste | Descripción | Predeterminado |
|---|---|---|
| URL del Logotipo Superior | URL de la imagen del logotipo mostrada en la parte superior del formulario. | Ninguno |
| Tamaño del Logotipo Superior | Tamaño del logotipo superior: small, medium o large. | medium |
| Alineación del Logotipo Superior | Alineación horizontal: left, center o right. | center |
| CSS del Logotipo Superior | CSS personalizado aplicado al contenedor del logotipo superior (.fc-top-logo). | Ninguno |
Logotipo de Marca:
| Ajuste | Descripción | Predeterminado |
|---|---|---|
| URL del Logotipo de Marca | URL del logotipo de marca, típicamente mostrado en el área del pie de página o marca de agua. | Ninguno |
Texto del Pie de Página
| Ajuste | Descripción | Predeterminado |
|---|---|---|
| Texto del Pie de Página de Marca | Texto personalizado mostrado en el área del pie de página del formulario. | Ninguno |
CSS de Marca de Agua
| Ajuste | Descripción | Predeterminado |
|---|---|---|
| CSS de Marca de Agua | CSS personalizado aplicado al elemento de marca de agua/logotipo inferior izquierdo (.fc-watermark). | Ninguno |
Ocultar Marca (Pro+)
| Ajuste | Descripción | Predeterminado |
|---|---|---|
| Ocultar Marca | Elimina la marca NueForm del formulario. Requiere un plan Pro+. | Deshabilitado |
Ocultar la marca NueForm es una característica Pro+. En planes gratuitos y de nivel inferior, la marca de agua de NueForm siempre se muestra.
Valores Predeterminados de Marca
Los valores predeterminados de marca a nivel de cuenta te permiten establecer valores de tema predeterminados que se aplican a todos los nuevos formularios que crees. Estos pueden ser anulados a nivel de formulario.
Valores predeterminados de marca disponibles:
- URL del logotipo
- Texto del pie de página
- Color del tema
- Color de fondo
- Color de texto
- Color de texto de respuesta
- Color de marcador de posición
- Color de botón
- Color de texto de botón
- Familia de fuente (Pregunta)
- Familia de fuente (Respuesta)
- Familia de fuente (Botón)
- Tamaño de fuente de pregunta
- URL, tamaño, alineación y CSS del logotipo superior
- CSS de marca de agua
Transiciones a Nivel de Pregunta
Cada pregunta puede tener su propia animación de transición, o puedes aplicar la misma transición a todas las preguntas. Transiciones disponibles:
| Transición | Descripción |
|---|---|
| Deslizamiento Vertical + Desvanecimiento | Las preguntas se deslizan arriba/abajo con un efecto de desvanecimiento. Este es el predeterminado. |
| Deslizamiento Horizontal | Las preguntas se deslizan izquierda/derecha. |
| Deslizamiento Diagonal | Las preguntas se deslizan diagonalmente. |
| Rebote Elástico | Las preguntas rebotan con un sobrepaso elástico. |
| Zoom a Través | Las preguntas hacen zoom de entrada/salida a través del viewport. |
| Girar al Entrar | Las preguntas giran ligeramente al entrar. |
Puedes establecer la transición para preguntas individuales en el editor de preguntas, o usar la opción "Aplicar a todas las preguntas" para establecer una transición uniforme.
CSS Personalizado
Para un control completo sobre la apariencia de tu formulario, puedes escribir CSS personalizado. Consulta la guía de CSS Personalizado para la lista completa de selectores y variables CSS disponibles.
Estilo por Pregunta
Las preguntas individuales soportan estas opciones de estilo:
| Propiedad | Descripción |
|---|---|
| Nombre de Clase Personalizado | Agrega una clase CSS al contenedor de la pregunta. Úsalo en combinación con CSS Personalizado para dar estilo a preguntas específicas de forma diferente. |
| Ocultar Número de Pregunta | Elimina el prefijo del número de pregunta de esta pregunta específica. |
| Nombre de Clase Personalizado de Medios | Agrega una clase CSS al elemento multimedia adjunto a esta pregunta. |
Tema para Fondos Claros vs. Oscuros
El tema predeterminado de NueForm usa un fondo oscuro (#0a0a0a) con texto claro (#e8e8e8). Las variables CSS derivadas (bordes, entradas, tarjetas) se calculan en relación al color del texto, por lo que cambiar a un tema claro es sencillo:
- Establece el Color de Fondo a un color claro (por ejemplo,
#ffffff). - Establece el Color de Texto a un color oscuro (por ejemplo,
#1a1a1a). - Las variables derivadas (
--fc-border,--fc-input-bg,--fc-card-bg,--fc-muted) se adaptarán automáticamente porque están basadas en las variaciones de opacidad del color del texto.
Al cambiar entre temas claros y oscuros, asegúrate de también ajustar el Color de Marcador de Posición, Color de Texto de Respuesta y Color de Botón para mantener la legibilidad y el contraste.