Personalizar el aspecto del formulario

El aspecto del formulario se cambia desde Theme, en la pestaña Designer del editor. Afecta a lo que ve quien responde: colores, encabezado, fondo y tipografía.

Para llegar: Herramientas → Formularios, tres puntos de la fila, Editar.

Abrir el tema

1. En la pestaña Designer, pulsa Theme (Global form settings), arriba de la caja de herramientas.
2. El panel de la derecha muestra el tema del formulario, repartido en cinco pestañas: General, Header, Background, Appearance y Advanced. Si no ves todas, desplaza la fila de pestañas.

General

Opción	Para qué sirve
Color scheme	Formulario claro (Light) u oscuro (Dark).
Question appearance	Cómo se agrupan las preguntas; por defecto, Panels (default).
Density	El espacio entre preguntas; por defecto, Comfortable.
Border radius	Lo redondeado de las esquinas; por defecto, Rounded.

Header (encabezado)

1. Abre la pestaña Header.
2. Con Show header decides si se muestra el bloque del título.
3. En Background color, escribe el color de fondo del encabezado, en formato #fff o rgb(…).
4. En Height, la altura; por ejemplo, 120px. Vacío, se ajusta solo.

Background (fondo)

1. Abre la pestaña Background.
2. En Background color, el color del fondo de la página (por defecto, #F3F3F3).
3. Para usar una imagen, pega su dirección en Background image URL y elige cómo se ajusta (Image size, por defecto Cover) y si se desplaza con la página (Image attachment, por defecto Scroll).
4. Con Opacity ajustas la transparencia del fondo.

Appearance (color y tipografía)

1. Abre la pestaña Appearance.
2. En ACCENT, elige el color principal: Azul, Verde, Amarillo o Rosado. En el formulario público tiñe, por ejemplo, los números de los pasos y las marcas de página.
3. Si necesitas un color exacto de tu marca, escríbelo en Custom accent (hex), por ejemplo #2563EB. Ese color sustituye al de la lista.
4. En Font family, escribe la tipografía. Vacío, se usa la de Prolibu.

Advanced (CSS propio)

En CUSTOM CSS puedes escribir reglas de estilo para el formulario. El texto de ayuda explica cómo apuntar a un campo concreto, por ejemplo con [data-co-field="name"]. Es una opción para quien sabe CSS; para la mayoría basta con las otras pestañas.

Para deshacer todos los cambios del tema, pulsa Reset theme, abajo en el panel.

Revisarlo en la vista previa

1. Pulsa la pestaña Preview, arriba a la izquierda del editor.
2. Ves el formulario con el tema aplicado. Si tiene varias páginas, arriba aparecen los pasos (en el ejemplo, Tus datos y Tu opinión) y abajo los botones para avanzar y retroceder.
3. Puedes rellenarlo y pulsar el botón de enviar: a la derecha, Last submit muestra los datos que se enviarían. Nada se guarda.

Ver el formulario en código

La pestaña JSON Editor muestra todo el formulario (páginas, campos, opciones y tema) como texto en formato JSON. No hace falta tocarla. Si la editas, Apply aplica los cambios al diseño y Discard los descarta.

Guardar el aspecto

Pulsa Guardar en el panel Editar Formulario. El tema se guarda con el formulario y se ve en el enlace público, como muestra Publicar y compartir un formulario.