DESY

Sistema de Diseño del Gobierno de Aragón.

Volver

Formularios

Los patrones de formularios se usan para solicitar a la persona usuaria diversos datos.

Datos de identidad: Nombre y nif

Solemos agrupar los elementos de los formularios en fieldsets que agrupen tipos de datos similares. En este caso nombre y nif.

Datos de identidad
Mostrar códigodel ejemplo: includes/_pattern.formularios-nombre-nif.njk

Contenido

Nunjucks macro

{% from "components/input/_macro.input.njk" import componentInput %}
{% from "components/select/_macro.select.njk" import componentSelect %}

<fieldset>
  <legend class="sr-only">Datos de identidad</legend>
  {{ componentInput({
    "label": {
      "text": "Nombre"
    },
    "id": "input-nombre",
    "name": "nombre",
    "classes": "w-full lg:w-2/5",
    "value": "Ana Pérez"
  })  }}
  {{ componentInput({
    "label": {
      "text": "NIF o NIE"
    },
    "id": "input-nif",
    "name": "nif",
    "attributes": {
        "size": "19"
    },
    "value": "234556789N"
  })  }}
</fieldset>

Datos de contacto: correo electrónico y teléfono

Solemos agrupar los elementos de los formularios en fieldsets que agrupen tipos de datos similares. En este caso correo electrónico y teléfono.

Datos de contacto
Mostrar códigodel ejemplo: includes/_pattern.formularios-correo-telefono.njk

Contenido

Nunjucks macro

{% from "components/input/_macro.input.njk" import componentInput %}
{% from "components/select/_macro.select.njk" import componentSelect %}

<fieldset>
  <legend class="sr-only">Datos de contacto</legend>
  {{ componentInput({
    "label": {
      "text": "Correo electrónico (Obligatorio)"
    },
    "id": "input-email",
    "name": "email",
    "classes": "w-full lg:w-2/5",
    "value": "anaperez@gmail.com"
  })  }}
  {{ componentInput({
    "label": {
      "text": "Teléfono móvil (Obligatorio)"
    },
    "id": "input-movil",
    "name": "movil",
    "attributes": {
        "size": "19"
    },
    "value": "652 000 000"
  })  }}
</fieldset>

Dirección postal completa

Si este patrón tiene excesivos elementos, puedes borrar los que no interesen y quedarte con una versión simplificada de él.

Domicilio postal
Mostrar códigodel ejemplo: includes/_pattern.formularios-direccion-postal.njk

Contenido

Nunjucks macro

{% from "components/input/_macro.input.njk" import componentInput %}
{% from "components/select/_macro.select.njk" import componentSelect %}

<fieldset>
  <legend class="sr-only">Domicilio postal</legend>
  <div class="grid lg:grid-cols-4 gap-x-4">
    {{ componentSelect({
      "id": "select-tipo-via",
      "name": "tipo-via",
      "classes": "lg:w-full",
      "label": {
        "text": "Tipo de vía"
      },
      "items": [
        {
          "value": 1,
          "text": "Calle",
          "selected": true
        },
        {
          "value": 2,
          "text": "Paseo"
        },
        {
          "value": 3,
          "text": "Plaza"
        },
        {
          "value": 4,
          "text": "Avenida"
        }
      ]
    })  }}
    {{ componentInput({
      "formGroup": {
        "classes": "lg:col-span-3"
      },
      "label": {
        "text": "Vía"
      },
      "id": "input-nombre-via",
      "name": "nombre-via",
      "classes": "w-full"
    })  }}
  </div>

  <div class="grid lg:grid-cols-4 gap-x-4">
    <div class="lg:col-span-2 grid grid-cols-4 gap-x-4">
      {{ componentInput({
        "label": {
          "text": "Número"
        },
        "id": "input-numero",
        "name": "numero",
        "classes": "w-full"
      })  }}
      {{ componentInput({
        "label": {
          "text": "Escalera"
        },
        "id": "input-escalera",
        "name": "escalera",
        "classes": "w-full"
      })  }}
      {{ componentInput({
        "label": {
          "text": "Piso"
        },
        "id": "input-piso",
        "name": "piso",
        "classes": "w-full"
      })  }}
      {{ componentInput({
        "label": {
          "text": "Puerta"
        },
        "id": "input-puerta",
        "name": "puerta",
        "classes": "w-full"
      })  }}
    </div>
    {{ componentInput({
      "formGroup": {
        "classes": "lg:col-span-2"
      },
      "label": {
        "text": "Indicaciones adicionales"
      },
      "id": "input-indicaciones",
      "name": "indicaciones",
      "classes": "w-full"
    })  }}
  </div>

  <div class="grid lg:grid-cols-5 gap-x-4">
    {{ componentInput({
      "label": {
        "text": "Código Postal"
      },
      "id": "input-cpostal",
      "name": "cpostal",
      "classes": "w-44 lg:w-full"
    })  }}
    {{ componentSelect({
      "formGroup": {
          "classes": "lg:col-span-2"
        },
      "id": "select-provincia",
      "name": "provincia",
      "classes": "w-full",
      "label": {
        "text": "Provincia"
      },
      "items": [
        {
          "value": 0,
          "text": "Selecciona una opción",
          "selected": true,
          "disabled": true,
          "hidden": true
        },
        {
          "value": 1,
          "text": "Option 1"
        },
        {
          "value": 2,
          "text": "Option 2"
        },
        {
          "value": 3,
          "text": "Option 3"
        }
      ]
    })  }}
    {{ componentSelect({
      "formGroup": {
          "classes": "lg:col-span-2"
        },
      "id": "select-municipio",
      "name": "municipio",
      "classes": "w-full",
      "label": {
        "text": "Municipio"
      },
      "items": [
        {
          "value": 0,
          "text": "Selecciona una opción",
          "selected": true,
          "disabled": true,
          "hidden": true
        },
        {
          "value": 1,
          "text": "Option 1"
        },
        {
          "value": 2,
          "text": "Option 2"
        },
        {
          "value": 3,
          "text": "Option 3"
        }
      ],
      "disabled": true
    })  }}
  </div>
</fieldset>

Acepto políticas

Es común tener que aceptar obligatoriamente algún tipo de politica antes de permitir enviar un formulario.

Política de privacidad y protección de datos
Mostrar códigodel ejemplo: includes/_pattern.formularios-acepto-politica.njk

Contenido

Nunjucks macro

{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}

{{ componentCheckboxes({
  "idPrefix": "politicas-rgpd",
  "name": "check-politicas",
  "fieldset": {
    "legend": {
      "text": "Política de privacidad y protección de datos",
      "classes": "sr-only"
    }
  },
  "items": [
    {
      "value": "si",
      "html": 'Acepto la <a href="#" class="c-link">política de privacidad y la protección de datos</a>',
      "checked": true
    }
  ]
})  }}