# Campos ocultos

Pasa datos invisibles a los formularios mediante parámetros de URL.

## Campos ocultos

Adjunta metadatos invisibles a cada respuesta — fuentes de tráfico, IDs de CRM, códigos de referido o cualquier contexto que ya conozcas sobre el encuestado. Los campos ocultos capturan datos mediante parámetros de URL sin mostrar nada en el formulario.

<h2 id="why">¿Por qué usar campos ocultos?</h2>

<p>
  Los formularios suelen necesitar contexto que el encuestado no puede (o no debería) proporcionar por sí mismo. Los campos ocultos
  resuelven esto permitiéndote adjuntar metadatos a cada respuesta a través de la URL. Esto es útil cuando ya sabes algo sobre el encuestado
  antes de que abra el formulario — de dónde viene, quién lo refirió o a qué registro pertenece en tu sistema.
</p>

<ul>
  <li>
    <strong>Rastrea fuentes de tráfico</strong> — sabe si una respuesta provino de una campaña de correo, una publicación en redes sociales
    o tu sitio web
  </li>
  <li>
    <strong>Conecta con tu CRM</strong> — pasa un ID de contacto, de trato o de cuenta para que la respuesta se vincule al registro correcto
  </li>
  <li>
    <strong>Personaliza el seguimiento</strong> — captura un nombre o correo que ya tienes, y úsalo en lógica condicional o notificaciones
    por correo
  </li>
  <li>
    <strong>Flujos de trabajo con múltiples formularios</strong> — pasa datos de un formulario al siguiente para que los encuestados no se
    repitan
  </li>
  <li>
    <strong>Pruebas A/B</strong> — etiqueta cada respuesta con la variante o experimento que vio el encuestado
  </li>
</ul>

<h2 id="adding">Agregar un campo oculto</h2>

<p>
  Escribe <code>/</code> en una línea vacía y elige <strong>Campo oculto</strong> en la categoría Diseño. Solo funciona en el nivel superior
  del formulario, no dentro de una columna ni de un grupo repetible. Cada campo oculto tiene dos configuraciones:
</p>

<ul>
  <li>
    <strong>Tipo de campo</strong> — almacena un valor <strong>numérico</strong> o de <strong>texto</strong> (texto de forma predeterminada)
  </li>
  <li>
    <strong>Nombre del parámetro</strong> — el parámetro de URL que llena este campo (p. ej. <code>utm_source</code>,{' '}
    <code>contact_id</code>). También es la clave de este campo: es el nombre que se envía y bajo el que llega la respuesta. Consulta{' '}
    <a href="/es/requests/field-keys">Claves de campo</a>
  </li>
</ul>

<h2 id="url-parameters">Prellenado con parámetros de URL</h2>

<p>
  Un nombre de parámetro debe ser seguro para URLs tal como se escribe: letras, dígitos y <code>- _ . ~ ! * ' ( )</code> son seguros.
  Escribe los espacios y otros caracteres especiales codificados en porcentaje, por ejemplo <code>recipient%20name</code>. Un nombre de
  parámetro vacío, no válido o duplicado es un error de publicación — el indicador de incidencias en la barra de herramientas lo marca y la
  publicación se detiene hasta que lo corriges.
</p>

<p>
  Cuando un encuestado abre tu formulario con un parámetro coincidente en la URL, el campo oculto captura ese valor automáticamente. Por
  ejemplo, si el nombre del parámetro de tu campo oculto es <strong>utm_source</strong>, la URL a continuación establece el campo en{' '}
  <strong>newsletter</strong>.
</p>

```
https://form.formstep.io/abc123?utm_source=newsletter
```

<p>Puedes pasar múltiples campos ocultos a la vez:</p>

```
https://form.formstep.io/abc123?utm_source=newsletter&utm_medium=email&contact_id=12345
```

