2022-11-01 19:45:06 +00:00
{% extends "base.askama.html" %}
2022-10-29 15:12:29 +00:00
{% block body %}
< p >
Alternativ können Sie im unteren Formular Ihre E-Mail-Adresse (und optional Telefon-Nummer) mit einer Nachricht mit Ihrem Anliegen hinterlassen. Wir versuchen dann, Sie so früh wie möglich zu kontaktieren.
< / p >
< h2 > Kontakt-Formular< / h2 >
2022-11-06 20:24:30 +00:00
< form id = "contact-form"
action="{{ path_prefix }}/submit"
method="post"
class="{% if was_validated %}was-validated{% endif %}"
novalidate>
2022-10-29 15:12:29 +00:00
< input type = "hidden" name = "id" value = "{{ id }}" required >
< div class = "mb-3" >
< label for = "name" class = "form-label" > Name< / label >
2022-11-06 20:24:30 +00:00
< input type = "text"
name="name"
value="{{ name }}"
class="form-control"
id="exampleInputEmail1"
required>
< div class = "invalid-feedback" > Geben Sie bitte Ihren Namen ein< / div >
2022-10-29 15:12:29 +00:00
< / div >
< div class = "mb-3" >
< label for = "email" class = "form-label" > E-Mail< / label >
2022-11-06 20:24:30 +00:00
< input type = "email"
name="email"
value="{{ email }}"
class="form-control"
id="email"
required>
< div class = "invalid-feedback" > Geben Sie bitte Ihre E-Mail-Adresse ein< / div >
2022-10-29 15:12:29 +00:00
< / div >
< div class = "mb-3" >
< label for = "telefon" class = "form-label" > Telefon (optional)< / label >
2022-11-06 20:24:30 +00:00
< input type = "text"
name="telefon"
value="{{ telefon }}"
class="form-control"
id="telefon">
2022-10-29 15:12:29 +00:00
< / div >
< div class = "mb-5" >
< label for = "message" class = "form-label" > Nachricht< / label >
< textarea name = "message" rows = "5" class = "form-control" id = "message" style = "resize: none;" required > {{ message }}< / textarea >
2022-11-06 20:24:30 +00:00
< div class = "invalid-feedback" > Geben Sie bitte eine Nachricht mit Ihrem Anliegen ein< / div >
2022-10-29 15:12:29 +00:00
< / div >
2022-10-27 16:44:40 +00:00
2022-10-29 15:12:29 +00:00
< div class = "mb-3" >
< img src = "data:image/png;base64,{{ captcha }}" >
< / div >
< div class = "mb-3" >
< label for = "captcha_answer" class = "form-label" > Code vom oberen Bild eingeben< / label >
2022-11-06 20:24:30 +00:00
< input type = "text"
name="captcha_answer"
class="form-control"
id="captcha_answer"
required>
< div class = "invalid-feedback" > Geben Sie bitte den Code vom oberen Bild ein< / div >
2022-10-29 15:12:29 +00:00
< / div >
2022-10-26 00:23:55 +00:00
2022-10-29 15:12:29 +00:00
< div class = "d-grid" >
< button type = "submit" class = "btn btn-primary" > Abschicken< / button >
< / div >
< / form >
{% endblock %}
{% block scripts %}
< script >
"use strict";
2022-11-06 20:24:30 +00:00
2022-10-29 15:12:29 +00:00
const form = document.querySelector("#contact-form");
2022-11-06 20:24:30 +00:00
2022-10-29 15:12:29 +00:00
form.addEventListener("submit", (event) => {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
2022-11-06 20:24:30 +00:00
2022-10-29 15:12:29 +00:00
form.classList.add("was-validated");
});
< / script >
{% endblock %}