# Configuración de campos

Etiquetas, marcadores de posición, valores predeterminados, reglas de validación y opciones por campo.

## Configuración de campos

Cada pregunta tiene ajustes comunes — título, obligatorio, marcador de posición — además de opciones específicas por tipo como límites de caracteres, restricciones de archivos y reglas de validación. Esta página los cubre todos.

<h2 id="accessing-settings">Acceder a la configuración de un campo</h2>
<p>
  Escribe el título y las opciones de una pregunta directamente en el lienzo. Todo lo demás vive en el menú del bloque: haz clic en el asa
  de arrastre en el borde izquierdo del bloque (o toca el indicador del bloque en pantalla táctil) y elige entre <strong>Turn into</strong>,{' '}
  <strong>Options</strong>, <strong>Validation</strong> y las acciones habituales de duplicar / mover / ocultar / eliminar.
</p>

<h2 id="common-settings">Ajustes comunes</h2>
<p>Estas opciones aparecen en todas las preguntas, sea cual sea su tipo.</p>

<p>
  La clave de un campo — el nombre con el que las automatizaciones lo prellenan y lo leen — se establece en la tabla de{' '}
  <strong>Claves</strong>, que el icono de claves de la barra de herramientas abre para todo el formulario: una clave por campo, opción,
  fila y columna. Deja una clave vacía para usar la derivada del título o la etiqueta. Editar una clave en un formulario publicado te
  advierte de que las automatizaciones que usan la clave antigua dejarán de funcionar. La fila de ayuda de cada opción también lleva su
  clave como un chip que puedes editar en el momento. Consulta <a href="/es/requests/field-keys">Claves de campo</a> para ver cómo se
  derivan las claves, se fijan al publicar y las usan quienes crean solicitudes.
</p>

> 💡 **Añadir texto de ayuda**
> <p>
>     Formstep es un editor de estilo documento — para añadir texto de ayuda o instrucciones para una pregunta, inserta un bloque de párrafo o
>     encabezado encima o debajo del campo en el lienzo. Los bloques de contenido entre preguntas son visibles para los encuestados y
>     funcionan igual que cualquier otro bloque.
>   </p>

> ℹ️ **Visibilidad del título y datos**
> <p>
>     Ocultar un título no elimina el campo de las respuestas. Sigue apareciendo como encabezado de columna en las exportaciones, así que dale
>     a los campos con título oculto un nombre interno claro.
>   </p>

<h2 id="text-options">Opciones de texto</h2>
<p>
  <strong>Min length</strong> y <strong>Max length</strong> viven bajo <strong>Validation</strong> en el menú del bloque y se aplican a{' '}
  <strong>Text Input</strong>, <strong>Text Area</strong> y <strong>Website URL</strong>. Text Area es la variante multilínea de Text Input
  — cambia entre ellos con <strong>Turn into</strong>.
</p>

<h2 id="number-options">Opciones de número</h2>
<p>
  <strong>Minimum</strong> y <strong>Maximum</strong> viven bajo <strong>Validation</strong> y se aplican a <strong>Number</strong>,{' '}
  <strong>Star Rating</strong> y una escala lineal. <strong>Number</strong> también tiene <strong>Paso</strong>: la respuesta debe ser un
  múltiplo de este, de modo que un paso de 1 solo acepta números enteros y 0.5 acepta las mitades. Déjalo vacío para aceptar cualquier
  número.
</p>

<h2 id="choice-options">Opciones de selección</h2>
<p>
  Estos ajustes se aplican a los campos de selección: <strong>Radio Buttons</strong>, <strong>Checkboxes</strong>, <strong>Ranking</strong>,
  <strong>Dropdown</strong>, <strong>Single Picture Choice</strong> y <strong>Multi Picture Choice</strong>.
</p>

<p>
  Las opciones individuales también se pueden ocultar o preseleccionar desde el lienzo: con el cursor en una opción, pulsa ⌘ + H (Ctrl + H)
  para ocultarla, o ⌘ + D (Ctrl + D) para seleccionarla por defecto.
</p>

<h2 id="rating-scale-options">Opciones de valoración y escala</h2>

<h3 id="rating">Rating</h3>
<p>
  El campo <strong>Star Rating</strong> muestra 5 estrellas de forma predeterminada. Usa <strong>Increase max stars</strong> y{' '}
  <strong>Decrease max stars</strong> en el menú del bloque para configurar entre 1 y 10. Conviértelo en una escala lineal desde el mismo
  menú; el máximo se conserva y las entradas del menú pasan a ser <strong>Increase / Decrease scale max</strong>.
</p>

