templates/defaut/contact.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %} {% endblock %}
  6.  {% block head_css %}
  7.      {{ parent() }}
  9. <style>
  11.     .image {
  12.         opacity: 1;
  13.         display: block;
  14.         width: 100%;
  15.         height: auto;
  16.         transition: .5s ease;
  17.         backface-visibility: hidden;
  18.     }
  20.     .middle {
  21.         transition: .5s ease;
  22.         opacity: 0;
  23.         position: absolute;
  24.         top: 50%;
  25.         left: 50%;
  26.         transform: translate(-50%, -50%);
  27.         -ms-transform: translate(-50%, -50%);
  28.         text-align: center;
  29.     }
  31.     .shadow:hover .image {
  32.         opacity: 0.3;
  33.     }
  35.     .shadow:hover .middle {
  36.         opacity: 1;
  37.     }
  39.     .text {
  40.         background-color: #04AA6D;
  41.         color: white;
  42.         font-size: 16px;
  43.         padding: 16px 32px;
  44.     }
  45. </style>
  48.  {% endblock %}
  50. {% block body %}
  51.     <!-- =======================
  52. Page Banner START -->
  53.     <section class="pt-5 pb-0" style="background-image:url(assets/images/element/map.svg); background-position: center left; background-size: cover;">
  54.         <div class="container">
  55.             <div class="row">
  56.                 <div class="col-lg-8 col-xl-6 text-center mx-auto">
  57.                     <!-- Title -->
  58.                     <h6 class="text-primary">Nous contacter</h6>
  59.                     <h1 class="mb-4"></h1>
  60.                 </div>
  61.                 {% include 'message_flash.html.twig' %}
  62.             </div>
  64.             <!-- Contact info box -->
  65.             <div class="row g-4 g-md-5 mt-0 mt-lg-3">
  67.             </div>
  68.         </div>
  69.     </section>
  70.     <!-- =======================
  71.     Page Banner END -->
  74.     <!-- =======================
  75. Image and contact form START -->
  76.     <section >
  77.         <div class="container">
  78.             <div class="row g-4 g-lg-0 align-items-center">
  80.                 <div class="col-md-6 align-items-center text-center">
  81.                     <!-- Image -->
  82.                     <img src="assets/images/element/contact.svg" class="h-400px" alt="">
  84.                     <!-- Contact form END -->
  87.                 </div>
  89.                 <!-- Contact form START -->
  90.                 <div class="col-md-6">
  91.                     <!-- Title -->
  92.                     <h2 class="mt-4 mt-md-0">Nous contacter</h2>
  93.                     <p> Veuillez utiliser ce formulaire pour nous contacter. N'oubliez pas de consulter l'aide avant toute demande. </p>
  97.                     {{ form_start(formulaire, {'attr': {'id': 'form_contact'}}) }}
  98.                     <div id="liste_erreurs" class="my-custom-class-for-errors">
  99.                         {{ form_errors(formulaire) }}
  100.                     </div>
  102.                     <input type="hidden" name="token" value="{{ csrf_token('delete-item') }}"/>
  103.                         <!-- Name -->
  104.                         <div class="mb-4 bg-light-input">
  105.                             {{ form_label(formulaire.objet) }} :  <br>
  106.                             <div class="form-error">
  107.                                 {{ form_errors(formulaire.objet) }}
  108.                             </div>
  109.                             {{ form_widget(formulaire.objet, {'attr': {'class': 'form-control'} }) }}
  110.                         </div>
  111.                         <!-- Email -->
  112.                         <div class="mb-4 bg-light-input">
  113.                             {{ form_label(formulaire.email) }} * :  <br>
  114.                             <div class="form-error">
  115.                                 {{ form_errors(formulaire.email) }}
  116.                             </div>
  117.                             {{ form_widget(formulaire.email, {'attr': {'class': 'form-control'} }) }}
  118.                         </div>
  119.                         <!-- Message -->
  120.                         <div class="mb-4 bg-light-input">
  121.                              {{ form_label(formulaire.content) }} * :  <br>
  122.                             <div class="form-error">
  123.                                 {{ form_errors(formulaire.content) }}
  124.                             </div>
  125.                             {{ form_widget(formulaire.content, {'attr': {'class': 'form-control', 'rows': 10} }) }}
  126.                         </div>
  127.                         <!-- Button -->
  128.                         <div class="d-grid">
  129.                             <button class="btn btn-lg btn-primary mb-0" type="submit" id="envoyer-contact">Envoyer le message</button>
  130.                         </div>
  131.                         {{ form_rest(formulaire) }}
  132.                         {{ form_end(formulaire) }}
  133.                 </div>
  135.             </div>
  136.         </div>
  137.     </section>
  138.     <!-- =======================
  139.     Image and contact form END -->
  140. {% endblock %}
  141. {% block head_js %}
  142.     {{ parent() }}
  144.     <script src="https://www.google.com/recaptcha/api.js?render=6LcE0wgkAAAAAHHujAJRKPpFPszzofFDmunk4bcm"></script>
  145.     <script>
  146.         $('#envoyer-contact').click(function (e) {
  147.             e.preventDefault();
  148.             alert(e);
  149.             grecaptcha.ready(function () {
  150.                 grecaptcha.execute('6LcE0wgkAAAAAHHujAJRKPpFPszzofFDmunk4bcm', { action: 'contact' }).then(function (token) {
  151.                     var recaptchaResponse = document.getElementById('contact_jeton');
  152.                     recaptchaResponse.value = token;
  153.                     $('#form_contact').unbind('submit').submit();
  154.                 });
  155.             });
  157.         });
  158.     </script>
  159.     <script type="text/javascript">
  160.         $(document).ready(function () {
  161.             $('body').addClass('bd-contact');
  162.             {% if erreurs %}
  163.             location.hash = "#" + 'liste_erreurs';
  164.             {% endif %}
  165.         });
  166.     </script>
  167. {% endblock %}