> 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/dforms/design/logos-layout-transitions.md).

# Logos, distribución y transiciones

Añade un logo a tu formulario de dForms (logo del formulario en cada pregunta, logo de portada en la portada), define tamaño y posición del logo, el tamaño de la insignia de atribución, alineación de

La tarjeta **Distribución** del panel de Diseño coloca tu marca en el formulario y decide dónde va cada cosa: qué logo se muestra dónde, de qué tamaño, qué tan grande es la insignia de atribución, si las preguntas van alineadas a la izquierda o centradas, qué tan ancho es el contenido y cómo pasa el formulario de un paso al siguiente. La tarjeta **Título del formulario**, la tercera desde arriba, debajo de **Idioma** y **Texto de los botones**, define el nombre público que ve quien responde.

***

**Paso 1:** Abre tu formulario, abre la pestaña **Diseño** y baja hasta la tarjeta **Distribución** (la que está debajo de **Forma y controles**).

***

**Paso 2:** Pega un enlace público de imagen en **URL del logo del formulario**. Este logo se muestra arriba de cada pantalla de pregunta. Si usas portada, pega el logo para ella en **URL del logo de la portada**; ese se muestra solo en la portada. Deja cualquiera de los campos vacío para no poner logo en ese sitio.

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2Fgit-blob-defb6bcf17cabfc3617ede35630ba7ffab9d1d24%2Fforms-logos-layout-transitions-01-logo-urls.png?alt=media" alt="La tarjeta Distribución con los campos URL del logo del formulario y URL del logo de la portada llenos, junto a la vista previa en vivo"><figcaption><p>Dos logos, dos campos. El logo del formulario va en cada pantalla de pregunta; el de la portada, solo en la portada.</p></figcaption></figure>

| Campo                           | Dónde se muestra                    | Notas                                                                                                           |
| ------------------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------- |
| **URL del logo del formulario** | Arriba de cada pantalla de pregunta | Déjalo vacío para no poner logo. Cuando no hay logo de formulario, en su lugar se muestra el título como texto. |
| **URL del logo de la portada**  | Solo en la portada                  | El campo se oculta mientras la portada está desactivada. Déjalo vacío para no poner logo ahí.                   |

> **💡 Tip:** Usa un enlace directo a un PNG, SVG o JPG que empiece por `https://` y sea alcanzable sin login. Los enlaces con otros protocolos se rechazan con **Este protocolo de URL no está permitido para imágenes.** Si la imagen no se puede cargar, las pantallas de pregunta recurren al texto del título.

> **⚠️ Nota:** La vista previa del editor puede mostrar el título del formulario como texto donde va el logo. Después de **Publicar**, usa **Abrir formulario** para ver la imagen en el formulario en vivo.

***

**Paso 3:** Define el resto de controles en la misma tarjeta. Cada uno es un conmutador; la vista previa se actualiza según haces clic.

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2Fgit-blob-03ba7f0f5c488a1dfd7d0c63aa7c691540aa66ab%2Fforms-logos-layout-transitions-02-layout-toggles.png?alt=media" alt="Los conmutadores de la tarjeta Distribución: Tamaño del logo Mediano, Posición del logo Centro, Insignia de atribución Mediano, Alineación de la pregunta Centro, Ancho del contenido Angosto, Transición entre pasos Deslizar"><figcaption><p>Todos los conmutadores de la tarjeta. <strong>Insignia de atribución</strong> está entre <strong>Posición del logo</strong> y <strong>Alineación de la pregunta</strong>.</p></figcaption></figure>

| Ajuste                        | Opciones                                  | Qué hace                                                                                                                                                                                                                |
| ----------------------------- | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Tamaño del logo**           | **Pequeño**, **Mediano**, **Grande**      | Altura del logo del formulario en las pantallas de pregunta.                                                                                                                                                            |
| **Posición del logo**         | **Izquierda**, **Centro**                 | Dónde se coloca el logo del formulario en la barra superior de cada pantalla de pregunta.                                                                                                                               |
| **Insignia de atribución**    | **Pequeño**, **Mediano**                  | Tamaño de la píldora *Hecho con dForms* debajo del formulario. **Mediano** es el valor por defecto y el tamaño que conservan todos los formularios existentes. **Pequeño** achica la píldora y el espacio que la rodea. |
| **Alineación de la pregunta** | **Izquierda**, **Centro**                 | Si el texto de la pregunta, el texto de ayuda y los campos van alineados a la izquierda o centrados.                                                                                                                    |
| **Ancho del contenido**       | **Angosto**, **Amplio**                   | El ancho máximo de la tarjeta de pregunta. **Amplio** da más espacio a etiquetas de opción largas y a párrafos.                                                                                                         |
| **Transición entre pasos**    | **Deslizar**, **Desvanecer**, **Ninguna** | La animación entre pantallas: deslizar de lado, desvanecer o cambiar al instante.                                                                                                                                       |

