Tema y apariencia

Se aplica a: anota, todos los planes Roles requeridos: Editor o superior para cambiar el tema y los textos de un formulario; Propietario o Administrador para configurar el logo de la empresa Referencias regulatorias: ninguna

Descripción general

Cada formulario tiene su propio aspecto: una paleta, un color principal, colores de página y de tarjeta, una tipografía, un estilo de botones y un logo. Esta guía te muestra cómo darle a un formulario el aspecto de tu marca y revisar el resultado en el formulario público. Está pensada para cualquier persona que crea formularios; configurar el logo de la empresa requiere un Propietario o un Administrador.

El ejemplo le da a la Inscripción al taller de barismo de Café Aurora un aspecto cálido de cafetería: un acento café, un fondo crema, una tipografía con serifas, botones redondeados tipo píldora y el logo del café.

Conceptos clave

• Panel Diseño: el panel donde configuras el tema de un formulario. Se abre con el botón flotante del lápiz, ✏ Diseño, en la pestaña Crear. Es el único lugar para cambiar el tema: la pestaña Configuración no tiene una sección de tema.
• Paleta: una combinación lista de color principal, fondo de la página y color de la tarjeta. Es un punto de partida rápido; después puedes ajustar cada color.
• Borrador y formulario publicado: los cambios de tema se guardan automáticamente en el borrador del formulario, y el lienzo del editor los muestra al instante. Las personas que responden siguen viendo el aspecto anterior hasta que haces clic en Actualizar (o en Publicar la primera vez).
• Logo de la empresa y logo del formulario: el logo y el Nombre de la empresa se configuran una sola vez para todo el espacio de trabajo, en Configuración de la cuenta > Empresa. Todos los formularios los usan, salvo que escribas una URL del logo para ese formulario.

Tarea 1 — Ver cómo se ve hoy tu formulario

Paso a paso

1. Abre el enlace público de tu formulario (está en la pestaña Publicar, en Compartir). Míralo antes de cambiar nada, para poder comparar después. Un formulario nuevo usa el tema por defecto de anota: acento verde, página gris claro, tarjeta blanca y, arriba, el logo y el nombre de la empresa.

   Antes: el formulario con el tema por defecto.

Tarea 2 — Abrir el panel Diseño

Requisitos previos

• Un rol de Editor o superior en el espacio de trabajo.

Paso a paso

2. Abre el formulario en el editor de formularios. En la pestaña Crear, haz clic en el botón redondo del lápiz, abajo a la derecha del lienzo. Al pasar el cursor encima, muestra la palabra Diseño.

   El botón ✏ Diseño abre los ajustes del tema.

3. El panel Diseño se abre a la derecha, con los ajustes de Tema del formulario: Paletas, Color principal, Fondo de la página, Color de la tarjeta, Tipografía, Estilo de botones, URL del logo y Mostrar nombre y logo de la empresa. El lienzo de la izquierda muestra tus cambios a medida que los haces.

   El panel Diseño. Haz clic en ✕ para cerrarlo.

Resultado

El panel Diseño está abierto junto a tu formulario, listo para las siguientes tareas.

Tarea 3 — Empezar con una paleta

Paso a paso

4. En Paletas, haz clic en un mosaico. Cada mosaico es una vista previa pequeña: el fondo de la página alrededor de una tarjeta, con el color principal como botón. El mosaico que aplicas queda resaltado, y los tres colores de abajo se actualizan. Para Café Aurora, el mosaico café y crema de la segunda fila es un buen comienzo.

   La paleta completa Color principal, Fondo de la página y Color de la tarjeta con un solo clic.

Resultado

El formulario tiene un conjunto de colores coordinado. Puedes quedarte aquí o afinarlos en la Tarea 4.

Tarea 4 — Definir los colores exactos de tu marca

Paso a paso

