templates/app/contact.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% set side_nav = 'contact' %}
  4. {% block body %}
  6. <section class="contact-section">
  7.     <div class="auto-container">
  8.         
  9.         {# Confirmation Box (Initially Hidden) #}
  10.         <div class="col-lg-6 col-md-12 col-sm-12" style="display:none;" id="confirmationBox">
  11.             <div class="message-box with-icon success">
  12.                 <div class="icon-box"><span class="icon fa fa-check"></span></div>
  13.                 <h4>Confirmation Box</h4>
  14.                 <p>Vestibulum sodales pellentesque nibh quis</p>
  15.                 <button class="close-btn" onclick="document.getElementById('confirmationBox').style.display='none';"><span class="fa fa-times"></span></button>
  16.             </div>
  17.         </div>
  19.         <div class="sec-title text-center">
  20.             <div class="divider"><img src="images/icons/divider_1.png" alt=""></div>
  21.             <h2>Nos Contacts</h2>
  22.             <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nisi et dolor ornare pellentesque. Nullam porttitor,<br> odio id facilisis, mauris dolor rhoncus elit, ultricies nulla eros at dui. In suscipit leo sagittis aliquam.</div>
  23.         </div>
  24.         <div class="row clearfix">
  25.             <div class="column col-xl-3 col-lg-6 col-md-6 col-sm-12">
  26.                 <div class="inner-column">
  27.                     <div class="title">
  28.                         <div class="icon"><img src="images/icons/icon-devider-gray.png" alt=""></div>
  29.                         <h4>Horaires d'ouverture</h4>
  30.                     </div>
  31.                     <ul class="contact-info">
  32.                         <li>Dimanche – Jeudi <br>08:00 – 17:30</li>
  33.                         <li>Vendredi <br>09:00 – 16:00</li>
  34.                         <li>Samedi <br>FERME</li>
  35.                     </ul>
  36.                 </div>
  37.             </div>
  38.             <div class="column col-xl-3 col-lg-6 col-md-6 col-sm-12 order-3">
  39.                 <div class="inner-column">
  40.                     <div class="title">
  41.                         <div class="icon"><img src="images/icons/icon-devider-gray.png" alt=""></div>
  42.                         <h4>Nos Contacts</h4>
  43.                     </div>
  44.                     <ul class="contact-info">
  45.                         <li>785 Carriage Drive, Jacksonville Beach, FL</li>
  46.                         <li><a href="tel:12032842818">+1 203-284-2818</a><br><a href="tel:12032842919">+1 203-284-2919</a></li>
  47.                         <li><a href="mailto:info@your-site.com">info@your-site.com</a><br> <a href="mailto:sales@your-site.com">sales@your-site.com</a></li>
  48.                     </ul>
  49.                 </div>
  50.             </div>
  51.             <!-- Form Column -->
  52.             <div class="column col-xl-6 col-lg-12 col-md-12 col-sm-12">
  53.                 <div class="inner-column">
  54.                     <div class="title">
  55.                         <div class="icon"><img src="images/icons/icon-devider-gray.png" alt=""></div>
  56.                         <h4>Envoyez un message</h4>
  57.                     </div>
  58.                     <div class="contact-form">
  59.                         <form action="{{path('contact')}}" method="post">
  60.                             <div class="form-group">
  61.                                 <div class="response"></div>
  62.                             </div>
  63.                             <div class="form-group">
  64.                                 <input type="text" name="username" class="username" placeholder="Nom et prénom *">
  65.                             </div>
  66.                             <div class="form-group">
  67.                                 <input type="email" name="email" class="email" placeholder="Adresse mail *">
  68.                             </div>
  69.                             
  70.                             <div class="form-group">
  71.                                 <textarea name="contact_message" placeholder="Méssage"></textarea>
  72.                             </div>
  73.                             
  74.                             <div class="form-group">
  75.                                 <button class="theme-btn" type="submit" id="submit" name="submit-form">Envoyez</button>
  76.                             </div>
  77.                         </form>
  78.                     </div>
  79.                 </div>
  80.             </div>
  81.         </div>
  82.     </div>
  83. </section>
  84. <!--End Contact Section -->
  85. <!-- Map Section -->
  86. <section class="map-section">
  87.     <iframe id="gmap_canvas" src="https://maps.google.com/maps?q=36.1512776,1.3234373&z=15&ie=UTF8&iwloc=&output=embed"></iframe>
  88. </section>
  89. <!-- End Map Section -->
  90. <!-- End Blog Showcase -->
  91. <script>
  92.     document.getElementById('contactForm').addEventListener('submit', function(event) {
  93.         event.preventDefault();
  95.         var formData = new FormData(this);
  96.         fetch('{{ path('contact') }}', {
  97.             method: 'POST',
  98.             body: formData
  99.         })
  100.         .then(response => response.json())
  101.         .then(data => {
  102.             if (data.success) {
  103.                 // Show confirmation box
  104.                 document.getElementById('confirmationBox').style.display = 'block';
  105.             } else {
  106.                 // Handle error
  107.                 alert('Failed to send email. Please try again.');
  108.             }
  109.         })
  110.         .catch(error => {
  111.             console.error('Error:', error);
  112.             alert('An error occurred. Please try again.');
  113.         });
  114.     });
  115. </script>
  116. {% endblock %}