> **⚠️ Nota:** En un formulario de **Una página** el logo va en un bloque destacado arriba, no en una barra superior, así que **Tamaño del logo**, **Posición del logo**, **Alineación de la pregunta** y **Transición entre pasos** no aplican y no se muestran. **Insignia de atribución** y **Ancho del contenido** sí siguen aplicando.

La insignia de atribución es la píldora *Hecho con dForms* (*Made with dForms* en un formulario en inglés). Enlaza al sitio web de dForms en una pestaña nueva, y se muestra en la portada y debajo de las pantallas de pregunta, o una sola vez al pie de un formulario de **Una página**. Las pantallas final y de revelación, y la pantalla de reserva que sigue a un resultado, no la llevan. Puedes achicarla, no quitarla. El lienzo de preguntas no la dibuja, así que revisa su tamaño en la vista previa de la derecha.

***

**Paso 4:** Sube hasta la tarjeta **Título del formulario**, la tercera del panel, y llénala. Es lo que ven los visitantes: la pestaña del navegador, las vistas previas al compartir y el encabezado de la portada. Déjalo vacío para usar el nombre interno del formulario (el de la barra superior del editor).

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2Fgit-blob-ff7e9c7d963a5b9ced1a5b62dcccddd0328d72da%2Fforms-logos-layout-transitions-03-form-title.png?alt=media" alt="La tarjeta Título del formulario con el título público puesto en Agenda tu demo"><figcaption><p>El título público. El nombre interno de la barra superior no cambia.</p></figcaption></figure>

***

**Paso 5:** Haz clic en **Publicar** y abre el formulario en vivo. Con la portada activada, el logo de portada aparece sobre el titular; en las preguntas, el logo del formulario reemplaza al texto del título.

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2Fgit-blob-d3b7a456c49f73b52bd221bac76fc7dafe10e290%2Fforms-logos-layout-transitions-04-public-cover-logo.png?alt=media" alt="La portada publicada con el logo de portada sobre el titular Agenda tu demo y un botón de inicio"><figcaption><p>La portada muestra la imagen de <strong>URL del logo de la portada</strong> y el título del formulario como titular.</p></figcaption></figure>

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2Fgit-blob-f8143dc338f1bf64d7441febb3a8edaae7e1aa4b%2Fforms-logos-layout-transitions-05-public-question-logo.png?alt=media" alt="La primera pregunta del formulario publicado con un logo grande arriba a la izquierda, la pregunta alineada a la izquierda y una tarjeta amplia"><figcaption><p>Una pantalla de pregunta: logo <strong>Grande</strong>, posición <strong>Izquierda</strong>, alineación <strong>Izquierda</strong>, contenido <strong>Amplio</strong>.</p></figcaption></figure>

## Qué sigue

* [Portada y banner](/dapta-docs-es/dforms/design/cover-screen-and-banner.md): activa la portada y escribe su titular, subtítulo y botón de inicio.
* [Idioma y texto de los botones](/dapta-docs-es/dforms/design/language-and-button-text.md): las dos tarjetas que van antes de **Título del formulario**.
* [Marquesina de logos de clientes](/dapta-docs-es/dforms/design/client-logos.md): añade una tira de «confían en nosotros» bajo la portada.
* [Tarjeta al compartir](/dapta-docs-es/dforms/design/share-card.md): cómo acaban el título y el logo en la vista previa social.
* [Kit de marca (para todo el workspace)](/dapta-docs-es/dforms/design/brand-kit.md): define un solo logo para cada formulario nuevo del workspace.


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.dapta.ai/dapta-docs-es/dforms/design/logos-layout-transitions.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.