Personalizar Apariencia

La función Personalizar apariencia te permite personalizar la presentación visual de tus formularios. Puedes ajustar el tema, tamaños de fuente, colores y fondo para que coincidan con la identidad de tu marca o crear una experiencia única para el usuario.

Principales Características

• Vista previa en tiempo real: Ve los cambios al instante en una previsualización no funcional del formulario
• Modo Básico: Opciones rápidas de personalización para formularios de escritorio
• Modo Avanzado: Control detallado de la presentación en escritorio y móvil
• Integración de imágenes: Usa imágenes de Unsplash o sube las tuyas propias
• Soporte multi-dispositivo: Personalización separada para escritorio y dispositivos móviles

Primeros Pasos

Activar la Personalización

1. Abre el editor de tu formulario
2. Ve a la pestaña Configuraciones y haz clic en
3. Haz clic en el botón en la pantalla de introducción

Resumen de la Interfaz

• Panel Izquierdo: Vista previa en vivo del formulario (no funcional)
• Panel Derecho: Controles de personalización
• Cabecera: Botones Guardar/Cancelar e interruptor de personalización
• Selector de Modo: Cambiar entre modos Básico y Avanzado

Modo Básico

El modo básico ofrece acceso rápido a las opciones de personalización más comunes para formularios de escritorio.

Fondo del Formulario

Elige cómo se mostrará el fondo del formulario:

• Blanco: Fondo blanco sólido
• Transparente: Totalmente transparente (muestra el fondo de la pantalla)
• Transparente Claro: Semitransparente con superposición clara
• Transparente Oscuro: Semitransparente con superposición oscura

Cómo cambiar:

1. Selecciona la sección "Panel de Respuestas"
2. Haz clic en el menú desplegable "Fondo del Formulario"
3. Elige la opción deseada

Alineación del Formulario

Posiciona tu formulario en la pantalla:

• Inicio: Alineado a la izquierda
• Centro: Centrado en la pantalla
• Fin: Alineado a la derecha

Cómo cambiar:

1. Selecciona la sección "Panel de Respuestas"
2. Haz clic en el menú desplegable "Alineación del Formulario"
3. Elige la alineación

Ancho del Formulario

Ajusta el ancho del formulario (solo escritorio):

• Usa el campo numérico con botones +/-
• El ancho predeterminado se adapta al contenido
• Valores personalizados permiten control preciso

Cómo cambiar:

1. Selecciona la sección "Panel de Respuestas"
2. Ajusta el campo "Ancho del Formulario"
3. Usa los botones +/- o escribe un valor directamente

Márgenes

Añade espaciado alrededor del formulario:

• Margen Izquierdo: Disponible cuando la alineación es "Inicio"
• Margen Derecho: Disponible cuando la alineación es "Fin"
• Medido en píxeles

Cómo cambiar:

1. Establece la alineación en "Inicio" o "Fin"
2. Ajusta el campo de margen
3. Los cambios se aplican inmediatamente

Color de los Controles

Define el color primario de los controles del formulario (botones, campos, etc.):

Cómo cambiar:

1. Selecciona la sección "Panel de Tema"
2. Haz clic en el selector de color
3. Elige el color de tu marca
4. Todos los elementos interactivos adoptarán este color

Imagen de Fondo

Añade una imagen de fondo a toda la pantalla del formulario o a secciones específicas.

Cómo añadir o cambiar una imagen:

1. Selecciona la sección deseada ("Panel de Tema" en Modo Básico o el panel correspondiente en Modo Avanzado)
2. Haz clic en el área de carga (icono de nube o rectángulo punteado)
3. Se mostrarán dos opciones:

• Buscar en galería: Abre tu biblioteca personal de imágenes ya subidas al sistema. Ideal para reutilizar logos, fotos de empresa o imágenes frecuentes.
• Buscar en Unsplash: Integración directa con Unsplash (millones de fotos profesionales gratuitas). Solo escribe palabras clave y elige la imagen — se descargará y aplicará automáticamente.

4. Selecciona la imagen que prefieras y haz clic en “Usar imagen” (o equivalente)

Cómo reemplazar la imagen:

• Haz clic directamente sobre la imagen aplicada para volver a abrir las dos opciones (galería o Unsplash).

Cómo eliminar la imagen:

• Haz clic en el icono de papelera que aparece sobre la imagen aplicada.

Consejo:

