templates/contact/contact.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %} {% block title %}Contactez-nous{% endblock %} {% block body %}
  3. <main class="contact">
  4.     <!--==========Section title==========-->
  5.     <section>
  6.         <!-- Contact Start -->
  7.         <div class="container-fluid overflow-hidden px-lg-0">
  8.             <div class="container pt-5 px-lg-0">
  9.                 <div class="row g-5 mx-lg-0">
  10.                     <div class="col-md-8 contact-form wow fadeInDown" data-wow-delay="0.1s">
  11.                         <h1 class="mb-2 text-primary fw-bold">Nous-contactez !</h1>
  12.                         <p class="mb-4 text-danger fw-bold">Du lundi au vendredi : 8h00 – 18h00</a>
  13.                         </p>
  14.                         {# <button class="btn btn-primary text-white btn-spiner" type="button" disabled>
  15.                             <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  16.                             Traitement des données en cours...
  17.                         </button> #}
  18.                         <form action="{{ path('app_contact') }}" method="POST" id="contactForm" class="contactForm" name="contactForm">
  19.                             <div class="row g-3">
  20.                                 <div class="col-md-6">
  21.                                     <div class="">
  22.                                         <label for="name" class="text-primary">Nom</label>
  23.                                         <input type="text" name="name" class="form-control" id="name" placeholder="Votre nom">
  24.                                     </div>
  25.                                 </div>
  26.                                 <div class="col-md-6">
  27.                                     <div class="">
  28.                                         <label for="prenom" class="text-primary">Prénom</label>
  29.                                         <input type="prenom" name="prenom" class="form-control" id="prenom" placeeholder="Votre prénom">
  30.                                     </div>
  31.                                 </div>
  32.                                 <div class="col-md-6">
  33.                                     <div class="">
  34.                                         <label for="email" class="text-primary">Email</label>
  35.                                         <input type="email" name="email" class="form-control" id="email" placeholder="Adresse email">
  36.                                     </div>
  37.                                 </div>
  38.                                 <div class="col-md-6">
  39.                                     <div class="">
  40.                                         <label for="phone" class="text-primary">Téléphone</label>
  41.                                         <input type="text" name="phone" class="form-control" id="phone" placeholder="N° téléphone">
  42.                                     </div>
  43.                                 </div>
  44.                                 <div class="col-12">
  45.                                     <div class="">
  46.                                         <label for="ville" class="text-primary">Ville</label>
  47.                                         <input type="text" name="ville" class="form-control" id="ville" placeholder="Ville de résidence">
  48.                                     </div>
  49.                                 </div>
  50.                                 <div class="col-12">
  51.                                     <div class="">
  52.                                         <label for="objet" class="text-primary">Objet</label>
  53.                                         <input type="text" name="objet" class="form-control" id="objet" placeholder="Objet du message">
  54.                                     </div>
  55.                                 </div>
  56.                                 <div class="col-12">
  57.                                     <div class="">
  58.                                         <label for="message" class="text-primary">Message</label>
  59.                                         <textarea class="form-control" name="message" id="message" style="height: 50%"></textarea>
  60.                                     </div>
  61.                                 </div>
  62.                                 <div class="col-md-12">
  63.                                     <div class="form-group">
  64.                                         <div class="g-recaptcha mt-2 w-100" data-sitekey="6Leu25khAAAAAEpiNstG2FzJR6VvDLM4znabOdT_"></div>
  65.                                     </div>
  66.                                 </div>
  67.                                 <div class="col-12">
  68.                                     <div id="form-message-warning" class="mb-2"></div>
  69.                                     <div id="form-message-success">
  70.                                         <p class="mb-0"> Votre message a bien eté envoyé, merci!</p>
  71.                                     </div>
  72.                                     <div class="">
  73.                                         <p class="robot mb-0 text-danger fw-bold"></p>
  74.                                     </div>
  75.                                     <div class="submitting text-success"></div>
  76.                                 </div>
  77.                                 <div class="col-12">
  78.                                     <button class="btn btn-primary w-100" type="submit">Envoyer le message</button>
  79.                                 </div>
  80.                             </div>
  81.                         </form>
  82.                     </div>
  84.                     <div class="col-md-4 pe-lg-0 wow fadeInRight" data-wow-delay="0.1s">
  85.                         <div class="position-relative h-100">
  86.                             <iframe class="position-absolute w-100 h-100" style="object-fit: cover;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3001156.4288297426!2d-78.01371936852176!3d42.72876761954724!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4ccc4bf0f123a5a9%3A0xddcfc6c1de189567!2sNew%20York%2C%20USA!5e0!3m2!1sen!2sbd!4v1603794290143!5m2!1sen!2sbd"
  87.                                 frameborder="0" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
  88.                         </div>
  89.                     </div>
  90.                 </div>
  91.             </div>
  92.         </div>
  93.         <!-- Contact End -->
  94.     </section>
  95. </main>
  96. <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  97. <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
  98. {% endblock %}