86 lines
2.9 KiB
Plaintext
86 lines
2.9 KiB
Plaintext
{{ 'newsletter-section.css' | asset_url | stylesheet_tag }}
|
|
|
|
{% render 'shx-header-subtitle', title: "Bleib up-to-date!", subtitle: "Erhalte exklusive Vorteile direkt in dein Postfach!" %}
|
|
|
|
{% form 'customer', class: 'shx-newsletter-form' %}
|
|
<input type="hidden" name="contact[tags]" value="newsletter">
|
|
<div
|
|
class="{% comment %}newsletter-form__field-wrapper{% endcomment %}{% if settings.animations_reveal_on_scroll %}scroll-trigger animate--slide-in{% endif %} shx-newsletter-container"
|
|
{% comment %}
|
|
{% if settings.animations_reveal_on_scroll %}
|
|
data-cascade
|
|
style="--animation-order: {{ forloop.index }};"
|
|
{% endif %}
|
|
{% endcomment %}
|
|
>
|
|
<dotlottie-player
|
|
id="shx-newsletter-animation"
|
|
src="{{ 'lottie_newsletter.lottie' | asset_url }}"
|
|
background="transparent"
|
|
speed="1"
|
|
autoplay
|
|
loop="true"
|
|
direction="1"
|
|
mode="bounce"></dotlottie-player>
|
|
|
|
<div class="shx-newsletter-field-container">
|
|
<h2 style="margin-top: 0">Jetzt anmelden</h2>
|
|
|
|
<div class="field">
|
|
<input
|
|
id="NewsletterForm--{{ section.id }}"
|
|
type="email"
|
|
name="contact[email]"
|
|
class="field__input shx-newsletter-input"
|
|
value="{{ form.email }}"
|
|
aria-required="true"
|
|
autocorrect="off"
|
|
autocapitalize="off"
|
|
autocomplete="email"
|
|
{% if form.errors %}
|
|
autofocus
|
|
aria-invalid="true"
|
|
aria-describedby="Newsletter-error--{{ section.id }}"
|
|
{% elsif form.posted_successfully? %}
|
|
aria-describedby="Newsletter-success--{{ section.id }}"
|
|
{% endif %}
|
|
placeholder="{{ 'newsletter.label' | t }}"
|
|
required
|
|
>
|
|
<label class="field__label" for="NewsletterForm--{{ section.id }}">
|
|
{{ 'newsletter.label' | t }}
|
|
</label>
|
|
<button
|
|
type="submit"
|
|
class="newsletter-form__button field__button"
|
|
name="commit"
|
|
id="Subscribe"
|
|
aria-label="{{ 'newsletter.button_label' | t }}"
|
|
>
|
|
{% render 'icon-arrow' %}
|
|
</button>
|
|
</div>
|
|
|
|
{%- if form.errors -%}
|
|
<small class="newsletter-form__message form__message" id="Newsletter-error--{{ section.id }}">
|
|
{%- render 'icon-error' -%}
|
|
{{- form.errors.translated_fields.email | capitalize }}
|
|
{{ form.errors.messages.email -}}
|
|
</small>
|
|
{%- endif -%}
|
|
|
|
{%- if form.posted_successfully? -%}
|
|
<h3
|
|
class="newsletter-form__message newsletter-form__message--success form__message"
|
|
id="Newsletter-success--{{ section.id }}"
|
|
tabindex="-1"
|
|
autofocus
|
|
style="margin-top: 10px"
|
|
>
|
|
{% render 'icon-success' -%}
|
|
{{- 'newsletter.success' | t }}
|
|
</h3>
|
|
{%- endif -%}
|
|
</div>
|
|
</div>
|
|
{% endform %} |