• La galería guarda todas las imágenes que ya has subido, facilitando su reutilización.
• Unsplash es perfecto para encontrar fotos de alta calidad rápidamente sin salir de la herramienta.

Modo Avanzado

El modo avanzado ofrece control detallado de la presentación del formulario tanto en escritorio como en móvil.

Personalización para Escritorio

La pestaña de escritorio contiene todas las opciones de personalización para visualización web:

Configuración del Formulario

Configura la apariencia general del formulario:

1. Fondo del Formulario: Mismas opciones que en modo básico
2. Ancho del Formulario: Ajuste del ancho del contenedor
3. Color de los Controles: Definición del color principal del tema
4. Radio de Borde: Redondeo de esquinas del contenedor
5. Mostrar Barra de Progreso: Activar/desactivar indicador de progreso
6. Mostrar Título: Activar/desactivar título del formulario

Cabecera y Pie de página

Añade secciones personalizadas de cabecera/pie de página al formulario:

Cómo activar:

1. Expande el panel "Formulario"
2. Marca las casillas "Cabecera" o "Pie de página"
3. Configura los ajustes específicos de la sección (ver más abajo)

Personalización para Móvil

Crea una apariencia separada para dispositivos móviles:

Cómo activar la personalización móvil:

1. Haz clic en la pestaña "Móvil" (icono de teléfono)
2. Activa el interruptor "Activar Entorno"
3. Configura los ajustes específicos para móvil

Configuración del Formulario

Disponibles tanto en escritorio como en móvil:

Configuración	Descripción	Escritorio	Móvil
Fondo del Formulario	Estilo del fondo	✓	✓
Ancho del Formulario	Ancho del contenedor	✓	✗
Color de los Controles	Color principal del tema	✓	✓
Radio de Borde	Redondeo de esquinas	✓	✓
Mostrar Barra de Progreso	Mostrar progreso	✓	✓
Mostrar Título	Mostrar título del formulario	✓	✓

Secciones de la Pantalla

Personaliza regiones específicas de la pantalla alrededor del formulario:

Secciones Disponibles

• Todo: Aplica ajustes a todo el fondo de la pantalla
• Cabecera: Parte superior de la pantalla
• Pie de página: Parte inferior de la pantalla
• Arriba: Área superior (ancho completo)
• Arriba Izquierda: Esquina superior izquierda
• Arriba Centro: Área central superior
• Arriba Derecha: Esquina superior derecha
• Abajo: Área inferior (ancho completo)
• Abajo Izquierda: Esquina inferior izquierda
• Abajo Centro: Área central inferior
• Abajo Derecha: Esquina inferior derecha
• Izquierda: Lateral izquierda (altura completa)
• Derecha: Lateral derecha (altura completa)

Cómo seleccionar secciones:

1. Expande el panel "Pantalla"
2. Marca las secciones que deseas personalizar
3. Cada sección seleccionada aparecerá como un acordeón expandible debajo

Personalización Específica por Sección

Una vez seleccionadas las secciones, personalízalas individualmente:

Opciones de Texto

• Texto: Texto personalizado para la sección
• Color de Fuente: Selector de color del texto

Opciones de Fondo

• Color de Fondo: Color de fondo de la sección
• Usa el selector de color para colores personalizados
• Haz clic en el botón "Transparente" para fondo transparente

Opciones de Imagen

• Imagen: Subir o seleccionar imagen de fondo
• Haz clic en el área de carga para añadir
• Haz clic en la imagen actual para reemplazar
• Haz clic en el icono de papelera para eliminar
• Repetir Imagen: Activar para mosaico de la imagen

Opciones de Disposición

• Margen Superior: Espaciado superior
• Margen Izquierdo: Espaciado a la izquierda
• Margen Derecho: Espaciado a la derecha
• Margen Inferior: Espaciado inferior
• Altura: Altura de la sección en píxeles
• Ancho: Ancho de la sección en píxeles
• Alineación: Alineación del contenido (inicio, centro, fin)
• Radio de Borde: Redondeo de esquinas
• Ancho Total de Pantalla: Expandir sección al ancho completo

Nota: Las opciones disponibles varían según el tipo de sección. No todas las opciones aplican a todas las secciones.

Posición del Formulario (Solo Escritorio)

Ajuste fino de la posición del formulario en la pantalla:

1. Alineación del Formulario: Izquierda, centro o derecha
2. Margen Superior: Espacio desde arriba
3. Margen Izquierdo: Espacio desde la izquierda (cuando está alineado al inicio)
4. Margen Derecho: Espacio desde la derecha (cuando está alineado al final)
5. Margen Inferior: Espacio desde abajo

