templates/pages/contact.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% set messages = app.flashes('messages') %}
  5. {% block page_contents %}
  6. <section class="section section-page-title bg-gradient py-xl-5 py-4" data-aos='fade-down'>
  7.   <div class="container">
  8.     <div class="row">
  9.       <div class="col-12 text-center text-white">
  10.         <h1 class="page-name font-weight-bold my-2">{% trans %}Contactez-nous{% endtrans %}</h1>
  11.       </div>
  12.     </div>
  13.   </div>
  14. </section>
  16. <section class="section section-form section-form-2 mb-4 mt-4" data-aos='fade-up'>
  17.   <form action="{{ path('contact_page') }}" method="POST">
  18.   <div class="container">
  19.     <div class="row">
  20.       <div class="col-xl-10 mx-auto">
  21.         <div class="row">
  22.           <div class="col-12 mb-3 text-dark-purple">
  23.             {% trans %}Remplissez le formulaire ci-dessous et nous reviendrons rapidement vers vous :{% endtrans %}
  24.           </div>
  26.           <div class="col-lg-3 col-md-6">
  27.             <div class="form-group">
  28.               <input type="text" class="form-control" name="lastName" placeholder="{% trans %}Nom*{% endtrans %}" required>
  29.             </div>
  30.           </div>
  31.           <div class="col-lg-3 col-md-6">
  32.             <div class="form-group">
  33.               <input type="text" class="form-control" name="firstName" placeholder="{% trans %}Prénom*{% endtrans %}" required>
  34.             </div>
  35.           </div>
  36.           <div class="col-lg-3 col-md-6">
  37.             <div class="form-group">
  38.               <input type="text" class="form-control" name="telephone" placeholder="{% trans %}Téléphone*{% endtrans %}" required>
  39.             </div>
  40.           </div>
  41.           <div class="col-lg-3 col-md-6">
  42.             <div class="form-group">
  43.               <input type="text" class="form-control" name="email" placeholder="{% trans %}Email*{% endtrans %}" required>
  44.             </div>
  45.           </div>
  47.           <div class="col-12 mb-3">
  48.             <div class="form-group">
  49.               <div class="font-weight-bold text-dark-purple mb-3">{% trans %}Service à contacter{% endtrans %} <span class="text-orange">*</span></div>
  50.               <div class="form-check mx-0 px-0 mb-2">
  51.                 <div class="custom-control custom-radio">
  52.                     <input type="radio" class="custom-control-input" id="service-1" name="service" value="1" required>
  53.                     <label class="custom-control-label text-dark-purple font-weight-normal" for="service-1">{% trans %}Référent handicap{% endtrans %}</label>
  54.                 </div>
  55.               </div>
  56.               <div class="form-check mx-0 px-0 mb-2">
  57.                 <div class="custom-control custom-radio">
  58.                     <input type="radio" class="custom-control-input" id="service-2" name="service" value="2" required>
  59.                     <label class="custom-control-label text-dark-purple font-weight-normal" for="service-2">{% trans %}Référent diversité et Qualité de Vie (difficulté sociale ou matérielle, prévention des discriminations et du harcèlement...){% endtrans %}</label>
  60.                 </div>
  61.               </div>
  62.               <div class="form-check mx-0 px-0 mb-2">
  63.                 <div class="custom-control custom-radio">
  64.                     <input type="radio" class="custom-control-input" id="service-3" name="service" value="3" required>
  65.                     <label class="custom-control-label text-dark-purple font-weight-normal" for="service-3">{% trans %}Une question sur l'école ou l'inscription à l'ÉSTIAM, demande de visa{% endtrans %}</label>
  66.                 </div>
  67.               </div>
  68.               <div class="form-check mx-0 px-0 mb-2">
  69.                 <div class="custom-control custom-radio">
  70.                     <input type="radio" class="custom-control-input" id="service-4" name="service" value="4" required>
  71.                     <label class="custom-control-label text-dark-purple font-weight-normal" for="service-4">{% trans %}Accompagnement des étudiants vis à vis des entreprises{% endtrans %}</label>
  72.                 </div>
  73.               </div>
  74.               <div class="form-check mx-0 px-0 mb-2">
  75.                 <div class="custom-control custom-radio">
  76.                     <input type="radio" class="custom-control-input" id="service-5" name="service" value="5" required>
  77.                     <label class="custom-control-label text-dark-purple font-weight-normal" for="service-5">{% trans %}Vous souhaitez enseigner chez ÉSTIAM ?{% endtrans %} {% trans %}Déposez votre candidature{% endtrans %} <a href="{{ path('recruitmemt.index')}}" target="_blank" style="color:blue">ici</a>.</label>
  78.                 </div>
  79.               </div>
  80.               <div class="form-check mx-0 px-0 mb-2">
  81.                 <div class="custom-control custom-radio">
  82.                     <input type="radio" class="custom-control-input" id="service-other" name="service" value="other" required>
  83.                     <label class="custom-control-label text-dark-purple font-weight-normal" for="service-other">{% trans %}Autres demandes{% endtrans %}</label>
  84.                 </div>
  85.               </div>
  86.             </div>
  87.             <div class="service-other" style="display: none;">
  88.               <div class="form-header text-dark-purple mb-3">{% trans %}Pour contacter un campus ÉSTIAM, il suffit de sélectionner dans le formulaire suivant la ville qui vous intéresse et de lui adresser le message que vous souhaitez{% endtrans %}.</div>
  89.               <div class="form-group row list-campus-checkbox">
  90.                 {% for campus in campuses %}
  91.                   <div class="col-xl col-lg col-md-3 col-sm-4 col-6">
  92.                     <div class="form-check mx-0 px-0 mb-2">
  93.                       <div class="custom-control custom-radio">
  94.                         <input type="radio" class="custom-control-input" id="campuses-{{ campus.id }}" name="campus" value="{{ campus.id }}">
  95.                         <label class="custom-control-label text-dark-purple font-weight-normal text-nowrap" for="campuses-{{ campus.id }}">{{ campus.name }}</label>
  96.                       </div>
  97.                     </div>
  98.                   </div>
  99.                 {% endfor %}
  100.               </div>
  101.             </div>
  103.             <div class="form-group">
  104.               <input type="text" class="form-control" name="subject" placeholder="{% trans %}Objet*{% endtrans %}" required>
  105.             </div>
  107.             <div class="form-group">
  108.               <textarea class="form-control" name="message" placeholder="{% trans %}Votre message*{% endtrans %}" required></textarea>
  109.             </div>
  111.             {% if captcha_enabled %}
  112.               <div class="captcha-row mb-4 d-flex justify-content-center">
  113.                   <div class="g-recaptcha animate__animated" data-sitekey="{{captcha_key}}"></div>
  114.               </div>
  115.             {% endif %}
  117.             <div class="notification-error mb-4 text-center text-danger font-weight-bold" style="display: none;"></div>
  119.             <div class="text-center form-submit">
  120.               <button type="submit" id="btn-submit" class="link-gradient"><span>{% trans %}Envoyer votre message{% endtrans %}</span><i class="far fa-arrow-right"></i></button>
  121.             </div>
  122.           </div>
  123.         </div>
  124.       </div>
  125.     </div>
  126.   </div>
  127.   </form>
  128. </section>
  130. <div class="modal fade" id="thankYouModal" tabindex="-1" role="dialog" aria-labelledby="thankYouModalTitle" aria-hidden="true">
  131.   <div class="modal-dialog modal-dialog-centered" role="document">
  132.     <div class="modal-content">
  133.       <div class="modal-header">
  134.         <a href="{{ path('home') }}">
  135.           <img src="{{ asset('assets/images/logo.svg') }}" alt="Estiam France">
  136.         </a>
  137.       </div>
  138.       <div class="modal-body">
  139.         <div class="text-center mb-4">
  140.           {% trans %}Merci pour votre message. Il a été envoyé au service concerné. Nous allons vous répondre dès que possible.{% endtrans %}
  141.         </div>
  142.         <div class="text-center">
  143.           <a href="{{ path('home') }}"><button type="button" class="common-btn">{% trans %}Fermer{% endtrans %}</button></a>
  144.         </div>
  145.       </div>
  146.     </div>
  147.   </div>
  148. </div>
  149. {% endblock %}
  150. {% block custom_javascripts %}
  151. <script type="text/javascript">
  152. $(document).ready(function(){
  153.   $("[name='service']").click(function() {
  154.     var radio = $(this).attr('id');
  155.     if(radio == 'service-other') {
  156.         $(".service-other").show();
  157.     } else {
  158.         $(".service-other").hide();
  159.     }
  160.   });
  161.   {% if messages %}
  162.     $('#thankYouModal').modal();
  163.   {% endif %}
  164. });
  165. </script>
  166. {% endblock %}