# Form Builder # Guide d'utilisation Découvrez comment utiliser le builder de formulaires. Vous trouverez le json à remplir dans le dossier /templates à la racine du projet. ```json "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** ```json { "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.

[](https://github.com/INNOCEAN-FRANCE/form_builder#disposition-sur-la-page-)

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](http://flexboxgrid.com/)