Initial Commit with status quo
This commit is contained in:
2 files changed
+415
No files matched your search
@@ -0,0 +1,390 @@
|
||||
<div class="container strongly-spaced-row" data-section-type="contact" data-components="custom-select" data-cc-animate>
|
||||
<div id="template" class="reading-width">
|
||||
{% form 'contact' %}
|
||||
{% if form.posted_successfully? %}
|
||||
<p><strong>{{ 'contact.form.post_success' | t }}</strong></p>
|
||||
<!-- Meta Pixel Code for Lead -->
|
||||
<script>
|
||||
if (window.fbq) {
|
||||
fbq('track', 'Lead');
|
||||
}
|
||||
</script>
|
||||
{% else %}
|
||||
|
||||
{% if section.settings.contact_title != blank or section.settings.contact_text != blank %}
|
||||
<div class="lightish-spaced-row">
|
||||
{% if section.settings.contact_title != blank %}
|
||||
<h2>{{ section.settings.contact_title | escape }}</h2>
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if section.settings.contact_text != blank %}
|
||||
<div class="rte">{{ section.settings.contact_text }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if form.errors %}
|
||||
<ul class="errors">
|
||||
{% for field in form.errors %}
|
||||
<li>{{ field | replace: 'body','Message' | capitalize }} - {{ form.errors.messages[field] }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
|
||||
{%- if request.design_mode -%}
|
||||
{%- liquid
|
||||
assign email_exists = false
|
||||
for block in section.blocks
|
||||
if block.type == 'email_input'
|
||||
assign email_exists = true
|
||||
endif
|
||||
endfor
|
||||
-%}
|
||||
{%- if email_exists == false -%}
|
||||
<div class="errors">You must include the 'Email input' block for the form to work correctly.</div>
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
|
||||
<div class="flexible-layout flexible-layout--form">
|
||||
{% for block in section.blocks %}
|
||||
<div class="column column--{% if block.settings.half_width %}half{% else %}full{% endif %}">
|
||||
{% case block.type %}
|
||||
{% when 'name_input' %}
|
||||
<label for="contact_name">{{ 'contact.form.name' | t }}</label>
|
||||
<input
|
||||
type="text"
|
||||
autocomplete="name"
|
||||
required
|
||||
id="contact_name"
|
||||
name="contact[name]"
|
||||
value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}" />
|
||||
|
||||
{% when 'email_input' %}
|
||||
<label for="contact_email">{{ 'contact.form.email' | t }}</label>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
id="contact_email"
|
||||
class="email"
|
||||
name="contact[email]"
|
||||
autocomplete="email"
|
||||
spellcheck="false"
|
||||
autocapitalize="off"
|
||||
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
|
||||
title="Please enter a valid email address."
|
||||
value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}" />
|
||||
|
||||
{% when 'message_input' %}
|
||||
<label for="message">{{ 'contact.form.message' | t }}</label>
|
||||
<textarea id="message" name="contact[body]">{{ form.body }}</textarea>
|
||||
|
||||
{% when 'phone_input' %}
|
||||
<label for="contact_phone">{{ 'contact.form.phone' | t }}</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="contact_phone"
|
||||
autocomplete="tel"
|
||||
name="contact[{{ 'contact.form.phone' | t }}]"
|
||||
{% if block.settings.required %}required{% endif %}
|
||||
value="{% if form.phone %}{{ form.phone }}{% elsif customer %}{{ customer.phone }}{% endif %}" />
|
||||
|
||||
{% when 'custom_input' %}
|
||||
{% if block.settings.title != blank %}
|
||||
{%- assign title_handle = block.settings.title | handle -%}
|
||||
<label for="contact_{{ title_handle }}">{{ block.settings.title | escape }}</label>
|
||||
{% if block.settings.type == 'textarea' %}
|
||||
<textarea
|
||||
id="contact_{{ title_handle }}"
|
||||
name="contact[{{ title_handle }}]"
|
||||
{% if block.settings.required %}required{% endif %}>{{- form[title_handle] -}}</textarea>
|
||||
{% else %}
|
||||
<input
|
||||
type="{{ block.settings.type }}"
|
||||
id="contact_{{ title_handle }}"
|
||||
name="contact[{{ title_handle }}]"
|
||||
value="{{ form[title_handle] }}"
|
||||
{% if block.settings.required %}required{% endif %}/>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% when 'custom_dropdown' %}
|
||||
{% if block.settings.title != blank %}
|
||||
{%- liquid
|
||||
assign custom_options = block.settings.multiple_options | newline_to_br | strip_newlines | split: '<br />'
|
||||
assign input_id = block.settings.title | handle | prepend: 'contact_'
|
||||
assign input_name = block.settings.title | handle | prepend: 'contact[' | append: ']'
|
||||
-%}
|
||||
<div class="option-selector" data-selector-type="dropdown">
|
||||
{% render 'custom-select',
|
||||
id: input_id,
|
||||
label: block.settings.title,
|
||||
option_values: custom_options,
|
||||
selected_value: custom_options.first,
|
||||
include_native: true,
|
||||
native_name: input_name
|
||||
%}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% when 'text' %}
|
||||
<div class="rte">{{ block.settings.text }}</div>
|
||||
|
||||
{% endcase %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<!-- PRIVACY CHECKBOX HIER -->
|
||||
<div class="field field--checkbox lightly-spaced-row">
|
||||
<label class="field__label" for="privacy">
|
||||
<input
|
||||
class="field__input"
|
||||
type="checkbox"
|
||||
id="privacy"
|
||||
name="contact[privacy]"
|
||||
required
|
||||
value="yes"
|
||||
>
|
||||
* I agree to the <a href="/pages/privacy-policy" target="_blank">Privacy Policy</a>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="lightly-spaced-row">
|
||||
<button type="submit">{{ 'contact.form.send' | t }}</button>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
{% endform %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const form = document.querySelector('form[action="/contact"]');
|
||||
if (form) {
|
||||
form.addEventListener('submit', function(event) {
|
||||
const emailInput = form.querySelector('input[name="contact[email]"]');
|
||||
if (emailInput) {
|
||||
const email = emailInput.value.trim();
|
||||
const emailPattern = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/i;
|
||||
if (!emailPattern.test(email)) {
|
||||
alert('Please enter a valid email address.');
|
||||
emailInput.focus();
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{% schema %}
|
||||
{
|
||||
"name": "Contact form",
|
||||
"class": "section-contact-form",
|
||||
"settings": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "contact_title",
|
||||
"label": "Heading",
|
||||
"default": "Contact us"
|
||||
},
|
||||
{
|
||||
"type": "richtext",
|
||||
"id": "contact_text",
|
||||
"label": "Introduction"
|
||||
}
|
||||
],
|
||||
"blocks": [
|
||||
{
|
||||
"type": "name_input",
|
||||
"name": "Name input",
|
||||
"limit": 1,
|
||||
"settings": [
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": "The label can be changed in the translation editor."
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "half_width",
|
||||
"label": "Half width",
|
||||
"default": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "email_input",
|
||||
"name": "Email input",
|
||||
"limit": 1,
|
||||
"settings": [
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": "REQUIRED - Contact form will not work if this block is removed."
|
||||
},
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": "The label can be changed in the translation editor."
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "half_width",
|
||||
"label": "Half width",
|
||||
"default": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "message_input",
|
||||
"name": "Message input",
|
||||
"limit": 1,
|
||||
"settings": [
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": "The label can be changed in the translation editor."
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "half_width",
|
||||
"label": "Half width",
|
||||
"default": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "phone_input",
|
||||
"name": "Phone input",
|
||||
"limit": 1,
|
||||
"settings": [
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "required",
|
||||
"label": "Required",
|
||||
"default": false
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "half_width",
|
||||
"label": "Half width",
|
||||
"default": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "custom_input",
|
||||
"name": "Custom input",
|
||||
"settings": [
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": "Custom inputs require a label, and that label may only be used once in the form."
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "title",
|
||||
"label": "Label",
|
||||
"default": "Custom input"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"id": "type",
|
||||
"label": "Type",
|
||||
"default": "text",
|
||||
"options": [
|
||||
{
|
||||
"label": "Text",
|
||||
"value": "text"
|
||||
},
|
||||
{
|
||||
"label": "Number",
|
||||
"value": "number"
|
||||
},
|
||||
{
|
||||
"label": "Email",
|
||||
"value": "email"
|
||||
},
|
||||
{
|
||||
"label": "Text area",
|
||||
"value": "textarea"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "required",
|
||||
"label": "Required",
|
||||
"default": false
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "half_width",
|
||||
"label": "Half width",
|
||||
"default": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "custom_dropdown",
|
||||
"name": "Custom dropdown",
|
||||
"settings": [
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": "Custom dropdowns require a label, and that label may only be used once in the form."
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "title",
|
||||
"label": "Label",
|
||||
"default": "Custom dropdown"
|
||||
},
|
||||
{
|
||||
"type": "textarea",
|
||||
"id": "multiple_options",
|
||||
"label": "Options",
|
||||
"default": "Option 1\nOption 2\nOption 3",
|
||||
"info": "One option on each line"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"id": "half_width",
|
||||
"label": "Half width",
|
||||
"default": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"name": "Text",
|
||||
"settings": [
|
||||
{
|
||||
"type": "richtext",
|
||||
"id": "text",
|
||||
"label": "Text",
|
||||
"default": "<p>Text content</p>"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"presets": [
|
||||
{
|
||||
"name": "Contact form",
|
||||
"blocks": [
|
||||
{
|
||||
"type": "name_input",
|
||||
"settings": {
|
||||
"half_width": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "email_input",
|
||||
"settings": {
|
||||
"half_width": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "message_input"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
{% endschema %}
|
||||
@@ -0,0 +1,25 @@
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
|
||||
</head>
|
||||
|
||||
<div class="field">
|
||||
<label for="ContactFormDates">Wunschtermin(e)</label>
|
||||
<input
|
||||
type="text"
|
||||
id="ContactFormDates"
|
||||
name="contact[Wunschtermine]"
|
||||
placeholder="Datum auswählen"
|
||||
>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
|
||||
flatpickr("#ContactFormDates", {
|
||||
mode: "multiple",
|
||||
dateFormat: "Y-m-d",
|
||||
minDate: "today"
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
Reference in new issue
Block a user