templates/Nordinfo/Main/signaler.html.twig line 1

Open in your IDE?
  1. {% extends 'Nordinfo/Main/base.html.twig' %}
  2. {% block title %}Contacter le Département - Nord Info
  3. {% endblock %}
  4. {% block body_class %}body-signaler bgColorGrey{% endblock %}
  5. {% block header_breadcrumb %}
  6.   {{ include('Nordinfo/Main/parts/breadcrumb.html.twig') }}
  7. {% endblock %}
  8. {% block body %}
  9.     <main role="main" class="mainContent pt-5 pb-0 bgColorHighlightBlue" data-form-validation-step="hidden" id="mainContent" tabindex="-1">
  10.     {% if referer is not null %}
  11.       {% set url_back = referer %}
  12.     {% else %}
  13.       {% set url_back = path('info') %}
  14.     {% endif %}
  15.     {% include 'Nordinfo/Main/parts/back_btn.html.twig' with {'back_btn_class':'_list-page'} %}
  16.         <div class="container">
  17.             <div class="containerPageHeader">
  18.                 <h1 class="d-validation-none" data-focus-content-target="initial">Nous contacter</h1>
  19.                 <h1 class="d-none d-validation-block">Vérifier votre message</h1>
  20.             </div>
  21.             <article class="pt-4">
  22.                 <p class="d-validation-none">
  23.                     Une question, une suggestion une difficulté sur Nord info? Laissez-nous un message, nous y répondrons dans les
  24.                                                   meilleurs délais.
  25.                 </p>
  26.                 <div class="pb-4 d-validation-none"></div>
  27.                 <p class="text-center d-validation-none">Les champs suivis d'un astérisque (<span class="colorRed">*</span>)
  28.                                                   sont obligatoires</p>
  29.                 <form action="{{ path('send_form') }}" method="post" enctype="multipart/form-data" class="needs-validation formCustom" novalidate>
  30.                     <input type="hidden" name="raison">
  31.                     <div class="form-validation-overlay mb-5">
  32.                         <div class="form-group">
  33.                             <div class="__input-wrapper _select">
  34.                                 <div class="__inner">
  35.                                     <label for="selectCategory">
  36.                                         <span class="label-text">Votre message concerne</span>
  37.                                         <span class="colorRed d-validation-none">*</span>
  38.                                     </label>
  39.                                     <select class="form-control" id="selectCategory" name="objet" required>
  40.                                         {% for thematique in thematiques %}
  41.                                             <option {% if objet is not null and thematique.nameSmall == objet %} selected {% endif %} value="{{thematique.id}}">{{ thematique.name }}</option>
  42.                                         {% endfor %}
  43.                                     </select>
  44.                                 </div>
  45.                             </div>
  46.                         </div>
  47.                         <div class="form-group">
  48.                             <div class="__input-wrapper">
  49.                                 <div class="__inner">
  50.                                     <label for="inputEmail">
  51.                                         <span class="label-text">Adresse courriel (ex : nom@domaine.fr)</span>
  52.                                         <span class="colorRed d-validation-none">*</span>
  53.                                     </label>
  54.                                     <input class="form-control" id="inputEmail" autocomplete="email" name="email" placeholder="" required type="email">
  55.                                 </div>
  56.                             </div>
  57.                         </div>
  58.                         <div class="form-group">
  59.                             <div class="__input-wrapper _textarea">
  60.                                 <div class="__inner">
  61.                                     <label for="textarea">
  62.                                         <span class="label-text">Votre Message</span>
  63.                                         <span class="colorRed d-validation-none">*</span>
  64.                                         :</label>
  65.                                     <textarea class="form-control" id="textarea" name="message" placeholder="" required rows="3"></textarea>
  66.                                 </div>
  67.                             </div>
  68.                         </div>
  69.                         <div class="form-group" data-form-validation-step-file-wrapper>
  70.                             <div class="inputFileWrapper">
  71.                                 <input accept="image/jpeg,image/gif,image/png,.pdf,.doc,.odt" class="inputfile inputfile-1" id="file" name="file" type="file"/>
  72.                                 <label for="file" class="label-file">
  73.                                     <svg aria-hidden="true" focusable="false" data-name="Calque 1" viewbox="0 0 283.5 283.5" xmlns="http://www.w3.org/2000/svg">
  74.                                         <path d="M261.5,124.6c-5.7-3.5-12.2-2.5-17.4,2.7-37.4,37.4-74.8,75-112.4,112.3-15.1,15-33.5,19.4-53.8,12.9C41.8,240.8,30.2,195,56.2,167.4c6.8-7.2,13.8-14,20.8-20.9h0l1.2-1.2,48-48,44.4-44.4c4.9-4.9,9.7-9.8,14.6-14.6,7.8-7.7,17.2-11.1,28-9.4,12.9,2,22,9.3,26.2,21.7,4.3,12.6,1.5,24-7.6,33.6-5.1,5.4-10.5,10.6-15.8,15.9L168.1,148c-9.2,9.2-18.4,18.5-27.7,27.6l-5.3,5.4c-1.4,1.3-2.6,2.8-4,4-2.8,2.5-5.3,5.3-8,7.9-1.5,1.4-3.1,2.6-4.6,3.9-7.7,4.1-14.1-1.3-14.5-1.7-5.6-5.4-5.7-13.3-.3-18.8l84-84c4.2-4.2,8.5-8.3,12.5-12.7,5.1-5.8,3.7-15-2.7-19.4-5.7-3.9-12.6-3.1-17.8,2.1L144.5,97.5c-19.9,19.9-39.9,39.8-59.8,59.8C75,167,71.3,178.6,73.3,192c2.7,18.7,19.6,33.3,38.6,33.3a39.87,39.87,0,0,0,29.3-12.2L250.5,103.8a59.56,59.56,0,0,0,15.7-27,58.78,58.78,0,0,0,1.9-18.2V57.5a48.59,48.59,0,0,0-.7-5.5C262.8,28,249,11.7,225.7,4.5c-21-6.5-40.4-2.1-56.8,12.6-10.2,9.1-19.5,19.2-29.2,28.9Q89.6,95.95,39.6,146c-15.1,15-23.5,33.1-24.1,54.4-.7,25.5,8.8,46.9,28.3,63.3,17.2,14.6,37.4,20.4,59.8,18a76.42,76.42,0,0,0,46.2-21.8c11.9-11.7,23.6-23.5,35.4-35.3,12.8-12.7,25.5-25.5,38.2-38.2l39.9-39.9a19.61,19.61,0,0,0,3.6-5.4C269.5,135.1,266.8,127.9,261.5,124.6Z"/>
  75.                                     </svg>
  76.                                     <span>
  77.                                         <span class="label-text">Ajouter une pièce jointe</span>
  78.                                         <br>
  79.                                         <span class="fsXs">5 Mo maximum. JPEG, GIF, PNG, PDF, DOC, ODT</span>
  80.                                     </span>
  81.                                 </label>
  82.                             </div>
  83.                             <script>
  84.                                 'use strict';;
  85.                                     (function (document, window, index) {
  86.                                     var inputs = document.querySelectorAll('.inputfile');
  87.                                     Array.prototype.forEach.call(inputs, function (input) {
  88.                                     var label = input.nextElementSibling,
  89.                                     labelVal = label.innerHTML;
  90.                                     input.addEventListener('change', function (e) {
  91.                                     var fileName = '';
  92.                                     if (this.files && this.files.length > 1) 
  93.                                     fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length);
  94.                                     else 
  95.                                     fileName = e.target.value.split('\\').pop();
  99.                                     if (fileName) 
  100.                                     label.querySelector('span').innerHTML = fileName;
  101.                                     else 
  102.                                     label.innerHTML = labelVal;
  106.                                     });
  107.                                     // Firefox bug fix
  108.                                     input.addEventListener('focus', function () {
  109.                                     input.classList.add('has-focus');
  110.                                     });
  111.                                     input.addEventListener('blur', function () {
  112.                                     input.classList.remove('has-focus');
  113.                                     });
  114.                                     });
  115.                                     }(document, window, 0));
  116.                             </script>
  117.                         </div>
  118.                         <div class="form-group">
  119.                             <div class="form-check">
  120.                                 <input class="form-check-input" id="mentions" required type="checkbox" value="" name="mentions">
  121.                                 <label class="form-check-label" for="mentions">
  122.                                     <span class="d-none label-text">En cochant cette case, j'accepte les Conditions Générales d'Utilisation</span>
  123.                                     En cochant cette case, j'accepte les
  124.                                     <a href="{{ path('post_detail', {slug: 'cgu'}) }}">Conditions Générales d'Utilisation</a>&nbsp;<span class="colorRed d-validation-none">*</span>
  125.                                 </label>
  126.                             </div>
  127.                         </div>
  128.                         <div class="form-group">
  129.                             <div class="form-check">
  130.                             <input class="form-check-input" id="newsletter" type="checkbox" value="newsletter" name="newsletter" placeholder="">
  131.                             <label class="form-check-label" for="newsletter">
  132.                                 <span class="d-none label-text">J'accepte de recevoir les informations du Département du Nord</span>
  133.                                 J'accepte de recevoir les informations du Département du Nord
  134.                             </label>
  135.                             </div>
  136.                         </div>
  137.                         <span class="font-italic">Votre adresse de messagerie sera uniquement utilisée pour vous envoyer les lettres d'information du Département du Nord.
  138.                             Vous pouvez à tout moment utiliser le lien de désabonnement intégré dans l'infolettre.
  139.                             <a class="_external" href="https://lenord.fr/donnees-personnelles#infolettre">
  140.                             En savoir plus sur la gestion de vos données et
  141.                             vos droits.</a>
  142.                         </span>
  143.                         
  144.                     </div>
  145.                     <div class="form-group d-none d-validation-block">
  146.                         <input type="hidden" name="nb1" value="{{ caps['valeur1']['valeur'] }}">
  147.                         <input type="hidden" name="nb2" value="{{ caps['valeur2']['valeur'] }}">
  148.                         <div class="__input-wrapper _captcha">
  149.                             <div class="__inner">
  150.                                 <label for="inputCaptcha">Répondez à cette question de vérification avant d’envoyer votre message :
  151.                                                                                           Quel est le résultat de ({{ caps['valeur1']['libelle'] }}
  152.                                     +
  153.                                     {{ caps['valeur2']['libelle'] }})
  154.                                     <span class="colorRed d-validation-none">*</span>
  155.                                 </label>
  156.                                 <input class="form-control _captcha" id="inputCaptcha" type="text" name="captcha" data-focus-content-target="verify">
  157.                             </div>
  158.                         </div>
  159.                     </div>
  160.                     <div class="__buttons-wrapper">
  161.                         <button class="btn btnFormSubmit d-none d-validation-inline-block _modify" data-form-validation-step-toggle>
  162.                             <span>MODIFIER</span>
  163.                         </button>
  164.                         <button class="btn btnFormSubmit d-none d-validation-inline-block" type="submit">
  165.                             <span>ENVOYER</span>
  166.                         </button>
  167.                         <button class="btn btnFormSubmit d-validation-none _validation" data-form-validation-step-toggle>
  168.                             <span>VALIDER</span>
  169.                         </button>
  170.                     </div>
  171.                 </form>
  172.                 <div style="padding-bottom:100px;"></div>
  173.             </article>
  174.         </div>
  175.     </main>
  176. {% endblock %}