5. Color principal es el acento que se usa en botones, enlaces y elementos destacados. Escribe el código de color de tu marca en el cuadro (para Café Aurora, #6F4E37, un café) y presiona Tab. También puedes hacer clic en el cuadrito de color para elegir un color visualmente.

   Escribe el código hexadecimal exacto o haz clic en el cuadrito para usar el selector de color.

6. Fondo de la página es el color alrededor de la tarjeta del formulario. Escribe #F3E9DC, un crema, y presiona Tab. El fondo del lienzo cambia al instante.

   El fondo de la página llena el espacio alrededor del formulario.

7. Color de la tarjeta es el fondo de la tarjeta que contiene las preguntas. Escribe #FFFCF7, un blanco cálido, y presiona Tab.

   Una tarjeta ligeramente cálida combina bien con una página crema.

   No hay un ajuste aparte para el color del texto. Si eliges un Color de la tarjeta oscuro, anota cambia automáticamente el texto y los bordes del formulario a colores claros para que las preguntas se sigan leyendo bien. La paleta oscura Midnight (el último mosaico) funciona igual.

Resultado

Los tres colores coinciden con tu marca. Cuando los colores coinciden exactamente con una paleta, el mosaico de esa paleta queda resaltado; en cuanto los cambias, ninguno lo está.

Tarea 5 — Elegir una tipografía y un estilo de botones

Paso a paso

8. Abre Tipografía y elige un tipo de letra: Inter (el predeterminado), system-ui, Georgia, Roboto Slab, Poppins o Courier New. Para un aire clásico de cafetería, elige Georgia. Las preguntas del lienzo cambian a la nueva tipografía.

   La tipografía se aplica a todo el formulario: título, preguntas y respuestas.

   Inter, Roboto Slab y Poppins son fuentes web que anota carga para cada visitante, así que se ven igual en todos los dispositivos. Georgia, system-ui y Courier New usan las fuentes del propio sistema del visitante.

9. Abre Estilo de botones y elige la forma de los botones: Redondeado (el predeterminado), Píldora (extremos totalmente redondeados) o Cuadrado. Elige Píldora.

   Verás la nueva forma de los botones en el formulario público en la Tarea 8.

Resultado

Los colores, la tipografía y el estilo de botones están listos. El editor los guarda automáticamente.

Tarea 6 — Agregar el logo de tu empresa

Requisitos previos

• Un rol de Propietario o Administrador. Los Editores pueden ver qué logo usa un formulario, pero solo los Propietarios y Administradores pueden cambiar el logo de la empresa.
• Un archivo de imagen en formato PNG, JPG o WebP, de hasta 2 MB.

Paso a paso

10. Haz clic en tu dirección de correo, arriba a la derecha, para abrir Configuración de la cuenta, y luego en Empresa, en el menú de la izquierda.

    El nombre y el logo de la empresa están en la página Empresa.

11. En Logo de la empresa, haz clic en el botón para elegir un archivo (su texto lo pone el navegador, por ejemplo Elegir archivo o Choose File) y selecciona tu logo. Luego haz clic en Subir logo. (El Nombre de la empresa, más arriba, es lo que aparece debajo del logo en tus formularios; cámbialo allí y haz clic en Guardar si lo necesitas).

    Elige el archivo y haz clic en Subir logo.

12. anota muestra Logo actualizado. y el logo nuevo aparece en Logo de la empresa. Usa Quitar logo si alguna vez quieres quitarlo.

    El logo de la empresa queda guardado para todo el espacio de trabajo.

13. Vuelve a tu formulario y abre el panel Diseño. Baja hasta el final: el recuadro de vista previa muestra el logo y el nombre de la empresa que usará el formulario publicado, con la nota "Este campo está vacío, así que se usa el logo de tu empresa (Cuenta > Empresa)."

    El recuadro de vista previa muestra el logo y el nombre sin que tengas que publicar primero.

Otro logo para un solo formulario: para usar otro logo solo en un formulario, escribe la dirección web de la imagen en URL del logo, en el panel Diseño de ese formulario. Reemplaza el logo de la empresa en ese formulario; el nombre de la empresa sigue apareciendo debajo. Borra el campo para volver al logo de la empresa.

Resultado

Todos los formularios publicados del espacio de trabajo que no tienen su propia URL del logo muestran de inmediato el logo y el nombre de Café Aurora arriba. El logo de la empresa no necesita Actualizar; solo lo necesitan los ajustes del propio formulario.

Tarea 7 — Mostrar u ocultar el nombre y el logo de la empresa

Paso a paso

14. En el panel Diseño, desmarca Mostrar nombre y logo de la empresa para no mostrarlos en este formulario. El recuadro de vista previa cambia a "Ocultado — el formulario publicado no mostrará logo ni nombre de empresa." Es útil cuando insertas el formulario en tu propio sitio web, que ya muestra tu marca. Vuelve a marcar la casilla para mostrarlos. Está marcada por defecto. En el formulario del café, déjala marcada.

    Desmarcada: el formulario publicado no mostrará el logo ni el nombre de la empresa.

Resultado

El ajuste se aplica solo a este formulario; los demás formularios conservan el suyo.

Tarea 8 — Publicar el nuevo aspecto y revisarlo

Paso a paso

15. Haz clic en Actualizar, arriba a la derecha (Publicar si el formulario nunca se publicó). Hasta que lo hagas, las personas siguen viendo el aspecto anterior.

    Los cambios de tema se publican cuando haces clic en Actualizar.

    anota publica el cambio y abre la pestaña Publicar, donde el formulario aparece como Publicado.

16. Abre otra vez el enlace público. El formulario ahora tiene el fondo crema, la tarjeta cálida, la tipografía Georgia, y el logo y el nombre de Café Aurora arriba.

    Después: el mismo formulario con el aspecto de Café Aurora.

17. Baja hasta el final del formulario. El botón Enviar usa el color principal café y la forma Píldora.

    El color principal y el estilo de botones se ven en el botón Enviar.

Resultado

Las personas que responden ven tu tema en el formulario. El logo y el nombre de la empresa también aparecen en la pantalla de agradecimiento después de enviar.

Tarea 9 — Cambiar los textos del formulario

Los textos que leen las personas en el botón de enviar, en la pantalla de agradecimiento y en un formulario cerrado están en la pestaña Configuración, no en el panel Diseño.

Paso a paso

18. Abre la pestaña Configuración y elige Configuración del formulario. En Texto del botón de enviar, escribe el texto del botón que envía el formulario. Si lo dejas vacío, el botón dice "Enviar" (o su equivalente en el idioma de la persona). Debajo están:

    • Mensaje de formulario cerrado: se muestra en lugar del formulario cuando deja de aceptar respuestas, después de su fecha de Cerrar el formulario el o mientras está deshabilitado. Si lo dejas vacío, el formulario muestra "Este formulario ya no acepta respuestas."
    • Cerrar el formulario el: cuándo deja de aceptar respuestas, en la zona horaria de tu navegador (se indica debajo del campo). Cuando hay una fecha, aparece Quitar fecha de cierre; haz clic en ella para mantener el formulario abierto.
    • Valores de campos ocultos: qué pasa con las respuestas de los campos que oculta una regla de lógica condicional: Borrar al enviar (recomendado) (el valor por defecto) las descarta; Conservar las guarda de todos modos.

    La sección Configuración del formulario de la pestaña Configuración.

19. Elige Página de agradecimiento y escribe el Mensaje de agradecimiento que ven las personas después de enviar. Si lo dejas vacío, ven "¡Gracias! Hemos recibido tu respuesta." Para mostrar otro mensaje o llevar a las personas a otra página según sus respuestas, haz clic en Ir a Condiciones → y usa las acciones Mostrar mensaje de agradecimiento y Redirigir a URL.

    La sección Página de agradecimiento.

    Si el formulario está disponible en más de un idioma, haz clic en ES, EN o PT encima de los textos y escribe la versión de cada idioma. Un texto que dejes vacío usa el del idioma base, que se indica como Idioma base: a la derecha.

Resultado

Los textos nuevos se publican, igual que el tema, cuando haces clic en Actualizar.

Referencia de campos

Roles y permisos

Para la matriz completa de permisos, consulta Roles y permisos.

Solución de problemas

Funciones relacionadas

• El editor de formularios
• Nombre y logo de tu empresa
• Publicar y compartir
• Formularios multilingües
• Lógica condicional: reglas que pueden ocultar campos; Valores de campos ocultos decide qué pasa con sus respuestas.
• Exportar a PDF: las Plantillas de PDF usan el color principal del formulario como acento.
• Roles y permisos