<h3 id="matrix">Matrix</h3>
<p>
  El campo <strong>Matrix / Grid</strong> crea una cuadrícula de opciones. Define <strong>Rows</strong> (las subpreguntas) y{' '}
  <strong>Columns</strong> (las respuestas). El encuestado elige una columna por fila. Bajo <strong>Validation</strong> puedes{' '}
  <strong>Require all rows</strong> o establecer <strong>Min answered rows</strong>.
</p>

<h2 id="file-payment-options">Opciones de carga de archivos y pago</h2>

<h3 id="file-upload">Carga de archivos</h3>
<p>
  <strong>File Upload</strong> admite <strong>Min files</strong>, <strong>Max files</strong>, <strong>Max size (MB)</strong> y{' '}
  <strong>Accepted types</strong> bajo <strong>Validation</strong>. Consulta{' '}
  <a href="/es/building-forms/file-uploads-signatures">Carga de archivos y firmas</a> para ver los detalles.
</p>

<h3 id="payment">Pago</h3>
<p>
  El campo <strong>Payment</strong> recopila un cargo único. Establece el <strong>Amount</strong> y la <strong>Currency</strong> en el
  bloque — USD, EUR, GBP, JPY, CAD, AUD, CHF, SEK, NOK, DKK, NZD, SGD, HKD, AED o TRY. Cada divisa tiene un cargo mínimo (0.50 para USD y
  EUR), y la publicación se bloquea hasta que Stripe esté conectado y el importe sea válido. Consulta{' '}
  <a href="/es/building-forms/payment-collection">Cobro de pagos</a>.
</p>

<h2 id="default-values">Valores predeterminados de otros campos</h2>
<p>
  El valor predeterminado de un campo puede provenir de otro campo del mismo formulario en lugar de texto fijo — un campo oculto (por
  ejemplo, un parámetro de URL) o un campo calculado. Funciona en los seis campos que tienen una ranura de valor predeterminado:{' '}
  <strong>Text Input</strong>, <strong>Text Area</strong>, <strong>Email</strong>, <strong>Website URL</strong>,{' '}
  <strong>Phone Number</strong> y <strong>Number</strong>.
</p>
<p>Para configurarlo:</p>
<ol>
  <li>Haz clic en el campo de entrada.</li>
  <li>
    Escribe <kbd>@</kbd> como primer carácter. Aparece un menú con tus campos ocultos y calculados; sigue escribiendo para filtrar.
  </li>
  <li>
    Elige un campo. El campo de entrada cambia por sí solo al modo <strong>valor predeterminado</strong> y lo muestra como un chip, por
    ejemplo <strong>@recipient</strong>.
  </li>
</ol>
<p>
  Para eliminar la referencia, haz clic en la <strong>×</strong> del chip, pulsa <kbd>Backspace</kbd>, o pulsa <kbd>⌘</kbd> + <kbd>D</kbd>{' '}
  de nuevo. Si en cambio quieres un <kbd>@</kbd> literal — un marcador de posición como <code>@yourhandle</code> —, pulsa <kbd>Esc</kbd>{' '}
  para cerrar el menú y sigue escribiendo; el campo de entrada permanece en el modo en que estaba. Un chip se vuelve rojo cuando su campo ha
  sido eliminado; volver a añadir un campo con el mismo nombre lo reconecta.
</p>
<p>
  El chip sustituye el texto del marcador de posición del campo. El <kbd>@</kbd> solo abre el menú como primer carácter, así que un valor
  predeterminado como <code>jeff@example.com</code> se mantiene como texto normal.
</p>
<p>
  Cuando alguien abre el formulario, el campo se prellena con el valor referenciado — por ejemplo, un enlace que termina en{' '}
  <code>?recipient=Jeff</code> rellena un Text Input que hace referencia al campo oculto <code>recipient</code> con "Jeff". Cómo se
  comporta:
</p>
<ul>
  <li>Los encuestados pueden cambiar o borrar el valor. Su propia respuesta nunca se sobrescribe.</li>
  <li>
    Un campo calculado rellena el campo de entrada con el primer valor que tiene — normalmente su valor inicial. Los cambios posteriores
    provocados por reglas de lógica no sustituyen lo que ya hay en el campo de entrada.
  </li>
  <li>
    Si el campo referenciado no tiene valor, el campo de entrada empieza vacío. Un campo Number también permanece vacío cuando el valor no
    es un número (por ejemplo <code>?age=abc</code>).
  </li>
  <li>El envío almacena ambos valores: el campo oculto o calculado, y la respuesta final de la pregunta.</li>
</ul>
<p>
  Consulta <a href="/es/building-forms/hidden-fields">Campos ocultos</a> y{' '}
  <a href="/es/building-forms/calculated-fields">Campos calculados</a>.
</p>

<h2 id="examples">Ejemplos</h2>

