Liste des différents champs

Civilité :

{
  "fieldName": "civilite",
  "title": "Civilité",
  "id": "civilite",
  "type": "radio",
  "label": "Civilité",
  "name": "civilite",
  "value": "",
  "class": "col-xs-12 col-sm-6 col-sm-offset-2",
  "required": true,
  "options": [
    { "label": "Monsieur", "value": "Mr." },
    { "label": "Madame", "value": "Ms." }
  ]
}

Prénom :

{
  "fieldName": "firstName",
  "match": "firstName",
  "id": "firstaName",
  "label": "Prénom",
  "name": "firstName",
  "class": "col-xs-12 col-sm-4 col-sm-offset-2",
  "required": true
}

Nom :

{
  "fieldName": "lastName",
  "match": "lastName",
  "id": "lastName",
  "label": "Nom",
  "name": "lastName",
  "class": "col-xs-12 col-sm-4",
  "required": true
}

Téléphone :

{
  "fieldName": "telephone",
  "match": "telephone",
  "id": "telephone",
  "label": "Téléphone",
  "name": "telephone",
  "class": "col-xs-12 col-sm-4 col-sm-offset-2",
  "onlyNumbers": true,
  "required": true
}

Email :

{
  "fieldName": "email",
  "match": "email",
  "id": "email",
  "label": "Email",
  "name": "email",
  "class": "col-xs-12 col-sm-4",
  "required": true
}

Code Postal :

{
  "fieldName": "postalCode",
  "match": "postalCode",
  "id": "postalCode",
  "label": "Code Postal",
  "name": "postalCode",
  "class": "col-xs-12 col-sm-4 col-sm-offset-2",
  "required": true,
  "onlyNumbers": true
}

Ville :

{
  "fieldName": "city",
  "match": "city",
  "id": "city",
  "label": "Ville",
  "name": "city",
  "class": "col-xs-12 col-sm-4",
  "required": true
}

Concession :

{
  "fieldName": "concession",
  "match": "concession",
  "id": "concession",
  "type": "select",
  "label": "Concession",
  "name": "concession",
  "class": "col-xs-12 col-sm-8 col-sm-offset-2",
  "required": true
}

Date :

{
  "fieldName": "date",
  "id": "date",
  "type": "date",
  "class": "col-xs-12 col-sm-4 col-sm-offset-2",
  "label": "Rendez-vous",
  "name": "date",
  "required": true,
  "disable-dates": true
}

Modèles Hyundai :

{
  "fieldName": "modeles",
  "match": "modeles",
  "id": "modeles",
  "label": "Modeles",
  "name": "modeles",
  "class": "col-xs-12 col-sm-8 col-sm-offset-2",
  "type": "select",
  "required": true
}

Commentaire :

{
  "fieldName": "commentaire",
  "type": "commentaire",
  "id": "commentaire",
  "label": "Commentaire",
  "name": "commentaire",
  "class": "col-xs-12 col-sm-8 col-sm-offset-2"
}

Optin :

{
  "fieldName": "optin",
  "class": "col-xs-12 col-sm-8 col-sm-offset-2",
  "type": "optin"
}

 

Disposition sur la page :

La disposition des champs est géré avec Flexbox Grid, une bibliothèque sass. Partez du principe que votre page est découpée verticalement sur 12 portions.

1. "col-xs-12" renvoie au format mobile, et prend 100% de la largeur de la page (12/12)
2. "col-sm-8" renvoie au format desktop, et prend 66% de la largeur de la page (8/12)
3. "col-md-offset-2" renvoie encore une fois au format desktop, et indique que le champ devra se décaler de 2/12 sur la page.

Pour plus d'informations, réferez vous à la documentation officielle de Flexbox Grid