Gestión de Personalizaciones

Guardar Cambios

1. Realiza los cambios deseados
2. Los cambios se previsualizan en tiempo real
3. Haz clic en el botón "Guardar" en la cabecera
4. Las personalizaciones se aplicarán al formulario en vivo

Nota: El botón Guardar solo aparece cuando hay cambios sin guardar.

Cancelar Cambios

• Haz clic en el botón "Cancelar" para descartar cambios no guardados
• El formulario volverá al último estado guardado

Desactivar la Personalización

Para desactivarla temporalmente sin perder configuraciones:

1. Desactiva el interruptor "Personalización Activada" en la cabecera
2. El formulario volverá a la apariencia predeterminada
3. Vuelve a activarlo para recuperar tus personalizaciones

Eliminar la Personalización

Para borrar permanentemente todas las personalizaciones:

1. Haz clic en el botón "Eliminar Personalización"
2. Confirma la acción
3. Todos los ajustes serán eliminados
4. El formulario volverá a la apariencia predeterminada

Mejores Prácticas

Imágenes

• Resolución: Usa imágenes de alta calidad (mínimo 1920x1080 para fondos)
• Tamaño del Archivo: Optimiza las imágenes para reducir tiempo de carga (< 500KB recomendado)
• Formato: JPEG para fotos, PNG para gráficos con transparencia
• Contenido: Asegúrate de que las imágenes no distraigan del contenido del formulario

Colores

• Contraste: Garantiza suficiente contraste entre texto y fondo
• Consistencia: Usa los colores de tu marca de forma coherente
• Accesibilidad: Prueba los colores para accesibilidad a daltónicos
• Color de Controles: Elige un color que destaque sobre los fondos

Disposición

• Alineación: La alineación central funciona mejor en la mayoría de formularios
• Ancho: Mantén el ancho entre 600-800px para buena legibilidad
• Márgenes: Usa espaciado consistente en todo el formulario
• Móvil: Siempre prueba la personalización móvil en dispositivos reales

Rendimiento

• Secciones Avon: Activa solo las secciones realmente necesarias
• Imágenes: Comprime las imágenes antes de subirlas
• Pruebas: Previsualiza tu formulario en distintos dispositivos y navegadores

Preguntas frecuentes

P: ¿Puedo tener apariencias diferentes para escritorio y móvil?

R: ¡Sí! Usa el Modo Avanzado y personaliza cada entorno por separado. Activa la personalización móvil en la pestaña Móvil.

P: ¿Las personalizaciones afectan la funcionalidad del formulario?

R:—no, las personalizaciones son puramente visuales y no afectan lógica, validación ni recolección de datos.

P: ¿Puedo deshacer cambios después de guardar?

R: Sí, puedes modificar o eliminar las personalizaciones en cualquier momento. No hay historial de deshacer integrado, así que documenta tus ajustes si es necesario.

P: ¿Qué pasa si desactivo la personalización móvil?

R: Se usará el tema de escritorio en dispositivos móviles.

P: ¿Puedo copiar personalizaciones de un formulario a otro?

R: Esta función aún no está disponible. Tendrás que recrearlas manualmente en cada formulario.

P: ¿Cómo sé qué tamaño de imagen usar?

R: Para fondos de pantalla completa, usa al menos 1920x1080. Para secciones, el tamaño depende de las dimensiones que hayas establecido.

P: ¿Por qué no veo algunas opciones de personalización?

R: Algunas opciones solo están disponibles en Modo Avanzado o para tipos específicos de sección. Cambia a Modo Avanzado para control total.

P: ¿Puedo usar CSS personalizado?

R: La personalización directa vía CSS no está disponible en esta interfaz. Usa los controles proporcionados para ajustes visuales.

P: ¿Cuál es la diferencia entre "Transparente" y color de fondo transparente?

R: La opción "Transparente" como fondo del formulario ofrece distintos niveles de transparencia. El botón transparente en personalización de secciones establece el fondo como totalmente transparente (#00000000).

P: ¿Cómo crear una experiencia de marca?

R:

1. Usa los colores de tu marca en Color de los Controles
2. Añade tu logo/imagen de marca en la sección Cabecera
3. Usa imágenes de fondo adecuadas a la marca
4. Mantén espaciado y alineación consistentes
5. Prueba en todos los dispositivos