templates/module/Form/forms/homeanfrage.html.twig line 1

Open in your IDE?
  1. {% set debug = app.request.query.get("debug") %}
  2. {% set formName = 'igs-'~ document.getId() %}
  3. {% set formFields = frontend.formular.formFields %}
  4. {% set pauschalenname = (frontend.formular.pauschalenname is defined) ? frontend.formular.pauschalenname: ""  %}
  5. {% set buttontext = frontend.formular.buttontext %}
  6. {% set pflichtfeldtext = frontend.formular.pflichtfeldtext %}
  7. {% set dsgvotext = frontend.formular.dsgvotext %}
  8. {% set antwort = frontend.formular.antwort %}
  9. {% set websiteConfigName = frontend.formular.websiteConfigName %}
  10. {% set mailTemplate = frontend.formular.mailTemplate %}
  11. {% set url = frontend.formular.url %}
  13. <form  method="post" accept-charset="utf-8" name="{{ formName }}" role="form">
  14.     <div id="anchorPosition"></div>
  15.     <div class="form-container">
  17.         <div class="form-row--multiple">
  18.             <div class="form-item form-mandatory" data-master="A">{{ formFields.form_ARRIVAL |raw }}</div>
  19.             <div class="form-item form-mandatory" data-slave="A">{{ formFields.form_DEPARTURE |raw }}</div>
  20.             <div class="form-item">{{ formFields.form_REGION |raw }}</div>
  21.         </div>
  24.         <div class="form-row--multiple">
  25.             <div class="form-item form-mandatory" data-min="1" data-max="4" data-formtype="number">{{ formFields.form_NUMBEROFROOMS |raw }}</div>
  26.             <div class="form-item form-mandatory" data-min="1" data-max="10" data-formtype="number">{{ formFields.form_ADULTS |raw }}</div>
  27.             <div class="form-item" data-min="0" data-max="4" data-formtype="number">{{ formFields.form_CHILDREN |raw }}</div>
  28.         </div>
  30.         <div id="childages" class="form-row--multiple hide">
  31.             <div class="form-item"></div>
  32.             <div class="form-item"></div>
  33.             <div class="form-item form-child-ages" data-slave="A">{{ formFields.form_CHILDAGES |raw }}</div>
  34.         </div>
  36.         <div id="childages-multiple" class="form-row--multiple hide">
  37.             <div class="form-item"></div>
  38.             <div class="form-item"></div>
  39.             <div class="form-item form-child-ages" data-slave="A">{{ formFields.form_CHILDAGES_MULTIPLE |raw }}</div>
  40.         </div>
  42.  {#        <div id="childages" class="form-row--childages">
  43.             {% if formFields.form_childage is iterable %}
  44.                 {% for field in formFields.form_childage %}
  45.                      <div class="form-item form-mandatory hide" data-min="0" data-max="18" data-formtype="number">{{ field|raw }}</div>
  46.                 {% endfor %}
  47.             {% else %}
  48.                 <div class="form-item form-mandatory hide" data-min="0" data-max="18" data-formtype="number">{{ formFields.form_childage |raw }}</div>
  49.             {% endif %}
  51.         </div> #}
  53.         <div class="form-row--multiple">
  54.             <div class="form-item form-mandatory">{{ formFields.form_EMAIL|raw }}</div>
  55.             <div class="form-item form-mandatory">{{ formFields.form_SALUTATION|raw }}</div>
  56.         </div>
  58.         <div class="form-row--multiple">
  59.             <div class="form-item">{{ formFields.form_FIRSTNAME|raw }}</div>
  60.             <div class="form-item form-mandatory">{{ formFields.form_NAME|raw }}</div>
  61.         </div>
  64.         <div class="form-row--single">
  66.             <div class="form-item">{{ formFields.form_COMMENTS|raw }}</div>
  67.         </div>
  70.         <!-- SUBMIT -->
  72.         <div>
  74.             <div class="btn-wrp submit-button">
  75.                 <button type="submit">{{ buttontext|raw }}</button>
  76.             </div>
  79.             <div class="waiting-for-response">
  80.                 <div class="submit-sending">
  81.                     <div class="submit-sending--wrp">
  82.                         <div class="submit-sending-box">
  83.                             <div class="border one"></div>
  84.                             <div class="border two"></div>
  85.                             <div class="border three"></div>
  86.                             <div class="border four"></div>
  88.                             <div class="line one"></div>
  89.                             <div class="line two"></div>
  90.                             <div class="line three"></div>
  91.                         </div>
  92.                     </div>
  93.                 </div>
  95.             </div>
  96.         </div>
  98.         <p>
  99.             <small>{{ pflichtfeldtext|raw }}</small>
  100.         </p>
  102.         <div class="data-privacy-statement">
  103.             {{ dsgvotext|raw }}
  104.         </div>
  105.     </div>
  107.     <div class="hidden">
  108.         {% if 'homeanfrageAction' in document.getController() %}
  109.             <input type="text" name="form_PACKAGENAME" value="{{ pauschalenname }}"/>
  110.             <input type="text" name="language" value="{{ document.getProperty('language') }}"/>
  111.             <input type="text" name="websiteconfigname" value="{{ websiteConfigName }}"/>
  112.             <input type="text" name="mailtemplate" value="{{ mailTemplate }}"/>
  113.             <input type="text" name="url" value="{{ url }}"/>
  114.             <input type="text" name="debug" value="{{ debug }}"/>
  115.         {% endif %}
  116.     </div>
  118. </form>
  120. {% if debug == '1' %} <div id="debug">Egebnis aus Sendmail!</div> {% endif %}
  123. <script>
  125.     (function () {
  126.         'use strict';
  127.         var moduleName = '{{ formName }}_module'; // naming convention XXX_module
  129.         if (typeof selt === 'undefined') {
  130.             window.selt = {
  131.                 modules: {}
  132.             };
  133.         } else if (!selt.modules) {
  134.             selt.modules = {};
  135.         }
  137.         selt.modules[moduleName] = {
  138.             name: moduleName,
  139.             init: function () {
  140.                 activateForm();
  141.             }
  142.         };
  145.         function activateForm() {
  146.             var scnemForm       = $("form[name='{{ formName }}']"),
  147.                 confirmationURL = '{{ antwort }}',
  148.                 children        = $('[name="form_CHILDREN"]'),
  149.                 nrOfChildren,
  150.                 childAgeCollContainer    = $('#childages'),
  151.                 childAgeMultipleCollContainer    = $('#childages-multiple'),
  152.                 childAgeColl    = $('#childages .form-child-ages'),
  153.                 childAgeMultipleColl    = $('#childages-multiple .form-child-ages');
  155.             children.on('change', function () {
  156.                 nrOfChildren = parseInt(children.val(), 10),
  157.                     childAgeCollContainer.addClass('hide'), childAgeColl.removeClass('form-mandatory'), childAgeMultipleCollContainer.addClass('hide'), childAgeColl.removeClass('form-mandatory');
  158.                 if (nrOfChildren) {
  159.                     if(nrOfChildren == 1) {
  160.                         childAgeCollContainer.removeClass('hide');
  161.                         childAgeColl.addClass('form-mandatory')
  162.                     } else if (nrOfChildren > 1) {
  163.                         childAgeMultipleCollContainer.removeClass('hide');
  164.                         childAgeMultipleColl.addClass('form-mandatory')
  165.                     }
  166.                 }
  167.             });
  170.             scnemForm[0].onsubmit = function () {
  172.                 if (!selt.validateForm(scnemForm)) {
  173.                     selt.ajaxSubmitForm(scnemForm, confirmationURL, {{ debug }});
  174.                 }
  176.                 return false;
  177.             };
  179.             //---------------------------------------------------------------------------------------
  180.             //  Pickadate
  181.             //---------------------------------------------------------------------------------------
  183.             var date        = selt.dateFunctions.getFutureDate(new Date(), 1);
  184.             var dateOptions = {
  185.                 formatSubmit: "yyyy-mm-dd",
  186.                 min: date,
  187.                 today: '',
  188.                 clear: '',
  189.                 close: '',
  190.                 language: "{{ document.getProperty('language') }}"
  191.             };
  194.             selt.initForm(scnemForm, dateOptions);
  196.             $('[data-formtype="number"]', scnemForm).inputNumber()
  198.             function getUrlParameter(name) {
  199.                 name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
  200.                 var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
  201.                 var results = regex.exec(location.search);
  202.                 return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
  203.             }
  205.             // Get the value from the URL parameter 'arrival_value'
  206.             var arrivalValue = getUrlParameter('form_ARRIVAL');
  208.             // Set the value of the input field in the form
  209.             var inputElementArrival = document.querySelector('.input-input [name="form_ARRIVAL"]');
  210.             if (inputElementArrival) {
  211.                 inputElementArrival.value = arrivalValue;
  212.             }
  214.             // Get the value from the URL parameter 'arrival_value'
  215.             var departureValue = getUrlParameter('form_DEPARTURE');
  217.             // Set the value of the input field in the form
  218.             var inputElementDeparture = document.querySelector('.input-input [name="form_DEPARTURE"]');
  219.             if (inputElementDeparture) {
  220.                 inputElementDeparture.value = departureValue;
  221.             }
  223.             // Get the value from the URL parameter 'arrival_value'
  224.             var regionValue = getUrlParameter('form_REGION');
  226.             // Set the value of the input field in the form
  227.             var inputElementRegion = document.querySelector('.input-select [name="form_REGION"]');
  228.             if (inputElementRegion) {
  229.                 inputElementRegion.value = regionValue;
  230.             }
  232.         }
  234.     }())
  236. </script>