240 lines
8.4 KiB
Plaintext
240 lines
8.4 KiB
Plaintext
{{ 'section-contact-form.css' | asset_url | stylesheet_tag }}
|
|
|
|
{%- style -%}
|
|
.section-{{ section.id }}-padding {
|
|
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
|
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
|
}
|
|
|
|
@media screen and (min-width: 750px) {
|
|
.section-{{ section.id }}-padding {
|
|
padding-top: {{ section.settings.padding_top }}px;
|
|
padding-bottom: {{ section.settings.padding_bottom }}px;
|
|
}
|
|
}
|
|
{%- endstyle -%}
|
|
|
|
<div class="color-{{ section.settings.color_scheme }} gradient">
|
|
<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 %}">
|
|
{{ 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? -%}
|
|
<dotlottie-player
|
|
id="shx-contact-form-contact-us-send"
|
|
src="{{ 'lottie_page_contact_us_send.lottie' | asset_url }}"
|
|
background="transparent"
|
|
speed="1"
|
|
autoplay
|
|
direction="1"
|
|
mode="bounce"></dotlottie-player>
|
|
|
|
<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="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>
|
|
</div>
|
|
</div>
|
|
|
|
{% schema %}
|
|
{
|
|
"name": "t:sections.contact-form.name",
|
|
"tag": "section",
|
|
"class": "section",
|
|
"disabled_on": {
|
|
"groups": ["header", "footer"]
|
|
},
|
|
"settings": [
|
|
{
|
|
"type": "inline_richtext",
|
|
"id": "heading",
|
|
"default": "Contact form",
|
|
"label": "Heading"
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "heading_size",
|
|
"options": [
|
|
{
|
|
"value": "h2",
|
|
"label": "t:sections.all.heading_size.options__1.label"
|
|
},
|
|
{
|
|
"value": "h1",
|
|
"label": "t:sections.all.heading_size.options__2.label"
|
|
},
|
|
{
|
|
"value": "h0",
|
|
"label": "t:sections.all.heading_size.options__3.label"
|
|
}
|
|
],
|
|
"default": "h1",
|
|
"label": "t:sections.all.heading_size.label"
|
|
},
|
|
{
|
|
"type": "color_scheme",
|
|
"id": "color_scheme",
|
|
"label": "t:sections.all.colors.label",
|
|
"default": "scheme-1"
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "t:sections.all.padding.section_padding_heading"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_top",
|
|
"min": 0,
|
|
"max": 100,
|
|
"step": 4,
|
|
"unit": "px",
|
|
"label": "t:sections.all.padding.padding_top",
|
|
"default": 36
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_bottom",
|
|
"min": 0,
|
|
"max": 100,
|
|
"step": 4,
|
|
"unit": "px",
|
|
"label": "t:sections.all.padding.padding_bottom",
|
|
"default": 36
|
|
}
|
|
],
|
|
"presets": [
|
|
{
|
|
"name": "t:sections.contact-form.presets.name"
|
|
}
|
|
]
|
|
}
|
|
{% endschema %}
|