mo8it/contact-form
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Format with djlint

Browse source
This commit is contained in:
Mo 2022-11-06 21:24:30 +01:00
parent 8445a59cbe
commit 97e12feb60
3 changed files with 37 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
templates/base.askama.html
View file

@ -8,7 +8,8 @@
{% block styles %}{% endblock %} {% block styles %}{% endblock %}
<link href="{{ path_prefix }}/static/bootstrap/bootstrap.min.css" rel="stylesheet"/> <link href="{{ path_prefix }}/static/bootstrap/bootstrap.min.css"
rel="stylesheet"/>
</head> </head>
<body> <body>
{% block body %}{% endblock %} {% block body %}{% endblock %}

54
templates/contact_form.askama.html
View file

@ -7,33 +7,45 @@
<h2>Kontakt-Formular</h2> <h2>Kontakt-Formular</h2>
<form id="contact-form" action="{{ path_prefix }}/submit" method="post" class="{% if was_validated %}was-validated{% endif %}" novalidate> <form id="contact-form"
action="{{ path_prefix }}/submit"
method="post"
class="{% if was_validated %}was-validated{% endif %}"
novalidate>
<input type="hidden" name="id" value="{{ id }}" required> <input type="hidden" name="id" value="{{ id }}" required>
<div class="mb-3"> <div class="mb-3">
<label for="name" class="form-label">Name</label> <label for="name" class="form-label">Name</label>
<input type="text" name="name" value="{{ name }}" class="form-control" id="exampleInputEmail1" required> <input type="text"
<div class="invalid-feedback"> name="name"
Geben Sie bitte Ihren Namen ein value="{{ name }}"
</div> class="form-control"
id="exampleInputEmail1"
required>
<div class="invalid-feedback">Geben Sie bitte Ihren Namen ein</div>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="email" class="form-label">E-Mail</label> <label for="email" class="form-label">E-Mail</label>
<input type="email" name="email" value="{{ email }}" class="form-control" id="email" required> <input type="email"
<div class="invalid-feedback"> name="email"
Geben Sie bitte Ihre E-Mail-Adresse ein value="{{ email }}"
</div> class="form-control"
id="email"
required>
<div class="invalid-feedback">Geben Sie bitte Ihre E-Mail-Adresse ein</div>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="telefon" class="form-label">Telefon (optional)</label> <label for="telefon" class="form-label">Telefon (optional)</label>
<input type="text" name="telefon" value="{{ telefon }}" class="form-control" id="telefon"> <input type="text"
name="telefon"
value="{{ telefon }}"
class="form-control"
id="telefon">
</div> </div>
<div class="mb-5"> <div class="mb-5">
<label for="message" class="form-label">Nachricht</label> <label for="message" class="form-label">Nachricht</label>
<textarea name="message" rows="5" class="form-control" id="message" style="resize: none;" required>{{ message }}</textarea> <textarea name="message" rows="5" class="form-control" id="message" style="resize: none;" required>{{ message }}</textarea>
<div class="invalid-feedback"> <div class="invalid-feedback">Geben Sie bitte eine Nachricht mit Ihrem Anliegen ein</div>
Geben Sie bitte eine Nachricht mit Ihrem Anliegen ein
</div>
</div> </div>
<div class="mb-3"> <div class="mb-3">
@ -41,10 +53,12 @@
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="captcha_answer" class="form-label">Code vom oberen Bild eingeben</label> <label for="captcha_answer" class="form-label">Code vom oberen Bild eingeben</label>
<input type="text" name="captcha_answer" class="form-control" id="captcha_answer" required> <input type="text"
<div class="invalid-feedback"> name="captcha_answer"
Geben Sie bitte den Code vom oberen Bild ein class="form-control"
</div> id="captcha_answer"
required>
<div class="invalid-feedback">Geben Sie bitte den Code vom oberen Bild ein</div>
</div> </div>
<div class="d-grid"> <div class="d-grid">
@ -56,15 +70,15 @@
{% block scripts %} {% block scripts %}
<script> <script>
"use strict"; "use strict";
const form = document.querySelector("#contact-form"); const form = document.querySelector("#contact-form");
form.addEventListener("submit", (event) => { form.addEventListener("submit", (event) => {
if (!form.checkValidity()) { if (!form.checkValidity()) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
} }
form.classList.add("was-validated"); form.classList.add("was-validated");
}); });
</script> </script>

6
templates/success.askama.html
View file

@ -1,7 +1,3 @@
{% extends "base.askama.html" %} {% extends "base.askama.html" %}
{% block body %} {% block body %}<div class="alert alert-success" role="alert">{{ message }}</div>{% endblock %}
<div class="alert alert-success" role="alert">
{{ message }}
</div>
{% endblock %}