Inputs y formularios en el Flow & Paywall Builder

Usa inputs para recopilar datos escritos de los usuarios, como un nombre, una dirección de correo electrónico o una fecha de nacimiento. Almacena las respuestas y referencíalas en otras partes del flow, como dirigirte al usuario por su nombre en una pantalla posterior.

Añadir un campo de entrada

Add input
  1. Haz clic en + en la parte superior izquierda.
  2. Selecciona Input.
  3. Elige el tipo de campo de entrada:
    • Text: Cualquier texto corto.
    • Email: Direcciones de correo electrónico, con validación de formato opcional.
    • Password: Entrada de texto seguro, con requisitos configurables.
    • Number: Valores numéricos, con formato configurable.
    • Phone number: Números de teléfono.
    • Date: Abre un selector de fecha.
    • Time: Abre un selector de hora.
    • Date and time: Abre un selector combinado.

Configurar un campo de entrada

Para todos los tipos de campos de entrada, puedes configurar lo siguiente en la pestaña Design:

  • Type: Cambia el tipo de entrada (Text, Email, Password, Number, Phone number, Date, Time o Date and time).
  • Element ID: Identificador para referenciar el valor del campo en otras partes del flow. Consulta Usar valores de entrada más abajo.
  • Placeholder: Texto de ayuda que se muestra dentro del campo vacío.
  • State: Define el aspecto del campo en distintas situaciones. Alterna entre Default, Active, Invalid y Disabled y aplica diferentes estilos visuales a cada uno.
  • Typography: Estilo del texto del valor mostrado en el campo.
  • Leading and trailing icons: Añade iconos dentro del campo de entrada.
Añadir entrada

Algunos ajustes son específicos de determinados tipos de entrada:

AjusteTipos de entrada
Botón para borrarTexto, Correo electrónico
Validar formato de correoCorreo electrónico
Icono de mostrar contraseñaContraseña
Editar requisitos de contraseñaContraseña
Formato de númeroNúmero
Formato de fecha/horaFecha, Hora, Fecha y hora
Fecha mínima y máximaFecha, Fecha y hora
Add input
Add input

Usar valores de entrada

Tip

Tu app también puede recibir valores de entrada. Para recopilarlos, gestiona el callback de análisis del SDK. Cada vez que el usuario sale de un campo de entrada, el callback entrega su valor y tu app puede procesarlo internamente.

Cada campo de entrada está disponible automáticamente como variable; no necesitas ninguna configuración ni una acción On Submit. El valor se referencia mediante el Element ID del campo, que defines en Input Settings.

Para usar el valor de un campo en otro lugar del flow (por ejemplo, para personalizar textos, rellenar otro campo o condicionar la navegación), inserta una variable y elige:

Element > Screen > <elementId>.value

Validación de inputs

El comportamiento de validación depende del tipo de input. Cada input expone una variable booleana de solo lectura, <elementId>.isValid, que indica si el valor introducido supera las reglas de validación del input. Úsala en acciones condicionales o visibilidad condicional — por ejemplo, para ocultar un botón Siguiente hasta que el formato de un correo electrónico sea válido.

Note
  • La variable isValid es de solo lectura — no se puede modificar.
  • Un input vacío siempre se considera válido.
  • Los inputs de texto no tienen reglas de validación. textInput.isValid siempre devuelve True.
Tipo de entradaComportamiento de validación
TextoSin reglas de validación integradas.
Correo electrónicoOpcional. Activa Validate email format en el panel Design para comprobar que el valor introducido tiene formato de correo electrónico.
Número de teléfonoVerificación de formato de número de teléfono integrada. No es configurable en el Builder: la regla se evalúa en tiempo de ejecución.
ContraseñaConfigurable. Consulta Requisitos de contraseña a continuación.
NúmeroBasado en formato. El valor introducido debe coincidir con el formato de número seleccionado. Consulta Formato de número a continuación.
Fecha, Hora, Fecha y horaIntegrado. El selector solo acepta valores de fecha u hora válidos.

El estado visual Invalid se activa cuando el usuario envía el formulario, por ejemplo, al pulsar Intro o «Listo» en el teclado. Hasta ese momento, el campo muestra el estado Active o Default.

Requisitos de contraseña

Los campos de contraseña admiten reglas de validación configurables. Haz clic en Edit password requirements en el panel Design para abrir el editor de reglas. Las reglas activadas se muestran como una lista de verificación en tiempo real debajo del campo: cada elemento recibe una marca de verificación en el momento en que se cumple su regla.

Reglas disponibles:

  • Min length — número mínimo de caracteres. Por defecto: 8.
  • Max length — número máximo de caracteres. Por defecto: 32.
  • Uppercase letter — al menos una letra de A a Z.
  • Lowercase letter — al menos una letra de a a z.
  • Number — al menos un dígito.
  • Special character — al menos un carácter no alfanumérico (por ejemplo, !@#$%).

La contraseña es válida únicamente cuando se cumplen todas las reglas habilitadas.

Formato de número

El menú desplegable Format en la configuración de entrada Number controla cómo se interpreta el valor introducido:

  • Integer — solo números enteros (por ejemplo, 4).
  • Decimal (Point) — decimales con punto como separador (por ejemplo, 4.89).
  • Decimal (Comma) — decimales con coma como separador (por ejemplo, 4,89).

Los valores que no coincidan con el formato seleccionado se consideran inválidos.

Activar acciones ante eventos de entrada

Puedes ejecutar acciones en respuesta a la interacción del usuario mediante el panel Interactions:

  • On changed — se activa cuando el usuario cambia el valor del campo. Disponible en todos los tipos de entrada.
  • On submit — se activa cuando el usuario envía un campo de texto pulsando Intro o Listo en el teclado. Los selectores de fecha y hora no tienen este disparador.