Designsystem

Form simulation isolation 

<div class="form-flex background-white">
    <div class="form-flex-section">
        <p class="label">Sélectionnez votre département et votre type de logement :</p>
    </div>
    <div class="form-flex-section form-flex-2-colums">
        <div>
            <div class="input-group">
                <label for="text">Département des travaux</label>
                <input type="text" data-action="autocomplete" placeholder="Département" name="autocomplete_field">
            </div>

            <script src="../../js/framework/jquery-3.4.1.min.js"></script>
            <script src="../../js/vendors/jQuery-Autocomplete-master/dist/jquery.autocomplete.min.js"></script>
            <script>
                var countries = [{
                        value: 'Ain (01)',
                        data: 'Ain'
                    },
                    {
                        value: 'Aisne (02)',
                        data: 'Aisne'
                    },
                    {
                        value: 'Allier  (03)',
                        data: 'Allier'
                    }
                ];
                $(document).ready(function() {
                    $('input[data-action=autocomplete]').autocomplete({
                        lookup: countries,
                        onSelect: function(suggestion) {
                            //alert(suggestion.data);
                        }
                    });
                })
            </script>
        </div>
        <div>
            <div class="input-group">
                <label for="toggle-switch1">Type de logement</label>
                <div class="inputSwitch">
                    <div class="inputSwitch-choice">
                        <input class="inputSwitch-choice-input" type="radio" name="toggle-switch1" id="toggle-switch1_1" checked="checked" value="1">
                        <label class="inputSwitch-choice-label" for="toggle-switch1_1">Maison</label>
                    </div>
                    <div class="inputSwitch-choice">
                        <input class="inputSwitch-choice-input radio" type="radio" name="toggle-switch1" id="toggle-switch1_2" value="2">
                        <label class="inputSwitch-choice-label " for="toggle-switch1_2">Appartement</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="form-flex background-white">
    <div class="form-flex-section">
        <p class="label">Selon votre besoin, sélectionnez un ou plusieurs types de travaux en renseignant les informations requises : </p>
    </div>
    <div class="form-flex-section form-flex-bordered">
        <div class="form-flex-2-colums">
            <div>
                <div class="checkboxWithImage">
                    <img class="checkboxWithImage-image img-rounded" src="/illustrations/combles.png">
                    <input type="checkbox" class="checkbox" name="checkbox10" id="checkbox10">
                    <label class="font-primary" for="checkbox10"><img class="img-rounded" src="/illustrations/combles.png"><span>Combles</span></label>
                </div>
            </div>
            <div>
                <div class="margin-bottom-xs">
                    <div class="input-group">
                        <label for="toggle-switch2">Vos combles sont-ils àce jour perdus ou habités ?</label>
                        <div class="inputSwitch">
                            <div class="inputSwitch-choice">
                                <input class="inputSwitch-choice-input" type="radio" name="toggle-switch2" id="toggle-switch2_1" checked="checked" value="1">
                                <label class="inputSwitch-choice-label" for="toggle-switch2_1">Perdus</label>
                            </div>
                            <div class="inputSwitch-choice">
                                <input class="inputSwitch-choice-input radio" type="radio" name="toggle-switch2" id="toggle-switch2_2" value="2">
                                <label class="inputSwitch-choice-label " for="toggle-switch2_2">Habités</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="input-group">
                        <label for="toggle-switch3">Surface à isoler</label>
                        <div class="inputSwitch">
                            <div class="inputSwitch-choice">
                                <input class="inputSwitch-choice-input" type="radio" name="toggle-switch3" id="toggle-switch3_1" checked="checked" value="1">
                                <label class="inputSwitch-choice-label" for="toggle-switch3_1">&lt;30m2</label>
                            </div>
                            <div class="inputSwitch-choice">
                                <input class="inputSwitch-choice-input radio" type="radio" name="toggle-switch3" id="toggle-switch3_2" value="2">
                                <label class="inputSwitch-choice-label " for="toggle-switch3_2">&gt;30m2</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="form-flex-section form-flex-bordered">
        <div class="form-flex-2-colums">
            <div>
                <div>
                    <div class="checkboxWithImage">
                        <img class="checkboxWithImage-image img-rounded" src="/illustrations/garage.png">
                        <input type="checkbox" class="checkbox" name="checkbox20" id="checkbox20">
                        <label class="font-primary" for="checkbox20"><img class="img-rounded" src="/illustrations/garage.png"><span>Garage</span></label>
                    </div>
                </div>
                <div>
                    <div class="checkboxWithImage">
                        <img class="checkboxWithImage-image img-rounded" src="/illustrations/cave.png">
                        <input type="checkbox" class="checkbox" name="checkbox30" id="checkbox30">
                        <label class="font-primary" for="checkbox30"><img class="img-rounded" src="/illustrations/cave.png"><span>Cave</span></label>
                    </div>
                </div>
                <div>
                    <div class="checkboxWithImage">
                        <img class="checkboxWithImage-image img-rounded" src="/illustrations/vide-sanitaire.png">
                        <input type="checkbox" class="checkbox" name="checkbox40" id="checkbox40">
                        <label class="font-primary" for="checkbox40"><img class="img-rounded" src="/illustrations/vide-sanitaire.png"><span>Vide sanitaire</span></label>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <div class="input-group">
                        <label for="toggle-switch4">Surface totale à isoler</label>
                        <div class="inputSwitch">
                            <div class="inputSwitch-choice">
                                <input class="inputSwitch-choice-input" type="radio" name="toggle-switch4" id="toggle-switch4_1" checked="checked" value="1">
                                <label class="inputSwitch-choice-label" for="toggle-switch4_1">&lt;30m2</label>
                            </div>
                            <div class="inputSwitch-choice">
                                <input class="inputSwitch-choice-input radio" type="radio" name="toggle-switch4" id="toggle-switch4_2" value="2">
                                <label class="inputSwitch-choice-label " for="toggle-switch4_2">&gt;30m2</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="form-flex background-white">
    <div class="form-flex-section">
        <p class="label">Sélectionnez votre département et votre type de logement :</p>
    </div>
    <div class="form-flex-section form-flex-2-colums">
        <div>{{> @input-text-autocomplete autocomplete = form_simulation_isolation.autocomplete}}</div>
        <div>{{> @input-switch switch=form_simulation_isolation.switch1}}</div>
    </div>