<ul>
  <li>Los valores se leen una sola vez, cuando se abre el formulario.</li>
  <li>
    Un parámetro vacío (<code>?utm_source=</code>) deja el campo vacío.
  </li>
  <li>
    Un campo oculto numérico ignora los valores que no son números, así que <code>?score=abc</code> lo deja vacío.
  </li>
  <li>
    Los enlaces de <a href="/es/requests/overview">solicitud</a> ignoran los parámetros de URL. Ahí, los campos ocultos obtienen sus valores
    del <a href="/es/requests/creating-requests#context">contexto</a> de la solicitud.
  </li>
</ul>

<p>
  En un enlace de compartir, para mostrar un valor de la URL en un campo visible que el encuestado pueda editar — por ejemplo, prerrellenar
  su nombre — convierte el campo oculto en el valor predeterminado del campo escribiendo <kbd>@</kbd>. Consulta{' '}
  <a href="/es/building-forms/field-configuration#default-values">Valores predeterminados de otros campos</a>.
</p>

<h2 id="requests-prefill-directly">Las solicitudes no necesitan un campo oculto para precompletar</h2>

<p>
  La técnica de campo oculto más <kbd>@</kbd> de arriba existe porque un enlace de compartir solo tiene una vía de entrada: la URL.
  Cualquiera puede editar una URL, así que un enlace de compartir solo puede transportar un valor mediante un parámetro, y un campo oculto
  es lo que lo recibe.
</p>

<p>
  Una <a href="/es/requests/overview">solicitud</a> tiene una segunda vía de entrada, privada. El llamante establece las respuestas al crear
  la solicitud, del lado del servidor, así que una solicitud puede precompletar una <strong>pregunta visible directamente</strong> — sin
  campo oculto ni valor predeterminado con <kbd>@</kbd> de por medio. El destinatario abre el formulario con la respuesta ya rellenada.
</p>

<ul>
  <li>
    <strong>
      <code>prefill</code>
    </strong>{' '}
    — respuestas iniciales para <strong>preguntas visibles</strong>, dirigidas por clave de campo. El destinatario las ve y puede
    cambiarlas.
  </li>
  <li>
    <strong>
      <code>readonly</code>
    </strong>{' '}
    — el subconjunto de esas claves precompletadas que el destinatario puede leer pero no editar.
  </li>
  <li>
    <strong>
      <code>context</code>
    </strong>{' '}
    — valores para <strong>campos ocultos</strong>, que el destinatario nunca ve.
  </li>
</ul>

<p>
  La separación se aplica de forma estricta. Enviar la clave de una pregunta visible en <code>context</code> se rechaza, con un error que te
  indica enviarla en <code>prefill</code>, y lo contrario también se rechaza. Así que añade un campo oculto cuando quieras{' '}
  <strong>transportar datos que no quieres mostrar</strong>, no solo para precompletar algo.
</p>

> ⚠️ **Un enlace de solicitud ignora los parámetros de URL por completo**
> <p>
>     En una solicitud, los valores <code>?param=</code> no se leen en absoluto — no llenan ningún campo oculto ni sobrescriben nada de lo que
>     estableció el llamante. Esto es intencionado: el destinatario tiene el enlace, así que respetar los parámetros de URL le permitiría
>     reescribir el propio contexto del llamante. El contexto de la solicitud siempre gana, porque en una solicitud es la única fuente.
>   </p>

<h2 id="common-setups">Configuraciones comunes</h2>

