contact page animation
alexanderroese
parent
74f29f06c3
commit
506e2d095e
|
|
@ -18,7 +18,7 @@
|
|||
<div class="contact page-width page-width--narrow section-{{ section.id }}-padding">
|
||||
<div style="background-color: #fff; padding: 10px 20px 20px 20px; border-radius: 12px; box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);">
|
||||
{%- if section.settings.heading != blank -%}
|
||||
<h2 class="title title-wrapper--no-top-margin inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
|
||||
<h2 class="title title-wrapper--no-top-margin inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}" style="text-align: center">
|
||||
{{ section.settings.heading }}
|
||||
</h2>
|
||||
{%- else -%}
|
||||
|
|
@ -61,103 +61,104 @@
|
|||
</li>
|
||||
</ul>
|
||||
{% else %}
|
||||
<p>Fragen oder Anregungen? Wir freuen uns auf deine Nachricht!</p>
|
||||
{%- endif -%}
|
||||
<div class="contact__fields">
|
||||
<p style="text-align: center">Fragen oder Anregungen? Wir freuen uns auf deine Nachricht!</p>
|
||||
|
||||
<div class="contact__fields">
|
||||
<div class="field">
|
||||
<input
|
||||
class="field__input"
|
||||
autocomplete="name"
|
||||
type="text"
|
||||
id="ContactForm-name"
|
||||
name="contact[{{ 'templates.contact.form.name' | t }}]"
|
||||
value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"
|
||||
placeholder="{{ 'templates.contact.form.name' | t }}"
|
||||
>
|
||||
<label class="field__label" for="ContactForm-name">{{ 'templates.contact.form.name' | t }}</label>
|
||||
</div>
|
||||
<div class="field field--with-error">
|
||||
<input
|
||||
autocomplete="email"
|
||||
type="email"
|
||||
id="ContactForm-email"
|
||||
class="field__input"
|
||||
name="contact[email]"
|
||||
spellcheck="false"
|
||||
autocapitalize="off"
|
||||
value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
|
||||
aria-required="true"
|
||||
{% if form.errors contains 'email' %}
|
||||
aria-invalid="true"
|
||||
aria-describedby="ContactForm-email-error"
|
||||
{% endif %}
|
||||
placeholder="{{ 'templates.contact.form.email' | t }}"
|
||||
>
|
||||
<label class="field__label" for="ContactForm-email">
|
||||
{{- 'templates.contact.form.email' | t }}
|
||||
<span aria-hidden="true">*</span></label
|
||||
>
|
||||
{%- if form.errors contains 'email' -%}
|
||||
<small class="contact__field-error" id="ContactForm-email-error">
|
||||
<span class="visually-hidden">{{ 'accessibility.error' | t }}</span>
|
||||
<span class="form__message">
|
||||
{%- render 'icon-error' -%}
|
||||
{{- form.errors.translated_fields.email | capitalize }}
|
||||
{{ form.errors.messages.email -}}
|
||||
</span>
|
||||
</small>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
{% comment %}
|
||||
<div class="field">
|
||||
<input
|
||||
type="tel"
|
||||
id="ContactForm-phone"
|
||||
class="field__input"
|
||||
autocomplete="name"
|
||||
type="text"
|
||||
id="ContactForm-name"
|
||||
name="contact[{{ 'templates.contact.form.name' | t }}]"
|
||||
value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"
|
||||
placeholder="{{ 'templates.contact.form.name' | t }}"
|
||||
autocomplete="tel"
|
||||
name="contact[{{ 'templates.contact.form.phone' | t }}]"
|
||||
pattern="[0-9\-]*"
|
||||
value="{% if form.phone %}{{ form.phone }}{% elsif customer %}{{ customer.phone }}{% endif %}"
|
||||
placeholder="{{ 'templates.contact.form.phone' | t }}"
|
||||
>
|
||||
<label class="field__label" for="ContactForm-name">{{ 'templates.contact.form.name' | t }}</label>
|
||||
<label class="field__label" for="ContactForm-phone">{{ 'templates.contact.form.phone' | t }}</label>
|
||||
</div>
|
||||
<div class="field field--with-error">
|
||||
<input
|
||||
autocomplete="email"
|
||||
type="email"
|
||||
id="ContactForm-email"
|
||||
class="field__input"
|
||||
name="contact[email]"
|
||||
spellcheck="false"
|
||||
autocapitalize="off"
|
||||
value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
|
||||
aria-required="true"
|
||||
{% if form.errors contains 'email' %}
|
||||
aria-invalid="true"
|
||||
aria-describedby="ContactForm-email-error"
|
||||
{% endif %}
|
||||
placeholder="{{ 'templates.contact.form.email' | t }}"
|
||||
>
|
||||
<label class="field__label" for="ContactForm-email">
|
||||
{{- 'templates.contact.form.email' | t }}
|
||||
<span aria-hidden="true">*</span></label
|
||||
>
|
||||
{%- if form.errors contains 'email' -%}
|
||||
<small class="contact__field-error" id="ContactForm-email-error">
|
||||
<span class="visually-hidden">{{ 'accessibility.error' | t }}</span>
|
||||
<span class="form__message">
|
||||
{%- render 'icon-error' -%}
|
||||
{{- form.errors.translated_fields.email | capitalize }}
|
||||
{{ form.errors.messages.email -}}
|
||||
</span>
|
||||
</small>
|
||||
{%- endif -%}
|
||||
{% endcomment %}
|
||||
<div class="field">
|
||||
<select id="ContactForm-reason" name="contact[reason]" class="field__input" style="height: 60px">
|
||||
<option value="allgemein">Allgemein</option>
|
||||
<option value="feedback">Feedback</option>
|
||||
<option value="einProblemMelden">Ein Problem melden</option>
|
||||
<option value="erstattungOderRabattBeantragen">Erstattung oder Rabatt beantragen</option>
|
||||
<option value="produktfrage">Produktfrage</option>
|
||||
<option value="sonderanfertigung">Sonderanfertigung</option>
|
||||
<option value="kooperationAnfragen">Kooperation anfragen</option>
|
||||
<option value="sonstiges">Sonstiges</option>
|
||||
</select>
|
||||
<label class="form__label field__label" for="ContactForm-reason">
|
||||
Betreff
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{% comment %}
|
||||
<div class="field">
|
||||
<input
|
||||
type="tel"
|
||||
id="ContactForm-phone"
|
||||
class="field__input"
|
||||
autocomplete="tel"
|
||||
name="contact[{{ 'templates.contact.form.phone' | t }}]"
|
||||
pattern="[0-9\-]*"
|
||||
value="{% if form.phone %}{{ form.phone }}{% elsif customer %}{{ customer.phone }}{% endif %}"
|
||||
placeholder="{{ 'templates.contact.form.phone' | t }}"
|
||||
>
|
||||
<label class="field__label" for="ContactForm-phone">{{ 'templates.contact.form.phone' | t }}</label>
|
||||
</div>
|
||||
{% endcomment %}
|
||||
<div class="field">
|
||||
<select id="ContactForm-reason" name="contact[reason]" class="field__input" style="height: 60px">
|
||||
<option value="allgemein">Allgemein</option>
|
||||
<option value="feedback">Feedback</option>
|
||||
<option value="einProblemMelden">Ein Problem melden</option>
|
||||
<option value="erstattungOderRabattBeantragen">Erstattung oder Rabatt beantragen</option>
|
||||
<option value="produktfrage">Produktfrage</option>
|
||||
<option value="sonderanfertigung">Sonderanfertigung</option>
|
||||
<option value="kooperationAnfragen">Kooperation anfragen</option>
|
||||
<option value="sonstiges">Sonstiges</option>
|
||||
</select>
|
||||
<label class="form__label field__label" for="ContactForm-reason">
|
||||
Betreff
|
||||
</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<textarea
|
||||
rows="10"
|
||||
id="ContactForm-body"
|
||||
class="text-area field__input"
|
||||
name="contact[{{ 'templates.contact.form.comment' | t }}]"
|
||||
placeholder="{{ 'templates.contact.form.comment' | t }}"
|
||||
>
|
||||
{{- form.body -}}
|
||||
</textarea>
|
||||
<label class="form__label field__label" for="ContactForm-body">
|
||||
{{- 'templates.contact.form.comment' | t -}}
|
||||
</label>
|
||||
</div>
|
||||
<div class="contact__button">
|
||||
<button type="submit" class="button">
|
||||
{{ 'templates.contact.form.send' | t }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="field">
|
||||
<textarea
|
||||
rows="10"
|
||||
id="ContactForm-body"
|
||||
class="text-area field__input"
|
||||
name="contact[{{ 'templates.contact.form.comment' | t }}]"
|
||||
placeholder="{{ 'templates.contact.form.comment' | t }}"
|
||||
>
|
||||
{{- form.body -}}
|
||||
</textarea>
|
||||
<label class="form__label field__label" for="ContactForm-body">
|
||||
{{- 'templates.contact.form.comment' | t -}}
|
||||
</label>
|
||||
</div>
|
||||
<div class="contact__button">
|
||||
<button type="submit" class="button">
|
||||
{{ 'templates.contact.form.send' | t }}
|
||||
</button>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{%- endform -%}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue