templates/contact/index.html.twig line 1

  1. {% extends 'basev2.html.twig' %}
  3. {% block stylesheets %}
  4. {% for r in referencements %}
  5.     <meta name="description" content="{{ r.description }}">
  6. {% endfor %}
  7. <link href="{{ asset('assets/images/favicon.ico') }}" rel="icon">
  8. {% endblock %}
  10. {% block body %}
  12. <div class="header">
  13.     <div class="inner-header flex" id="free-quote">
  14.         <center>
  15.             <div class="section-heading wow fadeIn" data-wow-duration="1s" data-wow-delay="0.3s">
  16.                 <br><br><br><br>
  17.                 <h4 style="color: white;" class="center">Je veux en savoir plus, recontactez-moi !</h4>
  18.                 <br><br>
  19.             </div>
  20.         </center>
  21.     </div>
  23.     <div>
  24.         <svg class="waves" xmlns="http://www.w3.org/2000/svg" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
  25.             <defs>
  26.                 <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
  27.             </defs>
  28.             <g class="parallax">
  29.                 <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7)" />
  30.                 <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
  31.                 <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
  32.                 <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
  33.             </g>
  34.         </svg>
  35.     </div>
  36. </div>
  38. {% for message in app.flashes('success') %}
  39. <div class="alert me-4 mt-4 colororange">
  40.     <center class="center">{{ message }}</center>
  41. </div>
  42. {% endfor %}
  44. <div id="contact" class="contact-us section mb-150">
  45.     <div class="container">
  46.         <div class="row">
  47.             <div class="col-lg-12 wow fadeInUp" data-wow-duration="0.5s" data-wow-delay="0.25s">
  49.                 {{ form_start(form, {'attr': {'id': 'contact-form', 'enctype': 'multipart/form-data'}}) }}
  50.                 <div class="row">
  52.                     <div class="col-lg-12">
  53.                         <div class="contact-dec">
  54.                             <img src="{{ asset('assets/images/nvimage/contact-FERGUSS.png') }}" alt="">
  55.                         </div>
  56.                     </div>
  58.                     <div class="col-lg-5">
  59.                         <div id="map">
  60.                             <iframe src="https://maps.google.com/maps?width=100%25&amp;height=600&amp;hl=fr&amp;q=8%20zac%20la%20donniere+(Nom%20de%20votre%20%C3%A9tablissement)&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed" width="100%" height="1000px" frameborder="0" style="border:0" allowfullscreen></iframe>
  61.                         </div>
  62.                     </div>
  64.                     <div class="col-lg-7">
  65.                         <div class="fill-form">
  66.                             <div class="row">
  67.                                 <div class="col-lg-12"><fieldset>{{ form_row(form.email) }}</fieldset></div>
  68.                                 <div class="col-lg-6"><fieldset>{{ form_row(form.Nom) }}</fieldset></div>
  69.                                 <div class="col-lg-6"><fieldset>{{ form_row(form.prenom, {'label': 'Prénom'}) }}</fieldset></div>
  70.                                 <div class="col-lg-12"><fieldset>{{ form_row(form.sujet) }}</fieldset></div>
  71.                                 <div class="col-lg-12"><fieldset>{{ form_row(form.message) }}</fieldset></div>
  73.                                 <div class="row">
  74.                                     <div class="col-lg-2"></div>
  75.                                     <div class="col-lg-8">{{ form_row(form.extension) }}</div>
  76.                                 </div>
  78.                                 {# Champ reCAPTCHA hidden #}
  79.                                 {{ form_widget(form.recaptchaToken) }}
  81.                                 <fieldset>{{ form_row(form.submit) }}</fieldset>
  82.                             </div>
  83.                         </div>
  84.                     </div>
  86.                 </div>
  87.                 {{ form_end(form) }}
  89.             </div>
  90.         </div>
  91.     </div>
  92. </div>
  94. {% endblock %}
  96. {% block js_scripts %}
  97. {{ parent() }}
  98. <script src="https://www.google.com/recaptcha/enterprise.js?render={{ google_sitekey }}"></script>
  99. <script>
  100. document.addEventListener('DOMContentLoaded', function () {
  101.     const form = document.getElementById('contact-form');
  102.     if (!form) return;
  104.     form.addEventListener('submit', function (e) {
  105.         e.preventDefault();
  107.         const hiddenInput = document.querySelector('input[name="{{ form.recaptchaToken.vars.full_name }}"]');
  108.         if (!hiddenInput) {
  109.             console.error('[reCAPTCHA] Champ recaptchaToken introuvable.');
  110.             alert('Erreur : reCAPTCHA non initialisé.');
  111.             return;
  112.         }
  114.         if (typeof grecaptcha === 'undefined' || typeof grecaptcha.enterprise === 'undefined') {
  115.             console.error('[reCAPTCHA] grecaptcha.enterprise non chargé.');
  116.             alert('Erreur : reCAPTCHA non chargé.');
  117.             return;
  118.         }
  120.         grecaptcha.enterprise.ready(function () {
  121.             grecaptcha.enterprise.execute('{{ google_sitekey }}', { action: 'LOGIN' })
  122.             .then(function (token) {
  123.                 hiddenInput.value = token; // ✅ token injecté
  124.                 form.submit();             // submit réel après token
  125.             })
  126.             .catch(function (error) {
  127.                 console.error('[reCAPTCHA] Erreur lors de l’exécution :', error);
  128.                 alert('Erreur lors de la validation reCAPTCHA.');
  129.             });
  130.         });
  131.     });
  132. });
  133. </script>
  134. {% endblock %}