</div>

<div class="form-flex background-white">
    <div class="form-flex-section">
        <p class="label">Selon votre besoin, sélectionnez un ou plusieurs types de travaux en renseignant les informations requises : </p>
    </div>
    <div class="form-flex-section form-flex-bordered">
        <div class="form-flex-2-colums">
            <div>{{> @input-checkbox--with-image checkbox=form_simulation_isolation.checkbox1 }}</div>
            <div>
                <div class="margin-bottom-xs">{{> @input-switch switch=form_simulation_isolation.switch2}}</div>
                <div>{{> @input-switch switch=form_simulation_isolation.switch3}}</div>
            </div>
        </div>
    </div>
    <div class="form-flex-section form-flex-bordered">
        <div class="form-flex-2-colums">
            <div>
                <div>{{> @input-checkbox--with-image checkbox=form_simulation_isolation.checkbox2 }}</div>
                <div>{{> @input-checkbox--with-image checkbox=form_simulation_isolation.checkbox3 }}</div>
                <div>{{> @input-checkbox--with-image checkbox=form_simulation_isolation.checkbox4 }}</div>
            </div>
            <div>
                <div>{{> @input-switch switch=form_simulation_isolation.switch4}}</div>
            </div>
        </div>
    </div>
</div>
 
{
  "form_simulation_isolation": {
    "btn_label": "étape suivante",
    "autocomplete": {
      "label": "Département des travaux",
      "placeholder": "Département"
    },
    "switch1": {
      "label": "Type de logement",
      "name": "toggle-switch1",
      "val1": "Maison",
      "val2": "Appartement"
    },
    "switch2": {
      "label": "Vos combles sont-ils àce jour perdus ou habités ?",
      "name": "toggle-switch2",
      "val1": "Perdus",
      "val2": "Habités"
    },
    "switch3": {
      "label": "Surface à isoler",
      "name": "toggle-switch3",
      "val1": "<30m2",
      "val2": ">30m2"
    },
    "switch4": {
      "label": "Surface totale à isoler",
      "name": "toggle-switch4",
      "val1": "<30m2",
      "val2": ">30m2"
    },
    "select": {
      "select_name": "departement",
      "select_label": "Département des travaux <sup>*</sup>",
      "select_options": [
        "01"
      ],
      "select_info": "<sup>*</sup> Champ obligatoire"
    },
    "checkbox1": {
      "name": "checkbox1",
      "datas": [
        {
          "label": "Combles",
          "image": "/illustrations/combles.png"
        }
      ]
    },
    "checkbox2": {
      "name": "checkbox2",
      "datas": [
        {
          "label": "Garage",
          "image": "/illustrations/garage.png"
        }
      ]
    },
    "checkbox3": {
      "name": "checkbox3",
      "datas": [
        {
          "label": "Cave",
          "image": "/illustrations/cave.png"
        }
      ]
    },
    "checkbox4": {
      "name": "checkbox4",
      "datas": [
        {
          "label": "Vide sanitaire",
          "image": "/illustrations/vide-sanitaire.png"
        }
      ]
    }
  }
}

There are no notes for this item.