Etapa de formulario

Una etapa de tipo formulario incluye una colección de campos de entrada de datos. Los usuarios completan la información y, al enviar el formulario, avanzan a la siguiente etapa.

Esta etapa agrega agrega la llave fields que es un listado de campos de entrada de datos. Cada campo tiene los siguientes atributos:

FieldName	Type	Required	Description	Default
id	string	X	Identificador único del campo de entrda
type	string	X	Tipo de campo ver más adelante el listado de tipos permitidos
name	string	X	Nombre del campo
label	string/transObject	X	Etiqueta del campo, podrá ser una cadena o un objeto de traducción
content	string/transObject		Texto usado para mostrar un preámbulo del campo	false
required	boolean		Define si es o no requerido	false
pattern	string		Define una expresión regular usada para validar el campo

Tipos de campos

Los tipos de campos permitodos son:

• phone: A phone number field.
• email: An email field.
• text: A text field.
• selection: A selection field.
• date: A date field.
• gdpr: A GDPR field. Visually, it is a checkbox.
• memo: A memo field. Visually, it is a text field with multiple lines.

Ejemplo

{
    "id": "formContactDetails",
    "type": "Form",
    "fields": [
        {
            "type": "text",
            "required": true,
            "name": "firstName",
            "label": {
                "en": "First name",
                "es": "Nombre",
            },
            "pattern": "^[\\p{L} '.-]*$"
        },
        {
            "type": "text",
            "required": true,
            "name": "lastName",
            "label": {
                "en": "Last name",
                "es": "Apellido",
            },
            "pattern": "^[\\p{L} '.-]*$"
        },
        {
            "type": "phone",
            "required": true,
            "name": "phone",
            "label": {
                "en": "Phone",
                "es": "Teléfono",
            },
            "phonePrefix": "+34"
        },
        {
            "type": "email",
            "required": true,
            "name": "email",
            "label": {
                "en": "Email",
                "es": "Correo electrónico",
            }
        },
        {
          "type": "gdpr",
          "required": true,
          "name": "gdpr",
          "contentField": false,
          "text": {
            "es": "Respetamos tu privacidad. Antes de empezar, lee la política de protección de datos Confirma que has leido la  <a href=\"https://legal.gml.mx/terminos_condiciones_jacmx.html\" target=\"_blank\">obligación informativa</a> y aceptas el tratamiento de tus datos.",
            "en": "We respect your privacy. Before starting, read the privacy policy. Confirm that you have read the <a href=\"https://legal.gml.mx/terminos_condiciones_jacmx.html\" target=\"_blank\">obligation information</a> and accept the treatment of your data."
          },
          "items": []
        }
    ],
    "actions": [
        {
            "id": "1",
            "type": "forward",
            "title": {
                "en": "Continue",
                "es": "Continuar",
            },
            "priority": "primary",
            "nextNodeId": "dataConfirmation",
            "name": "continue"
        }
    ],
    "stageId": "2",
    "stepNumber": 3,
    "stepName": "contact-data"
},

En esta etapa se agrega al contexto una llave igual al identificador de la etapa, usando el ejemplo anterior sería formContactDetails, este objeto tendría los valores de los campos del formulario.

{
    ... # Otros campos del contexto
    "formContactDetails": {
        "firstName": "Juan",
        "lastName": "Pérez",
        "phone": "+525555555555",
        "email": "[email protected]",
        "gdpr": true
    }
}