templates/areas/contact-form-brick/view.html.twig line 1

Open in your IDE?
  1. {% embed 'app/area-brick-layout.html.twig' %}
  3.     {% block content %}
  4.         <!-- Form -->
  5.         <section class="bg-blue-300 ">
  6.             <div class="container grid grid-cols-12 py-20 md:gap-8">
  7.                 <div class="z-0 col-span-12 overflow-hidden rounded-md rounded-b-none md:rounded-b-md md:mb-10 md:mt-10 md:col-span-6 md:col-start-1 md:row-start-1">
  8.                     {{ pimcore_image('image', {
  9.                        thumbnail: 'contact-form',
  10.                        imgAttributes: {class: 'object-cover object-center w-full h-full'},
  11.                     }) }}
  12.                 </div>
  13.                 <div class="z-10 col-span-12 p-10 bg-gray-200 rounded-md rounded-t-none md:rounded-t-md md:col-span-7 md:col-start-6 md:row-start-1">
  14.                     <h2 class="mb-6 text-2xl font-bold text-blue">
  15.                         {{ pimcore_input('title', { placeholder: 'Titel' }) }}
  16.                     </h2>
  17.                     <p class="text-lg">
  18.                         <span>{{ pimcore_input('subtitle', { placeholder: 'Subtitel' }) }}</span>
  19.                         {% if editmode %}
  20.                             {{ pimcore_input('phone', { placeholder: 'Telefoonnummer' }) }}
  21.                         {% else %}
  22.                             <a
  23.                                 href="tel:{{ pimcore_input('phone') | phone }}"
  24.                                 class="font-bold text-blue hover:underline"
  25.                             >
  26.                                 {{ pimcore_input('phone') }}
  27.                             </a>
  28.                         {% endif %}
  29.                     </p>
  30.                     <div x-data="{ error: null, sent: false, loading: false }">
  31.                         <template x-if="error">
  32.                             {# `error` get parsed to string; e.g. 'Error: Network error'. #}
  33.                             <div x-text="error" class="text-red"></div>
  34.                         </template>
  36.                         <template x-if="sent">
  37.                             {# Also see _rental-form.html.twig::form.trans.thanks #}
  38.                             <div class="text-green">{{ 'Uw aanvraag is succesvol verstuurd. Wij nemen spoedig contact met u op!' | trans | escape }}</div>
  39.                         </template>
  41.                         <template x-if="!sent">
  42.                             <form
  43.                                 x-data="axios"
  44.                                 @submit.prevent="function(event) {
  45.                                     loading = true;
  46.                                     requestUrl = '{{ requestUrl }}'
  47.                                     zapierUrl = '';
  49.                                     if (requestUrl.includes('coolworld-rentals.com') ) {
  50.                                         zapierUrl = 'https://hooks.zapier.com/hooks/catch/17870113/bzi5rzo/'
  51.                                     }
  52.                                     else {
  53.                                         zapierUrl = 'https://hooks.zapier.com/hooks/catch/11516577/3u5tjvs/'
  54.                                     }
  56.                                     grecaptcha.ready(function() {
  57.                                         grecaptcha
  58.                                             .execute('{{ recaptcha_v3_site_key }}', { action: 'form_contact' })
  59.                                             .then(function(token) {
  60.                                                 fetch('/recaptcha/verify/',
  61.                                                     {
  62.                                                         method: 'POST',
  63.                                                         body: JSON.stringify({
  64.                                                             token: token,
  65.                                                             action: 'form_contact',
  66.                                                         }),
  67.                                                     }
  68.                                                 )
  69.                                                 .then((response) => response.json())
  70.                                                 .then(function(json) {
  71.                                                     if (json.success !== true || json.passed !== true) {
  72.                                                         window.alert('{{ 'recaptcha_robot_message'|trans }}');
  73.                                                     } else {
  74.                                                         axios.post(
  75.                                                             zapierUrl,
  76.                                                             new FormData(event.target),
  77.                                                             { headers: {'Content-Type': 'application/x-www-form-urlencoded'} }
  78.                                                         ).then(response => {
  79.                                                             sent = true;
  80.                                                             //TODO add zapier url for for https://ptchr.atlassian.net/browse/COOL-180
  81.                                                             window.dataLayer = window.dataLayer || [];
  82.                                                             //TODO fill with correct data for https://ptchr.atlassian.net/browse/COOL-180
  83.                                                             window.dataLayer.push({
  84.                                                                 'event': 'contactForm',
  85.                                                                 'pimcore_id': response.config.data.get('Bezoeker ID'),
  86.                                                                 // Make sure these are the same as the input names.
  87.                                                                 'telephonenumber': response.config.data.get('Telefoonnummer'),
  88.                                                                 'email': response.config.data.get('E-mailadres'),
  89.                                                             })
  90.                                                         }).catch(e => {
  91.                                                             error = e;
  92.                                                         })
  93.                                                     }
  94.                                                 })
  95.                                                 .then(loading = false)
  96.                                             })
  97.                                     });
  98.                                 }"
  99.                             >
  100.                                 <div class="grid grid-cols-12 gap-4 my-4">
  101.                                     <div class="col-span-12">
  102.                                         <label for="message-cf" class="block font-bold mb-1.5">{{ 'Uw bericht' | trans }}*</label>
  103.                                         <!--placeholder="{{ 'Uw vragen of opmerkingen' | trans }}"-->
  104.                                         <textarea
  105.                                             id="message-cf"
  106.                                             name="Bericht"
  107.                                             required
  108.                                             class="w-full h-32 p-3 border border-gray-400 rounded-md placeholder:text-gray-600"
  109.                                         ></textarea>
  110.                                     </div>
  111.                                     <div class="col-span-12 md:col-span-6">
  112.                                         <div class="flex items-center mb-1.5">
  113.                                             <label for="first_name-cf" class="block mr-2 font-bold">{{ 'Voornaam' | trans }}*</label>
  114.                                             <!--<div class="block w-4 h-4 cursor-pointer">
  115.                                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
  116.                                                     <path fill="#0072BB" fill-rule="evenodd" d="M8.036 5.235c.433 0 .747-.081.942-.244.196-.162.294-.418.294-.767 0-.358-.098-.618-.294-.78-.195-.163-.51-.244-.942-.244-.433 0-.747.081-.943.243-.195.163-.293.423-.293.78 0 .35.098.606.293.768.196.163.51.244.943.244Zm1.06 6.965V5.959H6.976V12.2h2.122ZM8 14.4A6.4 6.4 0 1 1 14.4 8 6.407 6.407 0 0 1 8 14.4ZM0 8a8 8 0 0 0 16 0 8.009 8.009 0 0 0-8-8 8 8 0 0 0-8 8Z"/>
  117.                                                 </svg>
  118.                                             </div>-->
  119.                                         </div>
  120.                                         <!--placeholder="Morgan"-->
  121.                                         <input
  122.                                             type="text"
  123.                                             id="first_name-cf"
  124.                                             name="Voornaam"
  125.                                             class="w-full p-3 border border-gray-400 rounded-md placeholder:text-gray-600"
  126.                                             required
  127.                                         />
  128.                                     </div>
  129.                                     <div class="col-span-12 md:col-span-6">
  130.                                         <div class="flex items-center mb-1.5">
  131.                                             <label for="last_name-cf" class="block mr-2 font-bold">{{ 'Achternaam' | trans }}*</label>
  132.                                             <!--<div class="block w-4 h-4 cursor-pointer">
  133.                                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
  134.                                                     <path fill="#0072BB" fill-rule="evenodd" d="M8.036 5.235c.433 0 .747-.081.942-.244.196-.162.294-.418.294-.767 0-.358-.098-.618-.294-.78-.195-.163-.51-.244-.942-.244-.433 0-.747.081-.943.243-.195.163-.293.423-.293.78 0 .35.098.606.293.768.196.163.51.244.943.244Zm1.06 6.965V5.959H6.976V12.2h2.122ZM8 14.4A6.4 6.4 0 1 1 14.4 8 6.407 6.407 0 0 1 8 14.4ZM0 8a8 8 0 0 0 16 0 8.009 8.009 0 0 0-8-8 8 8 0 0 0-8 8Z"/>
  135.                                                 </svg>
  136.                                             </div>-->
  137.                                         </div>
  138.                                         <!--placeholder="Freeman"-->
  139.                                         <input
  140.                                             type="text"
  141.                                             id="last_name-cf"
  142.                                             name="Achternaam"
  143.                                             class="w-full p-3 border border-gray-400 rounded-md placeholder:text-gray-600"
  144.                                             required
  145.                                         />
  146.                                     </div>
  147.                                     <div class="col-span-12 md:col-span-6">
  148.                                         <div class="flex items-center mb-1.5">
  149.                                             <label for="phone-cf" class="block mr-2 font-bold">{{ 'Telefoonnummer' | trans }}*</label>
  150.                                             <!--<div class="block w-4 h-4 cursor-pointer">
  151.                                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
  152.                                                     <path fill="#0072BB" fill-rule="evenodd" d="M8.036 5.235c.433 0 .747-.081.942-.244.196-.162.294-.418.294-.767 0-.358-.098-.618-.294-.78-.195-.163-.51-.244-.942-.244-.433 0-.747.081-.943.243-.195.163-.293.423-.293.78 0 .35.098.606.293.768.196.163.51.244.943.244Zm1.06 6.965V5.959H6.976V12.2h2.122ZM8 14.4A6.4 6.4 0 1 1 14.4 8 6.407 6.407 0 0 1 8 14.4ZM0 8a8 8 0 0 0 16 0 8.009 8.009 0 0 0-8-8 8 8 0 0 0-8 8Z"/>
  153.                                                 </svg>
  154.                                             </div>-->
  155.                                         </div>
  156.                                         <!--placeholder="+31612345678"-->
  157.                                         <input
  158.                                             type="text"
  159.                                             id="phone-cf"
  160.                                             name="Telefoonnummer"
  161.                                             required
  162.                                             class="w-full p-3 border border-gray-400 rounded-md placeholder:text-gray-600"
  163.                                         />
  164.                                     </div>
  165.                                     <div class="col-span-12 md:col-span-6">
  166.                                         <div class="flex items-center mb-1.5">
  167.                                             <label for="email-cf" class="block mr-2 font-bold">{{ 'E-mailadres' | trans }}*</label>
  168.                                             <!--<div class="block w-4 h-4 cursor-pointer">
  169.                                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
  170.                                                     <path fill="#0072BB" fill-rule="evenodd" d="M8.036 5.235c.433 0 .747-.081.942-.244.196-.162.294-.418.294-.767 0-.358-.098-.618-.294-.78-.195-.163-.51-.244-.942-.244-.433 0-.747.081-.943.243-.195.163-.293.423-.293.78 0 .35.098.606.293.768.196.163.51.244.943.244Zm1.06 6.965V5.959H6.976V12.2h2.122ZM8 14.4A6.4 6.4 0 1 1 14.4 8 6.407 6.407 0 0 1 8 14.4ZM0 8a8 8 0 0 0 16 0 8.009 8.009 0 0 0-8-8 8 8 0 0 0-8 8Z"/>
  171.                                                 </svg>
  172.                                             </div>-->
  173.                                         </div>
  174.                                         <!--placeholder="info@mail.com"-->
  175.                                         <input
  176.                                             type="email"
  177.                                             id="email-cf"
  178.                                             name="E-mailadres"
  179.                                             required
  180.                                             class="w-full p-3 border border-gray-400 rounded-md placeholder:text-gray-600"
  181.                                         />
  182.                                     </div>
  183.                                     <div class="col-span-12">
  184.                                         <div class="flex items-center mb-1.5">
  185.                                             <label for="company-cf" class="block mr-2 font-bold">{{ 'Bedrijf' | trans }}*</label>
  186.                                         </div>
  187.                                         <input
  188.                                             type="text"
  189.                                             id="company-cf"
  190.                                             name="Bedrijf"
  191.                                             required
  192.                                             class="w-full p-3 border border-gray-400 rounded-md placeholder:text-gray-600"
  193.                                         />
  194.                                     </div>
  195.                                     <div class="col-span-12 md:col-span-6">
  196.                                         <div class="flex items-center mb-1.5">
  197.                                             <label for="address-cf" class="block mr-2 font-bold">{{ 'Adres' | trans }}*</label>
  198.                                         </div>
  199.                                         <input
  200.                                             type="text"
  201.                                             id="address-cf"
  202.                                             name="Adres"
  203.                                             required
  204.                                             class="w-full p-3 border border-gray-400 rounded-md placeholder:text-gray-600"
  205.                                         />
  206.                                     </div>
  207.                                     <div class="col-span-12 md:col-span-6">
  208.                                         <div class="flex items-center mb-1.5">
  209.                                             <label for="zipcode-cf" class="block mr-2 font-bold">{{ 'Postcode' | trans }}*</label>
  210.                                         </div>
  211.                                         <input
  212.                                             type="text"
  213.                                             id="zipcode-cf"
  214.                                             name="Postcode"
  215.                                             required
  216.                                             class="w-full p-3 border border-gray-400 rounded-md placeholder:text-gray-600"
  217.                                         />
  218.                                     </div>
  219.                                     <div class="col-span-12 md:col-span-6">
  220.                                         <div class="flex items-center mb-1.5">
  221.                                             <label for="city-cf" class="block mr-2 font-bold">{{ 'Plaats' | trans }}*</label>
  222.                                         </div>
  223.                                         <input
  224.                                             type="text"
  225.                                             id="city-cf"
  226.                                             name="Plaats"
  227.                                             required
  228.                                             class="w-full p-3 border border-gray-400 rounded-md placeholder:text-gray-600"
  229.                                         />
  230.                                     </div>
  231.                                     <div class="col-span-12 md:col-span-6">
  232.                                         <div class="flex items-center mb-1.5">
  233.                                             <label for="country-cf" class="block mr-2 font-bold">{{ 'Land' | trans }}*</label>
  234.                                         </div>
  235.                                         <select
  236.                                             id="country-cf"
  237.                                             name="Land"
  238.                                             required
  239.                                             class="w-full p-3 border border-gray-400 rounded-md placeholder:text-gray-600"
  240.                                         >
  241.                                             {# Also @see _rental-form.html.twig #}
  242.                                             {% for code, country in {
  243.                                                 NL: 'Nederland' | trans,
  244.                                                 BE: 'België' | trans,
  245.                                                 DE: 'Duitsland' | trans,
  246.                                                 FR: 'Frankrijk' | trans,
  247.                                                 CH: 'Zwitserland' | trans,
  248.                                                 AT: 'Oostenrijk' | trans,
  249.                                                 LU: 'Luxemburg' | trans,
  250.                                                 LI: 'Liechtenstein' | trans,
  251.                                                 DK: 'Denemarken' | trans,
  252.                                                 HU: 'Hongarije' | trans,
  253.                                                 GB: 'Verenigd Koninkrijk' | trans,
  254.                                                 SE: 'Zweden' | trans,
  255.                                                 NO: 'Noorwegen' | trans,
  256.                                                 PL: 'Polen' | trans,
  257.                                                 SK: 'Slowakije' | trans,
  258.                                                 CZ: 'Tsjechië' | trans,
  259.                                                 IT: 'Italië' | trans,
  260.                                                 ES: 'Spanje' | trans,
  261.                                                 OTHER: 'Overige' | trans,
  262.                                             } | sort %}
  263.                                                 <option value="{{ code | upper }}" {% if (data.page.country|upper) == (code|upper) %} selected {% endif %}>{{ country }}</option>
  264.                                             {% endfor %}
  265.                                         </select>
  266.                                     </div>
  268.                                     <div class="col-span-12">
  269.                                         <small class="text-sm">
  270.                                             {{ pimcore_input('fine-print', { placeholder: 'Toestemmingstekst' }) }}
  271.                                         </small>
  272.                                     </div>
  273.                                     <div class="col-span-12">
  274.                                         <p class="block font-bold mb-1.5">{{ 'Mogen we uw gegevens gebruiken?' | trans }}</p>
  275.                                         <label class="text-sm text-gray-500 cursor-pointer">
  276.                                             <input type="checkbox" name="Marketing toestemming" class="mr-1"/>
  277.                                             {% if not editmode %}
  278.                                                 <span>{{ pimcore_input('checkbox') }}</span>
  279.                                             {% endif %}
  280.                                         </label>
  281.                                         {% if editmode %}
  282.                                             {{ pimcore_input('checkbox', { placeholder: 'Checkbox tekst' }) }}
  283.                                         {% endif %}
  284.                                     </div>
  285.                                     <div class="col-span-12">
  286.                                         <input type="hidden" name="Taal" value="{{ data.page.lang | escape }}">
  287.                                         <input type="hidden" name="Paginanaam" value="{{ data.page.title | escape }}">
  288.                                         <input type="hidden" name="URL" value="{{ data.request.url | raw }}">
  289.                                         <input type="hidden" name="Bezoeker ID" value="{{ (data.visitorId ?? (visitorId ?? null)) | escape }}">
  290.                                         
  291.                                         <input type="hidden" name="gclid" id="gclid" value="{{ (data.gclid ?? (gclid ?? null)) | escape }}">
  292.                                         <input type="hidden" name="msclkid" id="msclkid" value="{{ (data.msclkid ?? (msclkid ?? null)) | escape }}">
  293.                                         <input type="hidden" name="li_fat_id" id="li_fat_id" value="{{ (data.li_fat_id ?? (li_fat_id ?? null)) | escape }}">
  295.                                         <template x-if="error">
  296.                                              {# `error` get parsed to string; e.g. 'Error: Network error'. #}
  297.                                              <div x-text="error" class="mt-6 text-red"></div>
  298.                                          </template>
  300.                                         <button type="submit" :disabled="loading" class="mt-6 button button__green disabled:opacity-50 disabled:cursor-not-allowed">
  301.                                             {{ 'Verzenden' | trans }}
  302.                                         </button>
  303.                                     </div>
  305.                                     <script>
  306.                                         document.addEventListener('readystatechange', function(event) {
  307.                                             if (document.readyState === "complete" && document.getElementsByName("Bezoeker ID")) {
  308.                                                 if (localStorage.getItem('_ptg.user')) {
  309.                                                     document.getElementsByName("Bezoeker ID")[0].value = JSON.parse(localStorage.getItem('_ptg.user')).visitorId;
  310.                                                 }
  311.                                             }
  312.                                         });
  313.                                     </script>
  314.                                 </div>
  315.                             </form>
  316.                         </template>
  317.                     </div>
  318.                 </div>
  319.             </div>
  320.         </section>
  321.     {% endblock %}
  323. {% endembed %}