update contact form
alexanderroese
parent
83ddf881dd
commit
8d068fdd43
|
|
@ -16,138 +16,140 @@
|
|||
|
||||
<div class="color-{{ section.settings.color_scheme }} gradient">
|
||||
<div class="contact page-width page-width--narrow section-{{ section.id }}-padding">
|
||||
{%- 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 %}">
|
||||
{{ section.settings.heading }}
|
||||
</h2>
|
||||
<p>Fragen oder Anregungen? Wir freuen uns auf deine Nachricht!</p>
|
||||
{%- else -%}
|
||||
<h2 class="visually-hidden">{{ 'templates.contact.form.title' | t }}</h2>
|
||||
{%- endif -%}
|
||||
{%- liquid
|
||||
assign contact_form_class = 'isolate'
|
||||
if settings.animations_reveal_on_scroll
|
||||
assign contact_form_class = 'isolate scroll-trigger animate--slide-in'
|
||||
endif
|
||||
-%}
|
||||
{%- form 'contact', id: 'ContactForm', class: contact_form_class -%}
|
||||
{%- if form.posted_successfully? -%}
|
||||
<h2 class="form-status form-status-list form__message" tabindex="-1" autofocus>
|
||||
{% render 'icon-success' %}
|
||||
{{ 'templates.contact.form.post_success' | t }}
|
||||
<div style="background-color: #fff; padding: 10px 20px 20px 20px; border-radius: 12px">
|
||||
{%- 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 %}">
|
||||
{{ section.settings.heading }}
|
||||
</h2>
|
||||
{%- elsif form.errors -%}
|
||||
<div class="form__message">
|
||||
<h2 class="form-status caption-large text-body" role="alert" tabindex="-1" autofocus>
|
||||
{% render 'icon-error' %}
|
||||
{{ 'templates.contact.form.error_heading' | t }}
|
||||
</h2>
|
||||
</div>
|
||||
<ul class="form-status-list caption-large" role="list">
|
||||
<li>
|
||||
<a href="#ContactForm-email" class="link">
|
||||
{{ form.errors.translated_fields.email | capitalize }}
|
||||
{{ form.errors.messages.email }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Fragen oder Anregungen? Wir freuen uns auf deine Nachricht!</p>
|
||||
{%- else -%}
|
||||
<h2 class="visually-hidden">{{ 'templates.contact.form.title' | t }}</h2>
|
||||
{%- endif -%}
|
||||
<div class="contact__fields">
|
||||
{%- liquid
|
||||
assign contact_form_class = 'isolate'
|
||||
if settings.animations_reveal_on_scroll
|
||||
assign contact_form_class = 'isolate scroll-trigger animate--slide-in'
|
||||
endif
|
||||
-%}
|
||||
{%- form 'contact', id: 'ContactForm', class: contact_form_class -%}
|
||||
{%- if form.posted_successfully? -%}
|
||||
<h2 class="form-status form-status-list form__message" tabindex="-1" autofocus>
|
||||
{% render 'icon-success' %}
|
||||
{{ 'templates.contact.form.post_success' | t }}
|
||||
</h2>
|
||||
{%- elsif form.errors -%}
|
||||
<div class="form__message">
|
||||
<h2 class="form-status caption-large text-body" role="alert" tabindex="-1" autofocus>
|
||||
{% render 'icon-error' %}
|
||||
{{ 'templates.contact.form.error_heading' | t }}
|
||||
</h2>
|
||||
</div>
|
||||
<ul class="form-status-list caption-large" role="list">
|
||||
<li>
|
||||
<a href="#ContactForm-email" class="link">
|
||||
{{ form.errors.translated_fields.email | capitalize }}
|
||||
{{ form.errors.messages.email }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
{%- endif -%}
|
||||
<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>
|
||||
{%- endform -%}
|
||||
<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>
|
||||
{%- endform -%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue