templates/Lenord/Main/support.html.twig line 1

Open in your IDE?
  1. {% extends 'Lenord/base.html.twig' %}
  2. {% block header_epingles %}
  3.   {{ include('Lenord/Main/parts/epingles.html.twig') }}
  4. {% endblock %}
  5. {% block header_breadcrumb %}
  6.   {% include 'Nordinfo/Main/parts/breadcrumb.html.twig' with {'variation':'le-nord'} %}
  7. {% endblock %}
  8. {% block header_breadcrumb_pdf %}
  9.   {% include 'Nordinfo/Main/parts/breadcrumb.html.twig' with {'variation':'le-nord'} %}
  10. {% endblock %}
  11. {% block body %}
  12.   <main role="main" class="bgColorHighlightBlue" data-form-validation-step="hidden" id="mainContent" tabindex="-1">
  13.     {% include 'Nordinfo/Main/parts/back_btn.html.twig' with {'back_btn_class':'--leNord --barHeading --blueMedium'} %}
  14.     <div class="barHeading --leNord --btnBack">
  15.       <h1>Formulaire de Contact</h1>
  16.     </div>
  17.     <article>
  18.       <div class="containerSm containerPostDetails --nordServices" aria-live="polite">
  19.         <div class="containerContent --nordServices">
  20.           <h2 class="d-none d-validation-block headingFormValidationMessage">Merci de vérifier votre saisie</h2>
  21.           <p class="__intro textCenter d-validation-none" data-focus-content-target="initial">Une fois envoyé, vous recevez une copie de ce message à l'adresse courriel que vous avez saisie.</p>
  22.           <div class="spacer d-validation-none"></div>
  23.           <p class="textCenter d-validation-none">Les champs suivis d'un astérisque (<span class="colorRed">*</span>)
  24.             sont obligatoires</p>
  25.           <form action="{{ path('lenord_send_form') }}" method="post" enctype="multipart/form-data" class="needs-validation formCustom mBLg">
  26.             <input type="hidden" name="raison">
  27.             <div class="form-validation-overlay mb-5">
  28.               <div class="form-group">
  29.                 <div class="__input-wrapper">
  30.                   <div class="__inner">
  31.                     <label for="nom">
  32.                       <span class="label-text">Nom</span>
  33.                     </label>
  34.                     <input type="text" class="form-control" id="nom" name="nom" placeholder="" autocomplete="family-name">
  35.                   </div>
  36.                 </div>
  37.               </div>
  38.               <div class="form-group">
  39.                 <div class="__input-wrapper">
  40.                   <div class="__inner">
  41.                     <label for="prenom">
  42.                       <span class="label-text">Prénom</span>
  43.                     </label>
  44.                     <input type="text" class="form-control" id="prenom" name="prenom" placeholder="" autocomplete="given-name">
  45.                   </div>
  46.                 </div>
  47.               </div>
  48.               <div class="form-group">
  49.                 <div class="__input-wrapper">
  50.                   <div class="__inner">
  51.                     <label for="email">
  52.                       <span class="label-text">Adresse courriel (ex : nom@domaine.fr) <span class="colorRed">*</span></span>
  53.                     </label>
  54.                     <input class="form-control" id="email" autocomplete="email" name="email" placeholder="" required="" type="email">
  55.                   </div>
  56.                 </div>
  57.               </div>
  58.               <div class="form-group">
  59.                 <div class="__input-wrapper _select _label-hidden">
  60.                   <div class="__inner" style="position:relative;">
  61.                     <label for="selectCategory">
  62.                       <span class="label-text">Thématique concernée <span class="colorRed">*</span></span>
  63.                     </label>
  64.                     <select name="thematique" class="form-control" id="selectCategory" required>
  65.                     <option value=>CHOISIR UNE THÉMATIQUE</option>
  66.                     <option {% if chosen_thematique is defined and chosen_thematique == "Difficulté d'utilisation, problème technique sur le site" %}selected {% endif %} value="9">Difficulté d'utilisation, problème technique sur le site</option>
  67.                     {% for thematique in thematiques %}
  68.                       {% if thematique.id != 9 %}
  69.                         <option {% if chosen_thematique is defined and chosen_thematique == thematique.name %} selected {% endif %} value="{{thematique.id}}">{{ thematique.name }}</option>
  70.                       {% endif %}
  71.                     {% endfor %}
  72.                     </select>
  73.                   </div>
  74.                 </div>
  75.               </div>
  76.               <div class="form-group">
  77.                 <div class="__input-wrapper _textarea">
  78.                   <div class="__inner">
  79.                     <label for="textarea">
  80.                       <span class="label-text">Votre Message <span class="colorRed">*</span></span>
  81.                       :</label>
  82.                     <textarea class="form-control" id="textarea" name="message" placeholder="" required="" rows="3" autocomplete="off"></textarea>
  83.                   </div>
  84.                 </div>
  85.               </div>
  86.               <div class="form-group" data-form-validation-step-file-wrapper="">
  87.                 <div class="inputFileWrapper">
  88.                   <input accept="image/jpeg,image/gif,image/png,.pdf,.doc,.odt" class="inputfile inputfile-1" id="file" name="file" type="file">
  89.                   <label for="file" class="label-file">
  90.                     <svg aria-hidden="true" focusable="false" data-name="Calque 1" viewBox="0 0 283.5 283.5" xmlns="http://www.w3.org/2000/svg">
  91.                       <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"></path>
  92.                     </svg>
  93.                     <span>
  94.                                         <span class="label-text">Ajouter une pièce jointe</span>
  95.                                         <br>
  96.                                         <span class="fs-xs">5 Mo maximum. JPEG, GIF, PNG, PDF, DOC, ODT</span>
  97.                                     </span>
  98.                   </label>
  99.                 </div>
  100.                 <script>
  101.                   'use strict';;
  102.                   (function (document, window, index) {
  103.                     var inputs = document.querySelectorAll('.inputfile');
  104.                     Array.prototype.forEach.call(inputs, function (input) {
  105.                       var label = input.nextElementSibling,
  106.                         labelVal = label.innerHTML;
  107.                       input.addEventListener('change', function (e) {
  108.                         var fileName = '';
  109.                         if (this.files && this.files.length > 1)
  110.                           fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length);
  111.                         else
  112.                           fileName = e.target.value.split('\\').pop();
  116.                         if (fileName)
  117.                           label.querySelector('span').innerHTML = fileName;
  118.                         else
  119.                           label.innerHTML = labelVal;
  123.                       });
  124.                   // Firefox bug fix
  125.                       input.addEventListener('focus', function () {
  126.                         input.classList.add('has-focus');
  127.                       });
  128.                       input.addEventListener('blur', function () {
  129.                         input.classList.remove('has-focus');
  130.                       });
  131.                     });
  132.                   }(document, window, 0));
  133.                 </script>
  134.               </div>
  135.               <div class="form-group">
  136.                 <div class="form-check">
  137.                   <input class="form-check-input" id="mentions" type="checkbox" value="mentions" name="mentions" placeholder="" required="">
  138.                   <label class="form-check-label" for="mentions">
  139.                     <span class="d-none label-text">J'accepte les <a href="https://lenord.fr/mentions-legales">mentions légales</a> du site du Département du Nord</span>
  140.                     J'accepte les <a href="https://lenord.fr/mentions-legales">mentions légales</a> du site du Département du Nord <span class="colorRed">*</span>
  141.                   </label>
  142.                 </div>
  143.               </div>
  144.               <div class="form-group">
  145.                 <div class="form-check">
  146.                   <input class="form-check-input" id="newsletter" type="checkbox" value="newsletter" name="newsletter" placeholder="">
  147.                   <label class="form-check-label" for="newsletter">
  148.                     <span class="d-none label-text">J'accepte de recevoir les informations du Département du Nord</span>
  149.                     J'accepte de recevoir les informations du Département du Nord
  150.                   </label>
  151.                 </div>
  152.               </div>
  153.               <span class="font-italic">Votre adresse de messagerie sera uniquement utilisée pour vous envoyer les lettres d'information du Département du Nord.
  154.                 Vous pouvez à tout moment utiliser le lien de désabonnement intégré dans l'infolettre.
  155.                 <a class="link-external" href="https://lenord.fr/donnees-personnelles#infolettre" target="_blank">
  156.                   En savoir plus sur la gestion de vos données et
  157.                   vos droits.</a>
  158.               </span>
  159.             </div>
  160.             <div class="form-group d-none d-validation-block">
  161.               <input type="hidden" name="nb1" value="{{ caps['valeur1']['valeur'] }}">
  162.               <input type="hidden" name="nb2" value="{{ caps['valeur2']['valeur'] }}">
  163.               <div class="__input-wrapper _captcha">
  164.                 <div class="__inner">
  165.                   <label for="inputCaptcha">Répondez à cette question de vérification avant d’envoyer votre message :
  166.                     Quel est le résultat de ({{ caps['valeur1']['libelle'] }}
  167.                     +
  168.                     {{ caps['valeur2']['libelle'] }})
  169.                     <span class="colorRed d-validation-none">*</span>
  170.                   </label>
  171.                   <input class="form-control _captcha" id="inputCaptcha" type="text" name="captcha" data-focus-content-target="verify">
  172.                 </div>
  173.               </div>
  174.             </div>
  175.             <div class="__buttons-wrapper">
  176.               <button class="btn btnFormSubmit d-none d-validation-inline-block _modify --nordServices" data-form-validation-step-toggle>
  177.                 <span>MODIFIER</span>
  178.               </button>
  179.               <button class="btn btnFormSubmit d-none d-validation-inline-block --nordServices" type="submit">
  180.                 <span>ENVOYER</span>
  181.               </button>
  182.               <button class="btn btnFormSubmit d-validation-none _validation --nordServices" data-form-validation-step-toggle>
  183.                 <span>VALIDER</span>
  184.               </button>
  185.             </div>
  186.           </form>
  187.         </div>
  188.       </div>
  189.     </article>
  190.   </main>
  191. {% endblock %}