templates/Form/contact.html.twig line 1

Open in your IDE?
  1. {% extends "Layout/default.html.twig" %}
  2. {#{% do pimcore_placeholder('add-hashcash-script').set(true) %}#}
  3. {% block content %}
  5.     {{ include('Content/includes/hero.html.twig') }}
  7.     {{ include('Navigation/breadcrumb.html.twig') }}
  9.     {{ include('Includes/main-title-block-splitted-editable.html.twig') }}
  11.     {{ include('Includes/areablock.html.twig') }}
  13.     {% if editmode %}
  14.         <div class="editmode-box editmode-box--info">
  15.             <div class="editmode-box__header">
  16.                 Settings
  17.             </div>
  18.             <div class="alert alert-info">
  19.                 if no region select in use. The region found in properties will be used to determine the correct email address
  20.             </div>
  21.             <div class="row">
  22.                 <div class="col-6">
  23.                     <label>
  24.                         Topics: <br>
  25.                         {{ pimcore_relations('topics', {'types': ['object'], 'subtypes': ['object'], 'classes': ['ContactTopic'], width: 600}) }}
  26.                     </label>
  27.                 </div>
  28.                 <div class="col-6">
  29.                     <label>
  30.                         Regions: <br>
  31.                         {{ pimcore_relations('regions', {'types': ['object'], 'subtypes': ['object'], 'classes': ['Region'], width: 600}) }}
  32.                     </label>
  33.                 </div>
  34.                 <div class="col-6">
  35.                     <label>
  36.                         Preselect Topic: <br>
  37.                         {{ pimcore_relation('topic', {'types': ['object'], 'subtypes': ['object'], 'classes': ['ContactTopic'], width: 600}) }}
  38.                     </label>
  39.                 </div>
  40.                 <div class="col-6">
  41.                     <label>
  42.                         Preselect Region: <br>
  43.                         {{ pimcore_relation('region', {'types': ['object'], 'subtypes': ['object'], 'classes': ['Region'], width: 600}) }}
  44.                     </label>
  45.                 </div>
  46.             </div>
  47.             Success Page:
  48.             <br>
  49.             {{ pimcore_relation('success', {'types': ['document'], 'subtypes': ['page']}) }}
  50.             <br>
  51.             Email Document:
  52.             <br>
  53.             {{ pimcore_relation('email', {'types': ['document'], 'subtypes': ['email']}) }}
  54.             <br>
  55.             Use company instead of title: {{ pimcore_checkbox('use_company', {reload:true}) }}
  56.         </div>
  57.     {% endif %}
  58.     <section class="slide content-block bg-secondary">
  60.         <div class="container">
  61.             {{ include('Includes/title-block-editable.html.twig', {'isWhite': true, 'isCentered': true, 'suffix': 'contact-'}) }}
  62.         </div>
  63.         {% do jsConfig().add({
  64.             'recaptchaPublicKey': recaptchaExtension().publicKey,
  65.             'recaptcha': true
  66.         }) %}
  68.         <div class="container container-narrow">
  69.             {% if errors |default(false) %}
  70.                 <div class="alert alert-danger">
  71.                     <ul>
  72.                         {% for error in errors %}
  73.                             <li>{{ ('contact.error.'~ error)|trans }}</li>
  74.                         {% endfor %}
  75.                     </ul>
  76.                 </div>
  77.             {% endif %}
  79.             <form action="{{ app.request.pathInfo }}" class="js-elhc-form js-elhc-form-ajax js-form-validation" method="POST">
  81.                 <div hidden>
  82.                     {{ include('Form/Includes/form-control.html.twig', {
  83.                         name: 'potNumber',
  84.                         id: 'potNumber',
  85.                         value: ''
  86.                     }) }}
  87.                 </div>
  88.                 <div class="row">
  89.                     {% if not pimcore_relations('topics').empty %}
  90.                         <div class="col-md-6">
  91.                             {% set default = [{
  92.                                 "label": "",
  93.                                 "value": "",
  94.                                 "disabled": true,
  95.                                 "selected": true,
  96.                                 "class": "sr-only"
  97.                             }] %}
  98.                             {{ include('Form/Includes/select.html.twig', {
  99.                                 id: 'topic-select',
  100.                                 inputModifier: "js-floating-label",
  101.                                 labelModifier: "floating-label",
  102.                                 inputWrapperModifier: "select__input-wrapper position-relative",
  103.                                 name: "topic",
  104.                                 required: true,
  105.                                 label: 'contact.Thema auswählen'|trans,
  106.                                 options: default|merge(pimcore_relations('topics').elements | map( x => {
  107.                                     "label": x.name,
  108.                                     "value": x.id,
  109.                                     "class": ""
  110.                                 })),
  111.                                 errors: errors['topic'] is defined ? [errors['topic']] : null
  112.                             }) }}
  113.                         </div>
  114.                     {% endif %}
  115.                     {% if not pimcore_relations('regions').empty %}
  116.                         <div class="col-md-6">
  117.                             {% set default = [{
  118.                                 "label": "",
  119.                                 "value": "",
  120.                                 "disabled": true,
  121.                                 "selected": true,
  122.                                 "class": "sr-only"
  123.                             }] %}
  124.                             {{ include('Form/Includes/select.html.twig', {
  125.                                 id: 'region-select',
  126.                                 inputModifier: "js-floating-label",
  127.                                 labelModifier: "floating-label",
  128.                                 inputWrapperModifier: "select__input-wrapper position-relative",
  129.                                 name: "region",
  130.                                 required: true,
  131.                                 label: 'contact.Region auswählen'|trans,
  132.                                 options: default|merge(pimcore_relations('regions').elements | map( x => {
  133.                                     "label": x.name,
  134.                                     "value": x.id,
  135.                                     "class": ""
  136.                                 })),
  137.                                 errors: errors['region'] is defined ? [errors['region']] : null
  138.                             }) }}
  139.                         </div>
  140.                     {% endif %}
  141.                 </div>
  142.                 <div class="row">
  143.                             <div class="col-md-6">
  144.                         {{ include('Form/Includes/select.html.twig', {
  145.                             id: 'salutation',
  146.                             inputModifier: "js-floating-label",
  147.                             labelModifier: "floating-label",
  148.                             inputWrapperModifier: "select__input-wrapper position-relative",
  149.                             name: "salutation",
  150.                             required: true,
  151.                             label: 'contact.Anrede'|trans,
  152.                             styleModifier: 'form-group--sm',
  153.                             options: [
  154.                                 {
  155.                                     "label": "",
  156.                                     "value": "",
  157.                                     "disabled": true,
  158.                                     "selected": true,
  159.                                     "class": "sr-only"
  160.                                 }, {
  161.                                     "label": 'newsletter.Frau'|trans,
  162.                                     "value": 'female',
  163.                                     "class": '',
  164.                                 }, {
  165.                                     "label": 'newsletter.Herr'|trans,
  166.                                     "value": 'male',
  167.                                     "class": ""
  168.                                 }, {
  169.                                     "label": 'newsletter.Familie/Firma'|trans,
  170.                                     "value": 'other',
  171.                                     "class": ""
  172.                                 },],
  173.                             errors: errors['salutation'] is defined ? [errors['salutation']] : null,
  174.                         }) }}
  175.                     </div>
  176.                     <div class="col-md-6">
  177.                         {% if pimcore_checkbox('use_company').checked %}
  178.                             {{ include('Form/Includes/form-control.html.twig', {
  179.                                 id: 'company',
  180.                                 name: 'company',
  181.                                 inputModifier: 'js-floating-label',
  182.                                 inputWrapperModifier: 'position-relative',
  183.                                 labelModifier: 'floating-label',
  184.                                 label: 'contact.Company'|trans
  185.                             }) }}
  186.                         {% else %}
  187.                             {{ include('Form/Includes/form-control.html.twig', {
  188.                                 id: 'title',
  189.                                 name: 'title',
  190.                                 inputModifier: 'js-floating-label',
  191.                                 inputWrapperModifier: 'position-relative',
  192.                                 labelModifier: 'floating-label',
  193.                                 label: 'contact.Titel'|trans
  194.                             }) }}
  195.                         {% endif %}
  197.                     </div>
  198.                     <div class="col-md-6">
  199.                         {{ include('Form/Includes/form-control.html.twig', {
  200.                             id: 'firstname',
  201.                             name: 'firstname',
  202.                             inputModifier: 'js-floating-label',
  203.                             inputWrapperModifier: 'position-relative',
  204.                             labelModifier: 'floating-label',
  205.                             label: 'contact.Vorname'|trans,
  206.                             required: true,
  207.                             errors: errors['firstname'] is defined ? [errors['firstname']] : null
  208.                         }) }}
  209.                     </div>
  210.                     <div class="col-md-6">
  211.                         {{ include('Form/Includes/form-control.html.twig', {
  212.                             id: 'lastname',
  213.                             name: 'lastname',
  214.                             inputModifier: 'js-floating-label',
  215.                             inputWrapperModifier: 'position-relative',
  216.                             labelModifier: 'floating-label',
  217.                             label: 'contact.Nachname'|trans,
  218.                             required: true,
  219.                             errors: errors['lastname'] is defined ? [errors['lastname']] : null
  220.                         }) }}
  221.                     </div>
  222.                     <div class="col-md-6">
  223.                         {{ include('Form/Includes/form-control.html.twig', {
  224.                             id: 'phone',
  225.                             name: 'phone',
  226.                             inputModifier: 'js-floating-label',
  227.                             inputWrapperModifier: 'position-relative',
  228.                             labelModifier: 'floating-label',
  229.                             label: 'contact.Telefon'|trans,
  230.                             type: 'tel'
  231.                         }) }}
  232.                     </div>
  233.                     <div class="col-md-6">
  234.                         {{ include('Form/Includes/form-control.html.twig', {
  235.                             id: 'email',
  236.                             name: 'email',
  237.                             inputModifier: 'js-floating-label',
  238.                             inputWrapperModifier: 'position-relative',
  239.                             labelModifier: 'floating-label',
  240.                             label: 'contact.E-Mail'|trans,
  241.                             type: 'email',
  242.                             required: true,
  243.                             errors: errors['email'] is defined ? [errors['email']] : null
  244.                         }) }}
  245.                     </div>
  246.                     <div class="col-md-6">
  247.                         {{ include('Form/Includes/form-control.html.twig', {
  248.                             id: 'street',
  249.                             name: 'street',
  250.                             inputModifier: 'js-floating-label',
  251.                             inputWrapperModifier: 'position-relative',
  252.                             labelModifier: 'floating-label',
  253.                             label: 'contact.Straße'|trans,
  254.                             type: 'text',
  255.                             required: false,
  256.                             errors: errors['street'] is defined ? [errors['street']] : null
  257.                         }) }}
  258.                     </div>
  259.                     <div class="col-md-6">
  260.                         {{ include('Form/Includes/form-control.html.twig', {
  261.                             id: 'zip',
  262.                             name: 'zip',
  263.                             inputModifier: 'js-floating-label',
  264.                             inputWrapperModifier: 'position-relative',
  265.                             labelModifier: 'floating-label',
  266.                             label: 'contact.PLZ'|trans,
  267.                             type: 'text',
  268.                             required: false,
  269.                             errors: errors['zip'] is defined ? [errors['zip']] : null
  270.                         }) }}
  271.                     </div>
  272.                     <div class="col-md-6">
  273.                         {{ include('Form/Includes/form-control.html.twig', {
  274.                             id: 'city',
  275.                             name: 'city',
  276.                             inputModifier: 'js-floating-label',
  277.                             inputWrapperModifier: 'position-relative',
  278.                             labelModifier: 'floating-label',
  279.                             label: 'contact.Stadt'|trans,
  280.                             type: 'text',
  281.                             required: false,
  282.                             errors: errors['city'] is defined ? [errors['city']] : null
  283.                         }) }}
  284.                     </div>
  285.                     <div class="col-md-6">
  286.                         {{ include('Form/Includes/select.html.twig', {
  287.                             id: 'country',
  288.                             inputModifier: "js-floating-label",
  289.                             labelModifier: "floating-label",
  290.                             inputWrapperModifier: "select__input-wrapper position-relative",
  291.                             name: "country",
  292.                             required: true,
  293.                             label: 'contact.Land'|trans,
  294.                             styleModifier: 'form-group--sm',
  295.                             options: getCountrySelectData(app.request.locale, app.request.get('country', '')),
  296.                             errors: errors['country'] is defined ? [errors['country']] : null,
  297.                         }) }}
  298.                     </div>
  299.                     <div class="col-12">
  300.                         {{ include('Form/Includes/text-area.html.twig', {
  301.                             id: 'message',
  302.                             name: 'message',
  303.                             inputModifier: 'js-floating-label',
  304.                             inputWrapperModifier: 'position-relative',
  305.                             labelModifier: 'floating-label',
  306.                             label: 'contact.Anregungen/Wünsche'|trans,
  307.                             required: true,
  308.                             rows: 5,
  309.                             errors: errors['message'] is defined ? [errors['message']] : null
  310.                         }) }}
  311.                     </div>
  312.                     {% if elements_debug_mode() and siteConfig.id != getMainConfig() %}
  313.                         <div class="col-md-12">
  314.                             {{ include('Form/Includes/checkbox.html.twig', {
  315.                                 id: 'numbirds',
  316.                                 name: 'numbirds',
  317.                                 label: 'footer.newsletter Numbirds'|trans,
  318.                                 required: false,
  319.                                 errors: errors['numbirds'] is defined ? [errors['numbirds']] : null
  320.                             }) }}
  321.                         </div>
  322.                     {% endif %}
  323.                 </div>
  325.                 <div class="text-right small">
  326.                     * {{ 'contact.Pflichtfelder'|trans }}
  327.                 </div>
  328.                 {{ include('Form/Includes/form-control.html.twig', {
  329.                     type: 'hidden',
  330.                     name: 'gdpr-text',
  331.                     id: 'gdpr-text',
  332.                     value: 'contact.Ich stimme den <a href="#">Datenschutzbestimmungen</a> zu.'|trans
  333.                 }) }}
  334.                 <div>{{ 'contact.Ich stimme den <a href="#">Datenschutzbestimmungen</a> zu.'|trans|raw }}</div>
  336.                 <div class="text-center mt-4">
  337.                     <button type="submit" class="btn btn-primary-light">{{ 'contact.Kontaktanfrage senden'|trans }}</button>
  338.                 </div>
  339.             </form>
  340.         </div>
  341.     </section>
  343.     {{ include('Includes/areablock.html.twig', {'areaName': 'bottomContent'}) }}
  345. {% endblock %}