templates/Default/contacts.html.twig line 1

  1. {% set title = 'contactez-nous' %}
  2. {% set iconColor = "#1F4878" %}
  3. {% set titleColor = "#ffffff" %}
  4. {% set bgColor = "#81B0B1" %}
  5. {% set menu = 'contacts' %}
  6. {% extends 'Default/base.html.twig' %}
  7. {% block content %}
  8. <div id="contacts" class='{{desktop("")}} {{mobile("")}}'>
  9.     <div class="fill hoverflow {{desktop('gpadding flex row vt-80-in')}} {{mobile('hz-20-in vt-30-in')}}">
  10.         <div class="{{desktop('right-80')}}">
  11.             {%for notice in app.session.flashBag.get('notice') %}
  12.             <div class='padding-10 adapt bg-gray alt-2 bottom-20'><p class="bold text-center center notice" style="color : RGB(16,135,87);">{{notice|nl2br}}</p></div>
  13.             {% endfor %}
  14.             {%for error in app.session.flashBag.get('error') %}
  15.             <div class='padding-10 adapt bg-gray alt-2 bottom-20'><p class="error bold text-center center notice">{{error|nl2br}}</p></div>
  16.             {% endfor %}
  17.             {% if form is defined and form.vars.errors|length %}
  18.             <div class='padding-10 adapt bg-gray alt-2 bottom-20'><p class="error bold text-center center notice">{{ form_errors(form) }}</p></div>
  19.             {% endif %}
  20.             {% if error is defined and error %}
  21.             <div class='padding-10 adapt bg-gray alt-2 bottom-20'><p class="error center notice">{{ error|nl2br }}</p></div>
  22.             {% endif %}
  23.             
  24.             {{form_start(form, {'attr':{'class':'relative w100 '~desktop("vt-40")~mobile("bottom-20-in")}})}}
  25.                 {% set class = 'relative w100 border border-1x border-success semibold success '~desktop("h4 vt-20-in hz-20-in ")~mobile("p vt-10-in hz-10-in") %}
  26.                 {% set divClass = ''~desktop("half-20 bottom-40 ")~mobile("bottom-20 ") %}
  27.                 <div class='{{desktop("flex row space")}} w100'>
  28.                     <div class='w100 white {{desktop("flex row space wrap")}}'>
  29.                         <div class='{{divClass}} {{desktop("")}} {{mobile("w100 bottom-20")}}'>
  30.                             {{form_widget(form.fName,{attr: {class:class, placeholder : "Nom"}})}}
  31.                         </div>
  32.                         <div class='{{divClass}} {{desktop("")}} {{mobile("")}}'>
  33.                             {{form_widget(form.lName,{attr: {class:class, placeholder : "Prénom(s)"}})}}
  34.                         </div>
  35.                         <div class='{{divClass}} {{desktop("")}} {{mobile("")}}'>
  36.                             {{form_widget(form.phone,{attr: {class:class, placeholder : "Numéro de téléphone"}})}}
  37.                         </div>
  38.                         <div class='{{divClass}} {{desktop("")}} {{mobile("")}}'>
  39.                             {{form_widget(form.email,{attr: {class:class, placeholder : "Adresse e-mail"}})}}
  40.                         </div>
  41.                         <div class='w100 {{desktop("bottom-40")}} {{mobile("bottom-20")}}'>
  42.                             {{form_widget(form.object,{attr: {class:class, placeholder : "Objet du message"}})}}
  43.                         </div>
  44.                     </div>
  45.                 </div>
  46.                 <div class=' w100 {{desktop("bottom-40")}} {{mobile("bottom-20")}}'>
  47.                     {{form_widget(form.content,{attr: {class:class, placeholder : "Contenu du message"}})}}
  48.                 </div>
  49.                 <input type="hidden" name="recaptcha_response" id="recaptchaResponse">
  50.                 <div class='flex row middle center {{desktop("radius-10")}} {{mobile("radius-5")}}'>
  51.                     <button type='submit' class='anim-btn relative flex col bg-warning noborder {{desktop("")}} {{mobile("")}}'>
  52.                         <span class="upper semibold white {{desktop('h4 vt-20-in hz-30-in')}} {{mobile('p hz-15-in vt-10-in')}}">Envoyer le message</span>
  53.                     </button>
  54.                 </div>
  55.             {{form_end(form)}}
  56.         </div>
  57.         <div class='{{desktop("flex row third-40")}} {{mobile("w100")}}'>
  58.             <div class='{{desktop("w100")}}'>
  59.                 <div class='bg-success white {{desktop("fill vt-40-in hz-20-in")}} {{mobile("padding-20")}}'>
  60.                     <div class="">
  61.                         <p class="flex row middle bold {{desktop('h3')}} {{mobile('h4')}}">
  62.                             <i class="fa fa-mobile warning {{desktop('h2 right-10')}} {{mobile('h3 right-5')}}"></i>
  63.                             {{os_param("contacts")["phone"]}}</p>
  64.                         <p class="flex row middle bold top-20 {{desktop('h3')}} {{mobile('h4')}}">
  65.                             <i class="fa fa-at warning {{desktop('right-10 h2')}} {{mobile('right-5 h3')}}"></i>
  66.                             {{os_param("contacts")["email"]}}</p>
  67.                     </div>
  68.                     
  69.                     <div class="map w100 hoverflow  {{desktop('top-40 radius-5')}} {{mobile('top-20 radius-2')}}">
  70.                         <iframe class="block fill msquare map-frame noborder" src='https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15861.271032186824!2d2.4010496!3d6.3528937!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xc2a3fbe9d024736e!2sMinist%C3%A8re%20des%20Affaires%20Etrang%C3%A8res!5e0!3m2!1sfr!2sbj!4v1589283943767!5m2!1sfr!2sbj' style="border:0" allowfullscreen="" frameborder="0"></iframe>
  71.                     </div>
  72.                     
  73.                     <div class="{{desktop('top-40')}} {{mobile('top-20')}}">
  74.                         <h3 class="white {{desktop('h2')}} {{mobile('')}}">Nous suivre</h3>
  75.                         <div class="flex row middle success {{desktop('top-10')}} {{mobile('top-5')}}">
  76.                             <a class='warning flex row middle {{desktop("h3")}} {{mobile("p")}}' href='{{os_param("socialmedia")["facebook"]}}' target="_blank" title="Compte Facebook"><i class="fab fa-facebook-square"></i></a>
  77.                             <a class='warning flex row middle {{desktop("h3 left-15")}} {{mobile("p left-5")}}' href='{{os_param("socialmedia")["twitter"]}}' target="_blank" title="Compte twitter"><i class="fab fa-twitter"></i></a>
  78.                             <a class='warning flex row middle {{desktop("h3 left-15")}} {{mobile(" p left-5")}}' href='{{os_param("socialmedia")["linkedin"]}}' target="_blank" title="Compte linkedin"><i class="fab fa-linkedin"></i></a>
  79.                         </div>
  80.                     </div>
  81.                 </div>
  82.             </div>
  83.         </div>
  84.     </div>
  85. </div>
  86. {% endblock %}
  87. {% block js %}
  88. <!-- Google reCAPTCHA v3 -->
  89. <script src="https://www.google.com/recaptcha/api.js?render=6Lf0SU8gAAAAAOvVHp1FlmccKy_3kmvUT43L32qq"></script>
  90. <script>
  91. $(document).ready(function(){
  92.     var key = '6Lf0SU8gAAAAAOvVHp1FlmccKy_3kmvUT43L32qq';
  93.     grecaptcha.ready(function() {
  94.         grecaptcha.execute(key, {action: $(this).attr('action')}).then(function(token){
  95.             var recaptchaResponse = document.getElementById('recaptchaResponse');
  96.             recaptchaResponse.value = token;
  97.         });
  98.     });
  99. });
  100. </script>
  101. {% endblock %}