templates/page/contact.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block banner %}{% endblock %}
  3. {% block main %}
  4. <!-- breadcrumb-area -->
  5. <section class=" breadcrumb__area breadcrumb__bg">
  6.     <div class="container mt-50 pb-50">
  7.         <div class="row">
  8.             <div class="col-lg-6 pt-50">
  9.                 <div class="breadcrumb__content">
  10.                     <h2 class="title pt-50 text-white">Contact</h2>
  11.                 </div>
  12.             </div>
  13.         </div>
  14.     </div>
  15. </section>
  16. <!-- breadcrumb-area-end -->
  17. <!-- about-area -->
  18. <section class="about__area-four" style="border:#cbcbcb solid 1px">
  19.     <div class="container">
  20.         <div class="row align-items-center justify-content-center">
  21.             <div class="col-lg-6 col-md-9 col-sm-10">
  22.                 <div class="contact__content">
  23.                     <div class="section-title mb-35">
  24.                         <h2 class="title"> Contactez notre équipe !</h2>
  25.                         <p> pour une prise en charge rapide de votre bilan comptable.</p>
  26.                     </div>
  27.                     <div class="contact__info">
  28.                         <ul class="list-wrap">
  29.                             <li>
  30.                                 <div class="icon">
  31.                                     <i class="flaticon-pin"></i>
  32.                                 </div>
  33.                                 <div class="content">
  34.                                     <h4 class="title">Adresse</h4>
  35.                                     <p>3 Rue Robert SCHUMAN 85170 DOMPIERRE-SUR-YON, FRANCE</p>
  36.                                 </div>
  37.                             </li>
  38.                             <li>
  39.                                 <div class="icon">
  40.                                     <i class="flaticon-phone-call"></i>
  41.                                 </div>
  42.                                 <div class="content">
  43.                                     <h4 class="title">Téléphone</h4>
  44.                                     <a href="tel:0123456789">01 84 80 53 97</a>
  45.                                 </div>
  46.                             </li>
  47.                             <li>
  48.                                 <div class="icon">
  49.                                     <i class="flaticon-mail"></i>
  50.                                 </div>
  51.                                 <div class="content">
  52.                                     <h4 class="title">E-mail</h4>
  53.                                     <a href="mailto:contact@easy-bilan.fr">contact@easy-bilan.fr</a>
  54.                                 </div>
  55.                             </li>
  56.                         </ul>
  57.                     </div>
  58.                 </div>
  59.             </div>
  60.             <div class="col-lg-6">
  61.                 <form class="contact-form submit-ajax-contact-selector" action="/contact" method="POST">
  62.                     <input type="text"  name="name" placeholder="Nom" required>
  63.                     <input type="text"  name="firstname" placeholder="Prénom" required>
  64.                     <input type="email" name="email" placeholder="Email" required>
  65.                     <input type="text"  name="phone" placeholder="Téléphone" required>
  66.                     <textarea             name="message" placeholder="Message" required></textarea>
  67.                     <input type="submit" value="Envoyer">
  68.                 </form>
  69.                 <div class="after-response-msg text-center green"></div>
  70.             </div>
  71.         </div>
  72.     </div>
  73. </section>
  74. <!-- about-area-end -->                            
  76.                         
  77.  {% endblock %}
  78.   {% block javascript %}
  79.     {{ parent() }}
  80.     <script>
  81.     
  82.     //ENVOI DU FORMULAIRE
  84.     document.addEventListener("DOMContentLoaded", function () {
  85.     var form = document.querySelector('.submit-ajax-contact-selector');
  87.     if (form) {
  88.         form.addEventListener('submit', function (e) {
  89.             e.preventDefault();
  91.             var submitButton = form.querySelector('input[type="submit"], button[type="submit"]');
  92.             var originalText = submitButton ? submitButton.value || submitButton.innerText : "Envoyer";
  94.             if (submitButton) {
  95.                 if (submitButton.tagName.toLowerCase() === "input") {
  96.                     submitButton.value = "Envoi en cours...";
  97.                 } else {
  98.                     submitButton.innerText = "Envoi en cours...";
  99.                 }
  100.             }
  102.             var formData = new FormData(form);
  103.             var xhr = new XMLHttpRequest();
  104.             xhr.open('POST', '/contact', true);
  106.             xhr.onreadystatechange = function () {
  107.                 if (xhr.readyState === 4) {
  108.                     if (xhr.status === 200) {
  109.                         let afterDiv = form.querySelector('.after-response-msg');
  110.                         if (afterDiv) {
  111.                             afterDiv.innerHTML = "Votre message a été envoyé, nous vous contacterons très bientôt !";
  112.                         }
  113.                         form.reset();
  114.                     } else {
  115.                         console.error('Erreur de soumission : ' + xhr.responseText);
  116.                         alert('Une erreur est survenue lors de la soumission du formulaire.');
  117.                     }
  119.                     if (submitButton) {
  120.                         if (submitButton.tagName.toLowerCase() === "input") {
  121.                             submitButton.value = originalText;
  122.                         } else {
  123.                             submitButton.innerText = originalText;
  124.                         }
  125.                     }
  126.                 }
  127.             };
  129.             xhr.send(formData);
  130.         });
  131.     }
  132. });
  134.     </script>
  135.  {% endblock %}
  138.