templates/snippets/newsletter.html.twig line 1

Open in your IDE?
  1. {% extends "layout-snippets.html.twig" %}
  3. {% block snippets %}
  5. <section id="newsletter">
  6.     <div class="apk-newsletter uk-light">
  7.         <div class="uk-container apk-container-800">
  8.             <div class="uk-text-center">
  9.                 <h2 class="uk-h2 c-orange1">{{ pimcore_textarea('newsletterTitle', { 'nl2br' : true}) }}</h2>
  10.             </div>
  12.             {#% set form = formSnippet.form %}
  13.             {% set formStatus = formSnippet.formStatus %}
  14.             {% set formSubmited = formSnippet.formSubmited %}
  15.             
  16.             {% if formSubmited %}
  18.             <div class="uk-alert-success" uk-alert>
  19.             <a class="uk-alert-close" uk-close></a>
  20.             <p>{{ "Message envoyé. Nous vous recontacterons dans les plus brefs délais."|trans }}</p>
  21.             </div>
  23.             {% else %}
  25.                 {% if formStatus == "already" %}
  26.                     <div class="uk-alert-warning" uk-alert>
  27.                     <a class="uk-alert-close" uk-close></a>
  28.                     <p>{{ "Vous êtes déjà inscit à notre newsletter."|trans }}</p>
  29.                     </div>
  30.                 {% endif %}
  32.                 {% if formStatus == "invalid-email" %}
  33.                     <div class="uk-alert-danger" uk-alert>
  34.                     <a class="uk-alert-close" uk-close></a>
  35.                     <p>{{ "Votre adresse email est invalide. Merci de recommencer."|trans }}</p>
  36.                     </div>
  37.                 {% endif %}
  39.                 {% if formStatus == "robot" %}
  40.                     <div class="uk-alert-danger" uk-alert>
  41.                     <a class="uk-alert-close" uk-close></a>
  42.                     <p>{{ "Une erreur Recaptcha est survenue. Merci de recommencer."|trans }}</p>
  43.                     </div>
  44.                 {% endif %#}
  45.                 
  46.                 <div id="sib-form-container" class="sib-form-container">
  47.                     <div id="error-message" class="sib-form-message-panel">
  48.                     <div class="sib-form-message-panel__text sib-form-message-panel__text--center">
  49.                         <svg width="20" height="20" viewBox="0 0 512 512" class="sib-icon sib-notification__icon">
  50.                         <path d="M256 40c118.621 0 216 96.075 216 216 0 119.291-96.61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm-11.49 120h22.979c6.823 0 12.274 5.682 11.99 12.5l-7 168c-.268 6.428-5.556 11.5-11.99 11.5h-8.979c-6.433 0-11.722-5.073-11.99-11.5l-7-168c-.283-6.818 5.167-12.5 11.99-12.5zM256 340c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28z" />
  51.                         </svg>
  52.                         <span class="sib-form-message-panel__inner-text">
  53.                             {{ "Une erreur est survenue. Merci de recommencer."|trans }}
  54.                         </span>
  55.                     </div>
  56.                     </div>
  57.                     <div></div>
  58.                     <div id="success-message" class="sib-form-message-panel" style="font-size:16px; text-align:left; font-family:&quot;Helvetica&quot;, sans-serif; color:#085229; background-color:#e7faf0; border-radius:3px; border-color:#13ce66;">
  59.                     <div class="sib-form-message-panel__text sib-form-message-panel__text--center">
  60.                         <svg width="20" height="20" viewBox="0 0 512 512" class="sib-icon sib-notification__icon">
  61.                         <path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 464c-118.664 0-216-96.055-216-216 0-118.663 96.055-216 216-216 118.664 0 216 96.055 216 216 0 118.663-96.055 216-216 216zm141.63-274.961L217.15 376.071c-4.705 4.667-12.303 4.637-16.97-.068l-85.878-86.572c-4.667-4.705-4.637-12.303.068-16.97l8.52-8.451c4.705-4.667 12.303-4.637 16.97.068l68.976 69.533 163.441-162.13c4.705-4.667 12.303-4.637 16.97.068l8.451 8.52c4.668 4.705 4.637 12.303-.068 16.97z" />
  62.                         </svg>
  63.                         <span class="sib-form-message-panel__inner-text">
  64.                             {{ "Votre inscription à la newsletter a bien été prise en compte."|trans }}
  65.                         </span>
  66.                     </div>
  67.                     </div>
  68.                     <div></div>
  69.                     <div id="sib-container" class="uk-margin-small-top" style="background: transparent; padding: 0;">
  70.                     <form id="sib-form" method="POST" action="https://b19e07cd.sibforms.com/serve/MUIEAJWd1HyzWOBjBOTEmsLJ_ZCSTiGoY_4ggTCFKCCqhLaGUOYdX2ofb3_xmcblLslgwiKztCFavAQLORFMVcNPgjsLdVyGubVCngBDuqfMxzztbhYy37nWWK2DqQMm0z2ma-gLnM06WQctj_44jTaRZOsKn9gj_3Yrzr8RcENx_do-w1D3VbVfLpjOAx3zTMbEnBRIk_LSb2pf" data-type="subscription">
  71.                         <div class="uk-grid-small uk-grid" uk-grid>
  72.                             <div class="uk-width-expand@s">
  73.                                 <div class="sib-input">
  74.                                     <div class="form__entry entry_block">
  75.                                     <div class="form__label-row ">
  77.                                         <div class="entry__field">
  78.                                         <input class="input uk-input" type="text" id="EMAIL" name="EMAIL" autocomplete="off" placeholder="{{'Entrez votre adresse mail...'|trans}}" data-required="true" required />
  79.                                         </div>
  80.                                     </div>
  82.                                     <label class="entry__error entry__error--primary uk-alert-danger" style="background-color: #fef4f6;" uk-alert>
  83.                                     </label>
  84.                                     </div>
  85.                                 </div>
  86.                             </div>
  88.                             <div class="uk-margin-small-top uk-margin-small-bottom uk-width-1-1 uk-flex-last@s">
  89.                                 <div class="sib-optin uk-margin-small-top" data-required="true">
  90.                                     <div class="form__entry entry_mcq">
  91.                                     <div class="form__label-row ">
  92.                                         <div class="entry__choice" style="">
  93.                                         <label>
  94.                                             <input type="checkbox" class="input_replaced uk-checkbox" value="1" id="OPT_IN" name="OPT_IN" required />
  95.                                             <span class="checkbox checkbox_tick_positive"
  96.                                     style="margin-left:"
  97.                                     ></span><span class="apk-conscent"><p>{{ "newsletter.conscent"|trans }}</p><span data-required="*" style="display: inline;" class="entry__label entry__label_optin"></span></span> </label>
  98.                                         </div>
  99.                                     </div>
  100.                                     <label class="entry__error entry__error--primary uk-alert-danger" style="background-color: #fef4f6;" uk-alert>
  101.                                     </label>
  102.                                     </div>
  103.                                 </div>
  104.                             </div>
  106.                             <div class="uk-width-auto@s uk-text-center">
  107.                                 <button class="sib-form-block__button uk-button sib-form-block__button-with-loader uk-button-primary uk-button-large" style="text-align:center; border: 2px solid #EB6919;" form="sib-form" type="submit">
  108.                                     <svg width="20" height="20" class="icon clickable__icon progress-indicator__icon sib-hide-loader-icon" viewBox="0 0 512 512">
  109.                                         <path d="M460.116 373.846l-20.823-12.022c-5.541-3.199-7.54-10.159-4.663-15.874 30.137-59.886 28.343-131.652-5.386-189.946-33.641-58.394-94.896-95.833-161.827-99.676C261.028 55.961 256 50.751 256 44.352V20.309c0-6.904 5.808-12.337 12.703-11.982 83.556 4.306 160.163 50.864 202.11 123.677 42.063 72.696 44.079 162.316 6.031 236.832-3.14 6.148-10.75 8.461-16.728 5.01z" />
  110.                                     </svg>
  111.                                     {{ "S'inscrire"|trans }}
  112.                                 </button>
  113.                             </div>
  114.                         </div>
  117.                         <input type="text" name="email_address_check" value="" class="input--hidden">
  118.                         <input type="hidden" name="locale" value="fr">
  119.                     </form>
  120.                     </div>
  121.                 </div>
  122.             {#% endif %#}
  123.         </div>
  124.     </div>
  125. </section>
  127. {% set recaptchaKeyPublic = pimcore_website_config('recaptchaKeyPublic') %}
  129. {#
  130. <script src="https://www.google.com/recaptcha/api.js?onload=onloadRecaptchaCallback&render={{ recaptchaKeyPublic }}"></script>
  131. #}
  133. <script>
  134.     //On load le style avec du JS
  136.     // Get HTML head element
  137.     var head = document.getElementsByTagName('HEAD')[0];
  139.     // Create new link Element
  140.     var link = document.createElement('link');
  142.     // set the attributes for link element
  143.     link.rel = 'stylesheet';
  144.     
  145.     link.type = 'text/css';
  146.     
  147.     link.href = 'https://sibforms.com/forms/end-form/build/sib-styles.css';
  149.     // Append link element to HTML head
  150.     head.appendChild(link);
  152.     /*
  153.     function onloadRecaptchaCallback(){
  154.         grecaptcha.ready(function() {
  155.             grecaptcha.execute('{{ recaptchaKeyPublic }}', {action: 'newsletter'}).then(function(token) {
  156.             //alert('recaptcha is loaded');
  157.             var recaptcha = document.getElementById('newsletter_form_recaptcha');
  158.             recaptcha.value = token;
  159.             });
  160.         });
  161.     }
  163.     // Update every 110 Seconds since token expires after 2 min
  164.     setInterval(function () {
  165.         grecaptcha.ready(function() {
  166.             grecaptcha.execute('{{ recaptchaKeyPublic }}', {action: 'newsletter'}).then(function(token) {
  167.             //alert('recaptcha is loaded');
  168.             var recaptcha = document.getElementById('newsletter_form_recaptcha');
  169.             recaptcha.value = token;
  170.             });
  171.         });
  172.     }, 110 * 1000);
  173.     */
  174. </script>
  176. <!-- START - We recommend to place the below code in footer or bottom of your website html  -->
  177. <script>
  178.     window.REQUIRED_CODE_ERROR_MESSAGE = '{{"une erreur est survenue, merci de ré-essayer"|trans}}';
  179.     window.LOCALE = '{{ app.request.locale }}';
  180.     window.EMAIL_INVALID_MESSAGE = window.SMS_INVALID_MESSAGE = '{{"Les informations que vous avez fournies ne sont pas valides. Veuillez vérifier le format du champ et réessayer."|trans}}';
  182.     window.REQUIRED_ERROR_MESSAGE = '{{"Vous devez renseigner ce champ."|trans}}';
  184.     window.GENERIC_INVALID_MESSAGE = '{{"Les informations que vous avez fournies ne sont pas valides. Veuillez vérifier le format du champ et réessayer."|trans}}';
  186.     window.translation = {
  187.         common: {
  188.         selectedList: '{quantity} liste sélectionnée',
  189.         selectedLists: '{quantity} listes sélectionnées'
  190.         }
  191.     };
  193.     var AUTOHIDE = Boolean(0);
  194.     </script>
  195.   <script defer src="https://sibforms.com/forms/end-form/build/main.js"></script>
  197. {% endblock %}