templates/Includes/Partials/contact-modal.html.twig line 1

Open in your IDE?
  1. {% set isBustravel = package.isBusTour %}
  3. <div class="modal fade custom-modal" id="contactModal" tabindex="-1" role="dialog" aria-labelledby="contactModalLabel" aria-hidden="true">
  4.     <div class="modal-dialog custom-modal__container custom-modal__container--xl" role="document">
  5.         <div class="custom-modal__content modal-content">
  6.             <div class="custom-modal__header">
  7.                 <button type="button" class="close custom-modal__close" data-dismiss="modal" aria-label="Close">
  8.                     <span class="icon icon-close" aria-hidden="true"></span>
  9.                     <span class="custom-modal__close-text">{{ 'modal.schließen'|trans }}</span>
  10.                 </button>
  11.             </div>
  12.             <div class="custom-modal__body modal-body">
  14.                 <div class="text-center mb-5">
  15.                     <div class="custom-modal__sub-title">
  16.                         {{'modal.Wann möchten Sie uns besuchen?'|trans}}
  17.                     </div>
  18.                     <div class="custom-modal__title h2" id="contactModalLabel">
  19.                         {{'modal.Ihre Anfrage'|trans}}
  20.                     </div>
  21.                 </div>
  24.                 <form action="" method="post" class="js-form-validation js-quickfinder js-elhc-form js-elhc-form-ajax">
  26.                     <div class="row js-datepicker-range">
  27.                         <input name="packageId" value="{{ package.id }}" hidden>
  28.                         <input name="packageName" value="{{ package.title }}" hidden>
  31.                         {% if app.session.flashBag.get('elhc_error') or not errors|default([]) is empty%}
  32.                             <div class="col-md-12 alert alert-warning mb-2">
  33.                                 <ul>
  34.                                     {% set messages = errors|merge(app.session.flashBag.get('elhc_error')) %}
  35.                                     {% for message in  messages %}
  36.                                         <li>{{ ('error.' ~ message)|trans }}</li>
  37.                                     {% endfor %}
  38.                                 </ul>
  39.                             </div>
  40.                         {% endif %}
  42.                         <div class="col-md-6">
  44.                             {{ include('Form/Includes/select.html.twig', {
  45.                                 id: 'salutation',
  46.                                 inputModifier: "js-floating-label",
  47.                                 labelModifier: "floating-label",
  48.                                 inputWrapperModifier: "select__input-wrapper position-relative",
  49.                                 name: "salutation",
  50.                                 required: true,
  51.                                 label: 'package-overview.Anrede'|trans,
  52.                                 styleModifier: 'form-group--sm',
  53.                                 options: [
  54.                                     {
  55.                                         "label": "",
  56.                                         "value": "",
  57.                                         "disabled": true,
  58.                                         "selected": true,
  59.                                         "class": "sr-only"
  60.                                     }, {
  61.                                         "label": 'package-overview.Frau'|trans,
  62.                                         "value": 'package-overview.Frau'|trans,
  63.                                         "class": '',
  64.                                     }, {
  65.                                         "label": 'package-overview.Herr'|trans,
  66.                                         "value": 'package-overview.Herr'|trans,
  67.                                         "class": ""
  68.                                     },],
  69.                                 errors: errors['salutation'] is defined ? [errors['salutation']] : null,
  70.                             }) }}
  71.                         </div>
  72.                         <div class="col-md-6">
  73.                             {{ include('Form/Includes/form-control.html.twig', {
  74.                                 id: 'title',
  75.                                 name: 'title',
  76.                                 inputModifier: 'js-floating-label',
  77.                                 inputWrapperModifier: 'position-relative',
  78.                                 labelModifier: 'floating-label',
  79.                                 label: 'contact-modal.Titel'|trans,
  80.                                 errors: errors['title'] is defined ? [errors['title']] : null,
  81.                             }) }}
  82.                         </div>
  83.                         <div class="col-md-6">
  84.                             {{ include('Form/Includes/form-control.html.twig', {
  85.                                 id: 'firstname',
  86.                                 name: 'firstname',
  87.                                 inputModifier: 'js-floating-label',
  88.                                 inputWrapperModifier: 'position-relative',
  89.                                 labelModifier: 'floating-label',
  90.                                 label: 'contact-modal.Vorname'|trans,
  91.                                 required: true,
  92.                                 errors: errors['firstname'] is defined ? [errors['firstname']] : null,
  93.                             }) }}
  94.                         </div>
  95.                         <div class="col-md-6">
  96.                             {{ include('Form/Includes/form-control.html.twig', {
  97.                                 id: 'lastname',
  98.                                 name: 'lastname',
  99.                                 inputModifier: 'js-floating-label',
  100.                                 inputWrapperModifier: 'position-relative',
  101.                                 labelModifier: 'floating-label',
  102.                                 label: 'contact-modal.Nachname'|trans,
  103.                                 required: true,
  104.                                 errors: errors['lastname'] is defined ? [errors['lastname']] : null,
  105.                             }) }}
  106.                         </div>
  107.                         <div class="col-md-6">
  108.                             {{ include('Form/Includes/form-control.html.twig', {
  109.                                 id: 'phone',
  110.                                 name: 'phone',
  111.                                 inputModifier: 'js-floating-label',
  112.                                 inputWrapperModifier: 'position-relative',
  113.                                 labelModifier: 'floating-label',
  114.                                 label: 'contact-modal.Telefon'|trans,
  115.                                 errors: errors['phone'] is defined ? [errors['phone']] : null,
  116.                             }) }}
  117.                         </div>
  118.                         <div class="col-md-6">
  119.                             {{ include('Form/Includes/form-control.html.twig', {
  120.                                 id: 'email',
  121.                                 name: 'email',
  122.                                 inputModifier: 'js-floating-label',
  123.                                 inputWrapperModifier: 'position-relative',
  124.                                 labelModifier: 'floating-label',
  125.                                 label: 'contact-modal.E-Mail'|trans,
  126.                                 required: true,
  127.                                 type: 'email',
  128.                                 errors: errors['email'] is defined ? [errors['email']] : null,
  129.                             }) }}
  130.                         </div>
  131.                         {% if package.enableCategoriesInForm %}
  132.                         <div class="col-md-6">
  133.                             {{ include('Form/Includes/select.html.twig', {
  134.                                 id: 'topic',
  135.                                 inputModifier: "js-floating-label",
  136.                                 labelModifier: "floating-label",
  137.                                 inputWrapperModifier: "select__input-wrapper position-relative",
  138.                                 name: "topic",
  139.                                 required: true,
  140.                                 label: 'package-overview.Thema auswählen'|trans,
  141.                                 styleModifier: '',
  142.                                 options: topicSelect|default([]),
  143.                                 errors: errors['topic'] is defined ? [errors['topic']] : null,
  144.                             }) }}
  145.                         </div>
  146.                         {% endif %}
  147.                         {% if package.enableCategoriesInForm %}
  148.                             <div class="col-md-6">
  149.                                 {{ include('Form/Includes/select.html.twig', {
  150.                                     id: 'region',
  151.                                     inputModifier: "js-floating-label",
  152.                                     labelModifier: "floating-label",
  153.                                     inputWrapperModifier: "select__input-wrapper position-relative",
  154.                                     name: "region",
  155.                                     required: true,
  156.                                     label: 'package-overview.Region auswählen'|trans,
  157.                                     styleModifier: '',
  158.                                     options: regionSelect|default([]),
  159.                                     errors: errors['region'] is defined ? [errors['region']] : null,
  160.                                 }) }}
  161.                             </div>
  162.                         {% endif %}
  164.                         <div class="col-6">
  165.                             {{ include('Form/Includes/date-picker.html.twig', {
  166.                                 "id": "arrival",
  167.                                 "name": "arrival",
  168.                                 "label": "package-overview.Anreise"|trans,
  169.                                 "min": carbon().today().toDateTimeString(),
  170.                                 "value": carbon().today().toDateTimeString(),
  171.                                 "numberOfMonths": 2,
  172.                                 "styleModifier": "js-datepicker-range__from form-group--sm",
  173.                                 "inputHiddenModifier": "js-floating-label",
  174.                                 "inputWrapperModifier": "position-relative datepicker-container",
  175.                                 "labelModifier": "floating-label",
  176.                                 errors: errors['arrival'] is defined ? [errors['arrival']] : null,
  177.                             }) }}
  178.                         </div>
  179.                         <div class="col-6">
  180.                             {{ include('Form/Includes/date-picker.html.twig', {
  181.                                 "id": "departure",
  182.                                 "name": "departure",
  183.                                 "label": "package-overview.Abreise"|trans,
  184.                                 "min": carbon().today().toDateTimeString(),
  185.                                 "value": carbon().today().addWeek().toDateTimeString(),
  186.                                 "numberOfMonths": 2,
  187.                                 "styleModifier": "js-datepicker-range__to form-group--sm",
  188.                                 "inputHiddenModifier": "js-floating-label",
  189.                                 "inputWrapperModifier": "position-relative datepicker-container",
  190.                                 "labelModifier": "floating-label",
  191.                                 errors: errors['departure'] is defined ? [errors['departure']] : null,
  192.                             }) }}
  193.                         </div>
  194.                         {% if isBustravel %}
  195.                             <div class="col-md-6">
  196.                                 {{ include('Form/Includes/form-control.html.twig', {
  197.                                     id: 'persons',
  198.                                     name: 'persons',
  199.                                     inputModifier: 'js-floating-label',
  200.                                     inputWrapperModifier: 'position-relative',
  201.                                     labelModifier: 'floating-label',
  202.                                     label: 'contact-modal.Personenanzahl'|trans,
  203.                                     required: true,
  204.                                     type: 'number',
  205.                                     errors: errors['persons'] is defined ? [errors['persons']] : null,
  206.                                 }) }}
  207.                             </div>
  208.                         </div><div class="row">
  209.                             <div class="col-md-6">
  210.                                 {{ include('Form/Includes/form-control.html.twig', {
  211.                                     id: 'doublerooms',
  212.                                     name: 'doublerooms',
  213.                                     inputModifier: 'js-floating-label',
  214.                                     inputWrapperModifier: 'position-relative',
  215.                                     labelModifier: 'floating-label',
  216.                                     label: 'contact-modal.Doppelzimmer'|trans,
  217.                                     required: true,
  218.                                     type: 'number',
  219.                                     errors: errors['doublerooms'] is defined ? [errors['doublerooms']] : null,
  220.                                 }) }}
  221.                             </div> <div class="col-md-6">
  222.                                 {{ include('Form/Includes/form-control.html.twig', {
  223.                                     id: 'singlerooms',
  224.                                     name: 'singlerooms',
  225.                                     inputModifier: 'js-floating-label',
  226.                                     inputWrapperModifier: 'position-relative',
  227.                                     labelModifier: 'floating-label',
  228.                                     label: 'contact-modal.Einzelzimmer'|trans,
  229.                                     required: true,
  230.                                     type: 'number',
  231.                                     errors: errors['singlerooms'] is defined ? [errors['singlerooms']] : null,
  232.                                 }) }}
  233.                             </div>
  234.                         {% else %}
  235.                             <div class="col-6">
  236.                                 {{ include('Form/Includes/select.html.twig', {
  237.                                     id: 'adults',
  238.                                     inputModifier: "js-floating-label",
  239.                                     labelModifier: "floating-label",
  240.                                     inputWrapperModifier: "select__input-wrapper position-relative",
  241.                                     name: "adults",
  242.                                     required: true,
  243.                                     label: 'package-overview.Erwachsene'|trans,
  244.                                     styleModifier: 'form-group--sm',
  245.                                     options: adultsSelect|default([]),
  246.                                     errors: errors['adults'] is defined ? [errors['adults']] : null,
  247.                                 }) }}
  248.                             </div>
  250.                             <div class="col-6">
  251.                                 {{ include('Form/Includes/select.html.twig', {
  252.                                     id: 'children',
  253.                                     inputModifier: "js-floating-label js-quickfinder__child-input",
  254.                                     labelModifier: "floating-label",
  255.                                     inputWrapperModifier: "select__input-wrapper position-relative",
  256.                                     name: "children",
  257.                                     required: false,
  258.                                     label: 'package-overview.Kinder'|trans,
  259.                                     styleModifier: 'form-group--sm',
  260.                                     options: childrenSelect|default([]),
  261.                                     errors: errors['children'] is defined ? [errors['children']] : null,
  262.                                 }) }}
  263.                             </div>
  264.                         {% endif %}
  265.                     </div>
  267.                     <div class="row js-quickfinder__childs"></div>
  269.                     <div class="row">
  270.                         <div class="col-12">
  271.                             {{ include('Form/Includes/text-area.html.twig', {
  272.                                 id: 'message',
  273.                                 name: 'message',
  274.                                 inputModifier: 'js-floating-label',
  275.                                 inputWrapperModifier: 'position-relative',
  276.                                 labelModifier: 'floating-label',
  277.                                 label: 'package-overview.Anregungen/Wünsche'|trans,
  278.                                 required: false,
  279.                                 errors: errors['message'] is defined ? [errors['message']] : null,
  280.                             }) }}
  281.                         </div>
  282.                     </div>
  284.                     <div class="text-right small mb-1">
  285.                         *{{'contact-modal.Pflichtfelder'|trans}}
  286.                     </div>
  287.                     {{ include('Form/Includes/form-control.html.twig', {
  288.                         type: 'hidden',
  289.                         name: 'gdpr-text',
  290.                         id: 'gdpr-text',
  291.                         value: 'contact.Ich stimme den <a href="#">Datenschutzbestimmungen</a> zu.'|trans
  292.                     }) }}
  293.                     <div>{{ 'contact.Ich stimme den <a href="#">Datenschutzbestimmungen</a> zu.'|trans|raw }}</div>
  296.                     <div class="text-center mt-4">
  297.                         <button type="submit" class="btn btn-primary-light">{{'modal.Anfrage sende'|trans}}</button>
  298.                     </div>
  299.                 </form>
  301.             </div>
  302.         </div>
  303.     </div>
  304. </div>