form step example with concrete data

docs/modular-steps-management.md

@@ -76,88 +76,92 @@ Here is an example of the form step's attributes. It presents a form with two se
   "subtype": "form-step",
   "form": {
     "section1": {
-      "title": "My section title",
+      "title": "Identification",
       "inputs": {
-        "typeText": {
+        "firstName": {
           "index": 0,
-          "placeholder": "Text placeholder",
+          "placeholder": "First name",
           "maxLength": 50,
           "type": "text",
           "required": true
         },
-        "typeTel": {
+        "tel": {
           "index": 1,
           "required": true,
           "type": "tel",
-          "label": "Tel label",
+          "label": "Phone number",
           "placeholder": "+333 33 33 33 33",
           "pattern": "[+][3][0-9]{2}[0-9]{2}[0-9]{2}[0-9]{2}[0-9]{2}"
         },
-        "typeTextArea": {
+        "medicalInfo": {
-          "label": "Textarea label",
+          "label": "Medical informations",
+          "placeholder": "Medical Informations",
           "index": 7,
           "maxLength": 250,
-          "placeholder": "Textarea placeholder",
           "type": "textarea"
         },
-        "typeDate": {
+        "dateOfBirth": {
           "index": 2,
           "required": true,
           "type": "date",
+          "label": "Date of birth",
           "min": "1621-07-08",
-          "max": "2019-01-01",
+          "max": "1900-01-01",
-          "label": "Date label",
           "value": "2000-01-01"
         },
-        "typeCountries": {
+        "country": {
           "index": 4,
           "id": "countries",
           "type": "countries",
           "required": true,
           "emptyItem": { "label": "Select your country label" }
         },
-        "typeSelect": {
+        "gender": {
           "index": 3,
           "type": "select",
-          "id": "typeSelect",
+          "id": "genders",
           "required": true,
-          "emptyItem": { "label": "Special emply item" },
+          "emptyItem": { "label": "Select your gender" },
           "items": [
+            { "label": "Male", "data": "male" },
+            { "label": "Female", "data": "female" }
             { "label": "Item 1", "data": "item1" },
             { "label": "Item 2", "data": "item2" }
           ]
         },
-        "typeRadio": {
+        "environment": {
           "index": 5,
           "type": "radio",
           "required": true,
-          "label": "Radio label - choose your radio",
+          "label": "Which environment do you live in ?",
           "inlineBlock": true,
           "items": [
+            { "label": "City", "data": "city" },
+            { "label": "Countryside", "data": "countryside" }
             { "label": "Radio 1", "data": "radio1" },
             { "label": "Radio 2", "data": "radio2" }
           ]
         },
-        "typeSwitch": {
+        "programmingAbilities": {
           "index": 6,
           "type": "switch",
-          "label": "Switch label",
+          "label": "I am new in programming",
           "value": true
         },
-        "typeCheckbox": {
+        "generalConditions": {
           "index": 8,
           "type": "checkbox",
-          "label": "Checkbox label",
+          "label": "I have read and I accept the general conditions",
           "value": false
         }
       }
     },
     "section2": {
-      "title": "My second section title",
+      "title": "More about you",
       "inputs": {
-        "typeText": {
+        "favoriteColor": {
           "index": 0,
-          "placeholder": "Text placeholder",
+          "placeholder": "Your favorite color",
           "type": "text",
           "required": true
         }