Form Builder

• Guide d'utilisation
• Liste des différents champs

Guide d'utilisation

Découvrez comment utiliser le builder de formulaires.
 
Vous trouverez le json à remplir dans le dossier /templates à la racine du projet.

"formTitle": "Formulaire Abonnement Hyundai Leasing",
"subTitle": "Demandez à être rappelé par l’un de nos conseiller Hyundai",
"validation": "Votre demande a été envoyée avec succès",

Au sein de ces clés valeurs, vous pourrez définir respectivement :

1. Le titre de votre formulaire
2. Le sous-titre de votre formulaire
3. Le message de validation affiché une fois le formulaire soumit

Voici un exemple gérant les champs Nom et Prénom dans un formulaire

{
    "rowClass": "row",
    "fields": [
      {
        "fieldName": "firstName",
        "match": "firstName",
        "id": "firstName",
        "label": "Prénom",
        "name": "firstName",
        "class": "col-xs-12 col-sm-4 col-sm-offset-2",
        "required": true
      },
      {
        "fieldName": "lastName",
        "match": "lastName",
        "id": "lastName",
        "label": "Nom",
        "name": "lastName",
        "class": "col-xs-12 col-sm-4",
        "required": true
      }
    ]
}

Tout d'abord, il faut définir la clé valeur suivante afin de définir une rangée qui comportera les champs :

"rowClass": "row"

Ensuite il faut définir un tableau pour définir ses champs :

"fields" : []

Pour créer un champ (par exemple 'Nom'), vous aurez besoin de resneigner entre les crochets de la clé "fields" les clés valeurs suivantes :

"fieldName" : "lastName"
"match": "lastName",
"id": "lastName",
"name": "lastName",

C'est important pour ces clés d'avoir la même valeur, sinon votre champ risque de ne pas fonctionner correctement. Définissez ensuite le label pour donner à votre champ le nom que vous souhaitez afficher :

"label": "Libre à vous de décider"

Si vous reseignez la clé valeur suivante, L'utilisateur de votre formulaire sera obligé de remplir le champ afin de valider le formulaire :

"required" : true

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