templates/snippets/contact.html.twig line 1

Open in your IDE?
  3. {% extends "layout-snippets.html.twig" %}
  5. {% block snippets %}
  8. <section id="contact">
  9.   <div class="apk-contact-snippets">
  10.     <div class="uk-container apk-container-1400">
  11.       <div class="apk-contact-container">
  12.         <div class="uk-child-width-1-2@m" uk-grid>
  14.           {# editmode pour le titre #}
  15.           {% if editmode %}
  16.           <div>
  17.             <h2 class="uk-h2">
  18.                 {{ pimcore_textarea("content-title",{
  19.                     "nl2br" : true,
  20.                     "placeholder" : 'Titre de la section'
  21.                 }) }}
  22.             </h2>
  24.             <p>
  25.               {{ pimcore_textarea("content-text",{
  26.                   "nl2br" : true,
  27.                   "placeholder" : 'Texte'
  28.               }) }}
  29.             </p>
  30.           </div>
  32.           {% else %}
  34.           <div>
  35.             <h2 class="uk-h2">{{ pimcore_textarea("content-title",{"nl2br" : true}) }}</h2>
  37.             <p>{{ pimcore_textarea("content-text",{"nl2br" : true}) }}</p>
  39.             {% if document.property('companyPhone') %}
  40.             <div class="apk-phone">
  41.                 <a href="tel:{{ convert_phone_to_url(document.getProperty('companyPhone')) }}" target="_blank">
  42.                     <img uk-svg wdth="15" height="15" src="/static/img/pictos/tel.svg" alt="{{ "Tel"|trans }}">
  43.                     {{ document.property('companyPhone') }}
  44.                 </a>
  45.             </div>
  46.             {% endif %}
  48.             {% if document.property('companyMail') %}
  49.             <div class="apk-mail uk-margin-top">
  50.                 {{ email_obfuscator_svg(document.property('companyMail'))|raw }}
  51.             </div>
  52.             {% endif %}
  54.             <div class="apk-adresse uk-margin-top">
  55.                 <a href="{{ document.getProperty('companyAdresseUrl') }}" target="_blank">
  56.                     <img uk-svg wdth="15" height="15" src="/static/img/pictos/position.svg" alt="{{ "Adresse"|trans }}">
  57.                     <span>{{ document.property('companyAdresse') }}</span>
  58.                 </a>
  59.             </div>
  60.           </div>
  62.           {% endif %}
  63.           
  64.           <div>
  65.             <div class="apk-contact-snippets-container">
  67.               {% if formStatus == "required-empty" %}
  68.                 
  69.               <div class="uk-alert-danger" uk-alert>
  70.                 <a class="uk-alert-close" uk-close></a>
  71.                 <p>{{ "Veuillez remplir tout les champs requis. (*)"|trans }}</p>
  72.               </div>
  74.               {% elseif formStatus == "invalid-email" %}
  76.               <div class="uk-alert-danger" uk-alert>
  77.                 <a class="uk-alert-close" uk-close></a>
  78.                 <p>{{ "Votre adresse email est invalide. Merci de recommencer."|trans }}</p>
  79.               </div>
  81.               {% elseif formStatus == "robot" %}
  83.               <div class="uk-alert-danger" uk-alert>
  84.                 <a class="uk-alert-close" uk-close></a>
  85.                 <p>{{ "Une erreur Recaptcha est survenue. Merci de recommencer."|trans }}</p>
  86.               </div>
  88.               {% endif %}
  90.               {% if formStatus != "success" %}
  92.               {{ form_start(form, {'action': '#contact', 'method': 'POST'}) }}
  93.               <div uk-grid>
  94.                   <div class="uk-width-1-2@s uk-margin-small-top">
  95.                       {{ form_row(form.lastname, { 'attr': {'class' : 'uk-input'}}) }}
  96.                   </div>
  97.                   <div class="uk-width-1-2@s uk-margin-small-top">
  98.                       {{ form_row(form.firstname, { 'attr': {'class' : 'uk-input'}}) }}
  99.                   </div>
  100.                   <div class="uk-width-1-2@s uk-margin-top">
  101.                       {{ form_row(form.email, { 'attr': {'class' : 'uk-input'}}) }}
  102.                   </div>
  103.                   <div class="uk-width-1-2@s uk-margin-top">
  104.                       {{ form_row(form.phone, { 'attr': {'class' : 'uk-input'}}) }}
  105.                   </div>
  107.                   <div class="uk-width-1-1 uk-margin-top">
  108.                       {{ form_row(form.message, { 'attr': {'class' : 'uk-textarea'}}) }}
  109.                   </div>
  110.                   <div class="uk-width-1-1 apk-conscent uk-margin-top">
  111.                       <div class="uk-grid-small" uk-grid>
  112.                           <div class="uk-width-auto">{{ form_widget(form.gdpr, { 'attr': {'class' : 'uk-checkbox'}}) }}</div>
  113.                           <div class="uk-width-expand"><label id="contact_form_gdpr_label" for="contact_form_gdpr">{{ "contact.conscent"|trans }}</label></div>
  114.                       </div>
  115.                   </div>
  116.                   {{ form_widget(form.recaptcha) }}
  117.                   <div class="uk-width-1-1 uk-margin-small-top">
  118.                       <div class="uk-margin-top uk-text-center">
  119.                           {{ form_widget(form.submit) }}
  120.                       </div>
  121.                   </div>
  122.               </div>
  123.               {{ form_end(form) }}
  125.               {% else %}
  127.               <div class="uk-alert-success" uk-alert>
  128.                 <a class="uk-alert-close" uk-close></a>
  129.                 <p>{{ "Message envoyé. Nous vous recontacterons dans les plus brefs délais."|trans }}</p>
  130.               </div>
  132.               {% endif %}
  134.             </div>
  135.           </div>
  136.           
  137.         </div>
  138.       </div>
  139.     </div>
  140.   </div>
  141. </section>
  144. {% set recaptchaKeyPublic = pimcore_website_config('recaptchaKeyPublic') %}
  146. <script src="https://www.google.com/recaptcha/api.js?onload=onloadRecaptchaCallback&render={{ recaptchaKeyPublic }}"></script>
  148. <script>
  149.     function onloadRecaptchaCallback(){
  150.       grecaptcha.ready(function() {
  151.         grecaptcha.execute('{{ recaptchaKeyPublic }}', {action: 'contact'}).then(function(token) {
  152.           //alert('recaptcha is loaded');
  153.           var recaptcha = document.getElementById('contact_form_recaptcha');
  154.           recaptcha.value = token;
  155.         });
  156.       });
  157.     }
  158. </script>
  160. {% endblock snippets %}