> For the complete documentation index, see [llms.txt](https://docs.dapta.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dapta.ai/dapta-docs-es/dapta-forms/design.md).

# Diseño y marca

Haz que un formulario de Dapta se parezca a tu marca desde el panel Diseño, dentro de Construir: temas, colores, tipografías, logos, portada y tarjeta al compartir, con una vista previa en vivo mientr

Diseño es un modo dentro de la pestaña **Construir**. Haz clic en **Diseño** en la barra de herramientas y el lienzo se reemplaza por dos columnas: todos los ajustes visuales a la izquierda, y una vista previa en vivo del formulario real a la derecha. Cada cambio aparece en la vista previa de inmediato y se guarda como borrador; haz clic en **Publicar** cuando quieras que lo vea quien responde.

***

**Paso 1:** Abre tu formulario, quédate en la pestaña **Construir** y haz clic en **Diseño** en la barra de herramientas (junto a **Añadir pregunta**). Haz clic otra vez en **Diseño** para volver al lienzo de preguntas.

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2Fgit-blob-09893e936cbcf918aa110a92df38ff6e46957b1f%2Fforms-readme-design-01-design-mode.png?alt=media" alt="El editor en modo Diseño: el botón Diseño de la barra resaltado, la columna de ajustes a la izquierda y la vista previa del dispositivo a la derecha"><figcaption><p>Modo Diseño. Izquierda: los ajustes, agrupados en tarjetas. Derecha: la vista previa en vivo de tu formulario.</p></figcaption></figure>

La columna de la izquierda está organizada en tarjetas, de arriba abajo: **Título del formulario**, **Diseño** (Diapositivas o Una página), **Tema**, **Colores**, **Tipografía**, **Forma y controles**, **Distribución** (logos, alineación, ancho, transición), **Tarjeta al compartir**, **Portada**, **Logos de clientes**, un enlace a las **Respuestas parciales** (que se configuran en la lista de preguntas de la pestaña Construir) y **Cuando el formulario termina**.

***

**Paso 2:** Usa los controles de vista previa que están arriba de la columna derecha. **Móvil**, **Tablet** y **Escritorio** cambian el marco del dispositivo (el tamaño y el zoom se muestran al lado, por ejemplo 1280 × 800 · 45%). Las flechas recorren las pantallas (**Pantalla anterior**, **Pantalla siguiente**), y la flecha circular reinicia la vista previa. La barra de dirección muestra el enlace público, con botones para copiarlo y para abrir el formulario en vivo.

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2Fgit-blob-75b2dfd884c787688b5e40da43652279bd93be3a%2Fforms-readme-design-02-preview-devices.png?alt=media" alt="La columna de vista previa con las flechas de paso y el selector Móvil, Tablet y Escritorio resaltados"><figcaption><p>La vista previa ejecuta el renderizador real del formulario. Nada de lo que escribas ahí se envía.</p></figcaption></figure>

> **💡 Tip:** La vista previa muestra tu borrador, incluidas las ediciones sin publicar. Quien responde sigue viendo la última versión publicada hasta que haces clic en **Publicar**.

> **⚠️ Nota:** Un **Kit de marca** del workspace puede prellenar el logo, los colores, la tipografía y los controles de cada formulario nuevo. Lo que cambies aquí aplica solo a este formulario.

## Páginas de esta sección

* [Temas, colores y fondo](/dapta-docs-es/dapta-forms/design/themes-colors-background.md): elige uno de los nueve temas, define Fondo, Texto y Color de marca con comprobación de contraste, y escoge un fondo Plano, Degradado, Resplandor o Imagen.
* [Tipografía y controles](/dapta-docs-es/dapta-forms/design/typography-and-controls.md): elige una tipografía (o aloja la tuya), y define esquinas, estilo de botón, botón de ancho completo y el indicador de progreso.
* [Logos, distribución y transiciones](/dapta-docs-es/dapta-forms/design/logos-layout-transitions.md): logo del formulario y logo de la portada, tamaño y posición del logo, alineación de la pregunta, ancho del contenido, transición entre pasos y el título público del formulario.
* [Portada y banner](/dapta-docs-es/dapta-forms/design/cover-screen-and-banner.md): la pantalla de entrada que se muestra antes de la primera pregunta, con banner, titular, subtitular, botón de inicio e insignia de confianza.
* [Marquesina de logos de clientes](/dapta-docs-es/dapta-forms/design/client-logos.md): una tira de logos de «confían en nosotros» en la portada, en la pantalla de revelación o en ambas.
* [Tarjeta al compartir](/dapta-docs-es/dapta-forms/design/share-card.md): la imagen que se ve cuando el enlace se comparte en chat o en redes, generada a partir de tu diseño o puesta por ti.
* [Kit de marca (para todo el workspace)](/dapta-docs-es/dapta-forms/design/brand-kit.md): la apariencia del workspace con la que arrancan los formularios nuevos, y cómo aplicarla a los que ya existen.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.dapta.ai/dapta-docs-es/dapta-forms/design.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.