<ul>
  <li>
    <strong>Formulario de contacto</strong> — campo Email marcado como obligatorio, Text Area para el mensaje con el marcador de posición
    "Cuéntanos cómo podemos ayudarte…", campo Phone Number marcado como opcional con un párrafo debajo: "Solo te llamaremos si necesitamos
    aclarar tu solicitud"
  </li>
  <li>
    <strong>Encuesta NPS</strong> — Star Rating configurado en 10 estrellas, seguido de un Text Area (oculto por defecto, mostrado mediante
    lógica cuando la puntuación es 6 o inferior) con el marcador de posición "¿Qué podríamos mejorar?"
  </li>
  <li>
    <strong>Pedido de producto</strong> — campo Number para la cantidad con mínimo 1 / máximo 100, Checkboxes para los complementos y un
    campo de pago cuyo importe proviene de un campo calculado
  </li>
  <li>
    <strong>RSVP de evento</strong> — Radio Buttons para la asistencia, Checkboxes para los requisitos dietéticos con orden aleatorio para
    evitar sesgos, Date Picker con una fecha más temprana configurada
  </li>
</ul>

<h2 id="validation-rules">Reglas de validación</h2>

<p>
  La validación se ejecuta mientras el encuestado rellena tu formulario. Formstep resalta las entradas incorrectas en línea y rechaza el
  envío hasta que todo sea correcto.
</p>

<h3 id="built-in-validation">Integrada por tipo de campo</h3>

<p>
  Cada tipo de pregunta comprueba su propia forma, sin nada que configurar. <strong>Email</strong> comprueba el formato de la dirección.{' '}
  <strong>Website URL</strong> acepta solo enlaces http y https y rechaza un host que no sea un dominio real. <strong>Phone Number</strong>{' '}
  verifica el número contra el país seleccionado. <strong>Number</strong>, <strong>Date Picker</strong> y <strong>Time Picker</strong>{' '}
  rechazan cualquier cosa que no sea un número, una fecha o una hora.
</p>

<p>
  En Business, una pregunta de email puede además requerir verificación — el encuestado confirma esa dirección con un código de un solo uso
  antes de que el formulario acepte el envío. El interruptor está bajo <strong>Validation → Verification</strong>. Consulta{' '}
  <a href="/es/building-forms/email-verification">verificación de email del encuestado</a>.
</p>

<h3 id="optional-rules">Reglas opcionales por campo</h3>

<p>
  Abre el menú del bloque y elige <strong>Validation</strong>. Las reglas disponibles dependen del tipo de pregunta; estas son las etiquetas
  exactas del menú.
</p>

<p>
  Radio Buttons, Dropdown, Toggle Switch, Signature, Ranking, Payment y Schedule appointment no tienen reglas de validación — obligatorio o
  no es la única opción. Dentro de un grupo repetible, la verificación de email no se ofrece.
</p>

<h3 id="custom-patterns">Ejemplos de patrones personalizados</h3>

<ul>
  <li>
    <strong>Código postal de EE. UU.</strong> — <code>{`^\\d{5}(-\\d{4})?$`}</code>
  </li>
  <li>
    <strong>Código de color hexadecimal</strong> — <code>{`^#[0-9a-fA-F]{6}$`}</code>
  </li>
  <li>
    <strong>Slug compatible con URL</strong> — <code>{`^[a-z0-9-]+$`}</code>
  </li>
</ul>

<p>
  Un valor que no coincide muestra un error genérico "Invalid value", así que añade un párrafo cerca del campo describiendo el formato que
  esperas. Un regex no válido se ignora y nunca bloquea el envío. Las reglas de longitud cuentan los caracteres después de recortar los
  espacios al inicio y al final.
</p>

<h3 id="how-validation-runs">Cómo funciona la validación</h3>

<p>
  Formstep comprueba la validación en tiempo real en el navegador mientras el encuestado escribe. Los errores de formato y de reglas
  aparecen de inmediato con un mensaje en línea; un error "This field is required" aparece una vez que el campo ha sido tocado, o cuando el
  encuestado intenta enviar.
</p>

> ⚠️ **No valides datos sensibles solo con regex**
> <p>
>     Para cosas como tarjetas de crédito o identificaciones gubernamentales, usa el tipo de campo o la integración adecuados. El regex
>     detecta la forma, no la validez.
>   </p>

<h2 id="next-steps">Próximos pasos</h2>
<div class="not-prose grid gap-3 sm:grid-cols-2">
  - [Inserción de respuestas](/es/building-forms/answer-piping) — Usa menciones @ para referenciar respuestas en cualquier parte de tu formulario.
  - [Lógica condicional](/es/building-forms/conditional-logic) — Muestra u oculta campos según las respuestas
  - [Campos ocultos](/es/building-forms/hidden-fields) — Captura parámetros de URL de forma invisible
  - [Campos calculados](/es/building-forms/calculated-fields) — Calcula puntuaciones, totales y valores dinámicos
</div>