<ul>
  <li>
    <strong>Seguimiento UTM</strong> — crea campos ocultos llamados <strong>utm_source</strong>, <strong>utm_medium</strong> y{' '}
    <strong>utm_campaign</strong>. El formulario los captura de la URL automáticamente, y cada valor se guarda como columna en las
    respuestas. El gráfico de Fuentes de tráfico en Analytics lee utm_source y utm_medium desde la URL por su cuenta, con o sin campos
    ocultos. Establece valores predeterminados por enlace en el{' '}
    <a href="/es/sharing-publishing/sharing-embedding#query-parameters">diálogo Compartir</a>.
  </li>
  <li>
    <strong>Integración con CRM</strong> — pasa un ID de contacto o trato desde herramientas como HubSpot, ActiveCampaign o Mailchimp.
    Cuando las respuestas llegan a tus integraciones, el ID lo conecta todo.
  </li>
  <li>
    <strong>Atribución de referidos</strong> — cada socio obtiene un enlace único con su código en la URL. Puedes ver exactamente quién
    generó cada respuesta.
  </li>
  <li>
    <strong>Contexto prellenado</strong> — pasa el nombre de un cliente o el nivel de su plan a un formulario de soporte. Úsalo en lógica
    condicional para mostrar preguntas distintas, o canalízalo a la página de agradecimiento.
  </li>
  <li>
    <strong>Respuestas prellenadas</strong> — envía <code>?email=jane@example.com</code> desde tu herramienta de correo y convierte ese
    campo oculto en el valor predeterminado de la pregunta de Email del formulario. El encuestado ve su dirección ya rellenada y solo la
    corrige si es incorrecta.
  </li>
</ul>

> 💡 **Funciona con cualquier herramienta de enlaces**
> <p>
>     Las plataformas de correo (Mailchimp, ActiveCampaign, HubSpot), las plataformas publicitarias (Google Ads, Meta) y los acortadores de
>     enlaces te permiten añadir parámetros de URL. Los campos ocultos los capturan sin ninguna configuración adicional en el formulario.
>   </p>

<h2 id="viewing-data">Ver los datos de campos ocultos</h2>

<p>
  En la tabla de Respuestas, los campos ocultos aparecen como sus propias columnas — Formstep los marca con un icono de ojo tachado para que
  puedas distinguirlos de las preguntas visibles. También aparecen en exportaciones, integraciones (Google Sheets, webhooks, etc.) y en el
  panel de detalle de la respuesta.
</p>

> ℹ️ **UTM en analytics vs. respuestas**
> <p>
>     Formstep registra utm_source, utm_medium y utm_campaign con cada visita en analytics, y el gráfico de Fuentes de tráfico agrupa las
>     respuestas por fuente y medio, pero no los guarda en cada respuesta. Para ver el valor de un parámetro por respuesta, añade un campo
>     oculto con ese nombre (por ejemplo utm_source). Así aparece tanto en la tabla de respuestas como en analytics.
>   </p>

<h2 id="with-logic">Usar campos ocultos con lógica</h2>

<p>
  Los campos ocultos funcionan como <strong>fuentes de condición</strong> en{' '}
  <a href="/es/building-forms/conditional-logic">lógica condicional</a>. Una regla de lógica puede leer el valor de un campo oculto y
  ramificar — mostrando preguntas distintas, saltando a una página o actualizando un{' '}
  <a href="/es/building-forms/calculated-fields">campo calculado</a>.
</p>

<p>
  Por ejemplo: pasa <code>?plan=enterprise</code> mediante la URL. Una regla de lógica verifica si el campo oculto "plan" es igual a
  "enterprise" y salta a una página dedicada con preguntas específicas para empresas.
</p>

<h2 id="next-steps">Próximos pasos</h2>
<div class="not-prose grid gap-3 sm:grid-cols-2">
  - [Campos calculados](/es/building-forms/calculated-fields) — Calcula puntuaciones, totales y texto dinámico a partir de las respuestas
  - [Inserción de respuestas](/es/building-forms/answer-piping) — Haz referencia a cualquier respuesta en el formulario con menciones @
  - [Página de agradecimiento personalizada](/es/building-forms/custom-thank-you) — Muestra valores calculados y contenido personalizado tras el envío
  - [Bandeja de respuestas](/es/submissions-analytics/submission-inbox) — Consulta los valores de campos ocultos junto con las respuestas regulares
</div>