forms.twig

{# @var craft \craft\web\twig\variables\CraftVariable #}
{# @var entry \craft\elements\Entry #}
{#
  Description of what this file is for

  @package  baukasten
  @author David Hellmann [[email protected]]

  o-contactForm
  ------------------------------------------------------------
#}

{# -- Set Defaults -- #}
{% set defaults = {
  cn: 'o-contactForm',
  modifiers: [],
  customClasses: [],
  data: {},
  js: null,
  form: null,
  params: null,
  whitepaper: null
} %}

{# -- Merge Default with Options -- #}
{% set opt = opt is defined ? defaults|merge(opt) : defaults %}

{# -- Modul -- #}
<div class="{{ opt.cn }}
              {% for modifier in opt.modifiers %}
                {{ modifier | length ? '  ' ~ opt.cn ~ '--' ~ modifier }}
              {% endfor %}
              {% for customClass in opt.customClasses %}
                {{ customClass | length ? '  ' ~ customClass }}
              {% endfor %}  {{ opt.js ? opt.cn|replace({ 'o-' : 'js-' }) : '' }}"
  {% for key, value in opt.data %}
    {{ 'data-' ~ key ~ '=' ~ value }}
  {% endfor %}>

  {% set rightForm = opt.params.f ?? opt.form ?? 'contact' %}
  {% set returnUrlParams = {} %}
  {% if rightForm == 'whitepaper' %}

    {% if opt.whitepaper %}
      {% set assets = [] %}
      {% for whitepaper in opt.whitepaper %}
        {% set assets = assets | merge([whitepaper.id]) %}
      {% endfor %}
    {% endif %}

    {% set returnUrlParams = {dl: assets} %}
  {% endif %}


  {% set form = craft.freeform.form(rightForm) %}

  {{ form.renderTag({
    returnUrl: url(siteUrl ~ 'thankyou', returnUrlParams),
    errorClass: opt.cn ~ '__fieldErrors',
  }) }}

  {% set gender = form.get("gender") ?? null %}
  {% set recipients = form.get("recipients") ?? null %}
  {% set subject = form.get("subject") ?? null %}
  {% set firstName = form.get("firstName") ?? null %}
  {% set lastName = form.get("lastName") ?? null %}
  {% set company = form.get("company") ?? null %}
  {% set email = form.get("email") ?? null %}
  {% set phoneNumber = form.get("phoneNumber") ?? null %}
  {% set interest = form.get("interest") ?? null %}
  {% set message = form.get("message") ?? null %}
  {% set mailchimp = form.get("5PXMMjgXy") ?? null %}
  {% set agb = form.get("agb") ?? null %}
  {% set selectedProduct = form.get("selectedProduct") ?? null %}


  {% if recipients ?? null %}
    <div class="{{ opt.cn ~ '__row' }}">
      <div class="{{ opt.cn ~ '__rowContent' }}  {{ opt.cn ~ '__rowContent--half' }}">
        {# -- input -- #}
        {% include '_atoms/select/_template.twig' with {
          opt: {
            name: recipients.handle,
            info: recipients.instructions | t,
            object: recipients.options,
            label: recipients.label,
            required: true,
          }
        } only %}
        {{ recipients.renderErrors() }}
      </div>
    </div>
  {% endif %}

  {% if subject ?? null %}
    <div class="{{ opt.cn ~ '__row' }}">
      <div class="{{ opt.cn ~ '__rowContent' }}  {{ opt.cn ~ '__rowContent--half' }}">
        {# -- input -- #}
        {% include '_atoms/select/_template.twig' with {
          opt: {
            name: subject.handle,
            info: subject.instructions | t,
            object: subject.options,
            label: subject.label,
            required: true,
          }
        } only %}
        {{ subject.renderErrors() }}
      </div>
    </div>
  {% endif %}


  {% if gender ?? null %}
    <div class="{{ opt.cn ~ '__row' }}">
      <div class="{{ opt.cn ~ '__rowContent' }}  {{ opt.cn ~ '__rowContent--half' }}  ">
        {# -- input -- #}
        {% include '_atoms/select/_template.twig' with {
          opt: {
            name: gender.handle,
            info: gender.instructions | t,
            object: gender.options,
            label: gender.label,
            required: true,
          }
        } only %}
        {{ gender.renderErrors() }}
      </div>
    </div>
  {% endif %}

  {% if firstName ?? null %}
    {% if lastName ?? null %}
      <div class="{{ opt.cn ~ '__row' }}">
        <div class="{{ opt.cn ~ '__rowContent' }}  {{ opt.cn ~ '__rowContent--half' }}">
          {# -- input -- #}
          {% include '_atoms/input/_template.twig' with {
            opt: {
              type: 'text',
              name: firstName.handle,
              value: firstName.value,
              label: firstName.label,
              info: firstName.instructions | t,
              required: false
            }
          } only %}
          {{ firstName.renderErrors() }}
        </div>

        <div class="{{ opt.cn ~ '__rowContent' }}  {{ opt.cn ~ '__rowContent--half' }}">
          {# -- input -- #}
          {% include '_atoms/input/_template.twig' with {
            opt: {
              type: 'text',
              name: lastName.handle,
              value: lastName.value,
              label: lastName.label,
              info: lastName.instructions | t,
              required: false
            }
          } only %}
          {{ lastName.renderErrors() }}
        </div>
      </div>
    {% endif %}
  {% endif %}

  {% if company ?? null %}
    <div class="{{ opt.cn ~ '__row' }}">
      <div class="{{ opt.cn ~ '__rowContent' }}">
        {# -- input -- #}
        {% include '_atoms/input/_template.twig' with {
          opt: {
            type: 'text',
            name: company.handle,
            value: company.value,
            label: company.label,
            info: company.instructions | t,
            required: false
          }
        } only %}
        {{ company.renderErrors() }}
      </div>
    </div>
  {% endif %}

  {% if email or phoneNumber ?? null %}
    <div class="{{ opt.cn ~ '__row' }}">

      {% if email ?? null %}
        <div class="{{ opt.cn ~ '__rowContent' }}  {{ opt.cn ~ '__rowContent--half' }}">
          {# -- input -- #}
          {% include '_atoms/input/_template.twig' with {
            opt: {
              type: 'email',
              name: email.handle,
              value: email.valueAsString,
              label: email.label,
              info: email.instructions | t,
              required: false
            }
          } only %}
          {{ email.renderErrors() }}
        </div>
      {% endif %}

      {% if phoneNumber ?? null %}
        <div class="{{ opt.cn ~ '__rowContent' }}  {{ opt.cn ~ '__rowContent--half' }}">
          {# -- input -- #}
          {% include '_atoms/input/_template.twig' with {
            opt: {
              type: 'text',
              name: phoneNumber.handle,
              value: phoneNumber.value,
              label: phoneNumber.label,
              info: phoneNumber.instructions | t,
              required: false
            }
          } only %}
          {{ phoneNumber.renderErrors() }}
        </div>
      {% endif %}
    </div>
  {% endif %}


  {% if message ?? null %}
    <div class="{{ opt.cn ~ '__row' }}">
      <div class="{{ opt.cn ~ '__rowContent' }}">
        {# -- textarea -- #}
        {% include '_atoms/textarea/_template.twig' with {
          opt: {
            name: message.handle,
            label: message.label,
            info: message.instructions | t,
            required: false
          }
        } only %}
        {{ message.renderErrors() }}
      </div>
    </div>
  {% endif %}

  {% if agb ?? null %}
    <div class="{{ opt.cn ~ '__row' }}">
      <div class="{{ opt.cn ~ '__rowContent' }}">
        {# -- Input -- #}
        {% set agbText %}
          Hiermit bestätige ich, dass ich die <a target="_blank" href="{{ craft.entries.id(923).one().url }}">Datenschutzerklärung</a> zur Kenntnis genommen habe. Die Verarbeitung meiner personenbezogenen Daten kann ich jederzeit widerrufen.
        {% endset %}

        {% include '_atoms/checkbox/_template.twig' with {
          opt: {
            id: agb.handle,
            name: agb.handle,
            label: agbText,
            info: agb.instructions | t,
            required: true,
          }
        } only %}
        {{ agb.renderErrors() }}
      </div>
    </div>
  {% endif %}

  {% if mailchimp ?? null %}
    <div class="{{ opt.cn ~ '__row' }}">
      <div class="{{ opt.cn ~ '__rowContent' }}">
        {# -- Input -- #}
        {% set newsletterText %}
          Ja, senden Sie mir den eRecruiter Newsletter zu. Ich bin ausdrücklich damit einverstanden, den Newsletter zu erhalten und weiß, dass ich mich jederzeit problemlos abmelden kann.
        {% endset %}
        {% include '_atoms/checkbox/_template.twig' with {
          opt: {
            id: mailchimp.handle,
            name: mailchimp.handle,
            label: newsletterText,
            info: mailchimp.instructions | t,
            required: true
          }
        } only %}
        {{ mailchimp.renderErrors() }}
      </div>
    </div>
  {% endif %}


  {% if form.hasErrors %}
    <div class="{{ opt.cn ~ '__row' }}">
      <div class="{{ opt.cn ~ '__rowContent' }}">
        <div class="{{ opt.cn ~ '__errorListWrapper' }}">
          <p>
            {{ "There was an error submitting this form"|t }}
          </p>

          {% if form.errors|length %}
            <ul class="{{ opt.cn ~ '__errorList' }}">
              {% for error in form.errors %}
                <li class="{{ opt.cn ~ '__errorListItem' }}">{{ error }}</li>
              {% endfor %}
            </ul>
          {% endif %}
        </div>
      </div>
    </div>
    <script>
      /* Open Form if the form has Errors*/
      var form = document.querySelector('.js-ctaForm');
      var content = document.querySelector('.o-ctaTeaser__overlayContent');

      if (form && content) {
        document.body.classList.add('is-open--form');

        form.style.display = 'block';
        form.style.opacity = 1;

        content.style.opacity = 1;
        content.style.transform = 'translateY(0)';
      }
    </script>
  {% endif %}

  {% if selectedProduct ?? null %}
    {% if opt.params.product ?? opt.params.productTourismn ?? null %}
      {# -- input -- #}
      {% include '_atoms/input/_template.twig' with {
        opt: {
          type: 'hidden',
          name: selectedProduct.handle,
          value: opt.params.product ?? opt.params.productTourismn ?? selectedProduct.value
        }
      } only %}
      {{ selectedProduct.renderErrors() }}
    {% endif %}
  {% endif %}

  {# -- button -- #}
  <div class="{{ opt.cn ~ '__row' }}">
    <div class="{{ opt.cn ~ '__rowContent' }}">
      {% include '_atoms/button/_template.twig' with {
        opt: {
          text: "Formular absenden" | t,
          type: 'submit',
          modifiers: ['bgBlue']
        }
      } only %}
    </div>
  </div>

  {{ form.renderClosingTag }}
</div>