templates/contact/default.html.twig line 1

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