templates/forms/contact.html.twig line 1

Open in your IDE?
  1. {% extends "layout/default.html.twig" %}
  3. {% block content %}
  4.     <main id="main-content" role="main" class="main-content content-block js-content-visibility content-visibility--auto">
  5.         {% if not editmode %}
  6.             {{ include('navigation/breadcrumb.html.twig') }}
  7.         {% endif %}
  8.         <section class="contact-form-area container">
  9.             <div class="row">
  10.                 <div class="col-md-7">
  11.                     {{ include('includes/title-blocks/title-block.html.twig', {
  12.                         subtitleStyle: 'text-gradient-primary',
  13.                         titleTag: 'h1',
  14.                     }) }}
  15.                 </div>
  16.                 <div class="col-md-12">
  17.                     {{ include('includes/atoms/flash-messages.html.twig', {
  18.                         styleModifier: 'mb-3'
  19.                     }) }}
  21.                     <form action=""
  22.                           class="contact-form js-contact-form js-form-tracking js-reload-form js-form-validation js-elhc-form"
  23.                           data-form-validation-default-submit="false"
  24.                           method="POST">
  25.                         <div class="js-reload-form__loading" hidden>
  26.                             {{ include('includes/overlays/loading-overlay.html.twig') }}
  27.                         </div>
  28.                         <div class="row gy-4">
  30.                             {% for inputKey, inputName in el_hash_cash().createStamp() %}
  31.                                 <input type="hidden" name="{{ inputKey }}" value="{{ inputName }}">
  32.                             {% endfor %}
  34.                             <div class="col-md-3 col-sm-4 col-6">
  35.                                 {{ include('includes/form_elements/select.html.twig', {
  36.                                     id: 'salutation',
  37.                                     name: 'salutation',
  38.                                     label: 'form.salutation'|trans,
  39.                                     className: 'form-group',
  40.                                     inputWrapperModifier: "has-value",
  41.                                     options: [{
  42.                                         label: '',
  43.                                         value: '',
  44.                                         selected: true
  45.                                     }, {
  46.                                         label: 'form.salutation.male'|trans,
  47.                                         value: 'male'
  48.                                     }, {
  49.                                         label: 'form.salutation.female'|trans,
  50.                                         value: 'female'
  51.                                     }, {
  52.                                         label: 'form.salutation.divers'|trans,
  53.                                         value: 'divers'
  54.                                     }]
  56.                                 }) }}
  58.                             </div>
  59.                             <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-5 col-sm-6 align-self-end">
  60.                                 {{ include('includes/form_elements/switch.html.twig', {
  61.                                     id: "person",
  62.                                     name: "person",
  63.                                     option1: 'form.person.Unternehmen'|trans,
  64.                                     option2: 'form.person.privat'|trans,
  65.                                     inputWrapperModifier: "switch",
  66.                                     labelModifier: "slider round",
  67.                                     inputModifier: "form--default js-switch-toggle__toggle",
  68.                                     className: "js-form-tracking__switch"
  69.                                 }) }}
  70.                             </div>
  71.                             <div class="col-md-4">
  72.                                 {{ include('includes/form_elements/form-control.html.twig', {
  73.                                     label: 'form.company'|trans,
  74.                                     labelModifier: "js-contact-form__company-label",
  75.                                     placeholder: 'form.company'|trans,
  76.                                     id: "company",
  77.                                     name: "company",
  78.                                     className: "js-contact-form__company",
  79.                                     required: true,
  80.                                 }) }}
  81.                             </div>
  82.                             <div class="col-md-4 col-sm-6 col-6">
  83.                                 {{ include('includes/form_elements/form-control.html.twig', {
  84.                                     label: 'form.firstname'|trans,
  85.                                     id: "firstname",
  86.                                     name: "firstname",
  87.                                     placeholder: 'form.firstname'|trans,
  88.                                     required: true,
  89.                                 }) }}
  90.                             </div>
  91.                             <div class="col-md-4 col-sm-6 col-6">
  92.                                 {{ include('includes/form_elements/form-control.html.twig', {
  93.                                     label: 'form.lastname'|trans,
  94.                                     placeholder: 'form.lastname'|trans,
  95.                                     id: "lastname",
  96.                                     name: "lastname",
  97.                                     required: true,
  98.                                 }) }}
  99.                             </div>
  100.                             <div class="col-md-4">
  101.                                 {{ include('includes/form_elements/form-control.html.twig', {
  102.                                     label: 'form.email'|trans,
  103.                                     placeholder: 'form.email'|trans,
  104.                                     id: "email",
  105.                                     name: "email",
  106.                                     type: "email",
  107.                                     required: true,
  108.                                 }) }}
  109.                             </div>
  110.                             <div class="col-md-7">
  111.                                 {{ include('includes/form_elements/text-area.html.twig', {
  112.                                     label: 'form.message'|trans,
  113.                                     placeholder: 'form.message'|trans,
  114.                                     id: "message",
  115.                                     name: "message",
  116.                                     required: true,
  117.                                 }) }}
  118.                                 <div class="text-small--grey help-form--row">{{ 'form.pflichtfelder'|trans }}</div>
  119.                             </div>
  120.                             <div class="col-md-5 checkbox--text">
  121.                                 <div class="mt-4">
  122.                                     {% if not document.property('disableNewsletter') %}
  123.                                         <div class="checkbox--area">
  124.                                             {{ include('includes/form_elements/checkbox.html.twig', {
  125.                                                 label: document.property('swiss') ? ("form.newsletter-checkbox.text"|trans)|replace({'ß': 'ss'}) : "form.newsletter-checkbox.text"|trans,
  126.                                                 id: "newsletter",
  127.                                                 name: "newsletter",
  128.                                             }) }}
  129.                                             <div class="text-small--grey">{{ ('form.newsletter.consenttext'|trans) | raw }}</div>
  130.                                         </div>
  131.                                     {% endif %}
  133.                                     <div class="checkbox--area">
  134.                                         {{ include('includes/form_elements/checkbox.html.twig', {
  135.                                             label: "form.gdpr.text"|trans,
  136.                                             id: "gdpr",
  137.                                             name: "gdpr",
  138.                                             required: true,
  139.                                         }) }}
  140.                                     </div>
  141.                                 </div>
  143.                             </div>
  144.                         </div>
  145.                         <div class="text-center form-button">
  146.                             <button type="submit" class="btn btn-primary js-contact-form__btn">{{ 'form.submit'|trans }}</button>
  147.                         </div>
  148.                     </form>
  149.                 </div>
  150.             </div>
  151.         </section>
  153.         {{ include('includes/areablock.html.twig') }}
  154.     </main>
  155. {% endblock %}