templates/newsletter/index.html.twig line 1

Open in your IDE?
  1. {% extends 'layout/default.html.twig' %}
  3. {% block contentBlock %}
  4.     <script src="https://www.google.com/recaptcha/api.js?render={{ recaptcha_v3_site_key }}"></script>
  6.     <main class="staticPage">
  7.         <div class="container my-5 my-lg-5 my-md-5">
  8.             {{ form_start(newsletterForm,{'attr': {'novalidate': 'novalidate','id': 'newsletter-form-type'}}) }}
  9.                 <div class="row">
  10.                     <div class="col-lg-4 col-md-6 col-sm-9 offset-sm-1 offset-md-0 offset-lg-1">
  11.                         <div class="d-flex flex-column">
  12.                             <h1 class="font-weight-bold mb-4 mb-lg-4 mb-md-4 font-italic">{{ 'newsletter.heading' | trans }}</h1>
  13.                             <h4 class="font-weight-bold mb-4 mb-lg-4 mb-md-4">{{ 'newsletter.sub.heading' | trans }}</h4>
  14.                         </div>
  16.                         <div class="d-flex flex-column mb-3 mb-lg-3 mb-md-3 {{ form_errors(newsletterForm.Email) ? 'input-error' }}">
  17.                             <div class="ml-3 ml-lg-3 ml-md-3 text-deepGray">
  18.                                 {{ form_label(newsletterForm.Email) }}
  19.                             </div>
  21.                             {{ form_widget(newsletterForm.Email) }}
  22.                             {{ form_errors(newsletterForm.Email) }}
  23.                         </div>
  25.                         <div class="d-flex flex-column mb-3 mb-lg-3 mb-md-3 {{ form_errors(newsletterForm.Firstname) ? 'input-error' }}">
  26.                             <div class="ml-3 ml-lg-3 ml-md-3 text-deepGray">
  27.                                 {{ form_label(newsletterForm.Firstname) }}
  28.                             </div>
  30.                             {{ form_widget(newsletterForm.Firstname) }}
  31.                             {{ form_errors(newsletterForm.Firstname) }}
  32.                         </div>
  33.                     </div>
  34.                 </div>
  35.                 <div class="row">
  36.                     <div class="col-lg-6 col-md-8 col-sm-9 offset-sm-1 offset-md-0 offset-lg-1">
  37.                         <p class="mb-0 mt-4 mt-lg-4 mt-md-4">Select Categories of interest</p>
  38.                         <p class="mb-3 mb-lg-3 mb-md-3">
  39.                             <small>
  40.                                 Select all that apply.
  41.                             </small>
  42.                         </p>
  43.                         {% for list in lists %}
  45.                             <div class="top-position-checkmark position-relative checkbox-container my-0 py-1 py-lg-1 py-md-1">
  46.                                 <input type="checkbox" name="lists[]" id="{{ list.id }}" value="{{ list.id }}">
  47.                                 <span class="checkmark"></span>
  48.                                 <div class="d-flex ml-1 ml-lg-1 ml-md-1">
  49.                                     <label for="{{ list.id }}">
  50.                                         {{ list.title }}
  51.                                     </label>
  52.                                 </div>
  53.                             </div>
  56.                         {% endfor %}
  57.                         <div class="d-flex flex-column align-items-start mt-4 mt-lg-4 mt-md-3 mb-3 mb-lg-3 mb-md-3">
  58.                             {{ form_widget(newsletterForm._submit) }}
  59.                         </div>
  60.                     </div>
  61.                 </div>
  62.             {{ form_end(newsletterForm) }}
  63.         </div>
  64.     </main>
  66.     <script>
  67.     $("#newsletter-form-type button[type=submit]").on('click', function(e) {
  68.         e.preventDefault();
  69.         grecaptcha.ready(function() {
  70.             let action = document.getElementById('action').value;
  71.             grecaptcha.execute('{{ recaptcha_v3_site_key }}', { action: action })
  72.             .then(function(token) {
  73.                 // add token value to form
  74.                 document.getElementById('g-recaptcha-response').value = token;
  75.                 $('#newsletter-form-type').submit();
  76.             });
  77.         });
  78.     });
  79.     </script>
  80. {% endblock %}