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

Use base template

Browse source
This commit is contained in:
Mo 2022-10-29 17:12:29 +02:00
parent 7d83419389
commit 288f1d9f1b
1 changed files with 62 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

104
templates/form.html.tera
View file

@ -1,51 +1,71 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contact form</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<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>
{% extends "base" %}
<h2>Kontakt-Formular</h2>
{% 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>
<form action="{{ path_prefix }}/submit" method="post">
<input type="hidden" name="id" value="{{ id }}" required>
<h2>Kontakt-Formular</h2>
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" name="name" value="{{ name }}" class="form-control" id="exampleInputEmail1" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">E-Mail</label>
<input type="email" name="email" value="{{ email }}" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="telefon" class="form-label">Telefon (optional)</label>
<input type="text" name="telefon" value="{{ telefon }}" class="form-control" id="telefon">
</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>
</div>
<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>
<div class="mb-3">
<img src="data:image/png;base64,{{ captcha }}">
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" name="name" value="{{ name }}" class="form-control" id="exampleInputEmail1" required>
<div class="invalid-feedback">
Geben Sie bitte Ihren Namen ein
</div>
<div class="mb-3">
<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>
</div>
<div class="mb-3">
<label for="email" class="form-label">E-Mail</label>
<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>
</div>
<div class="mb-3">
<label for="telefon" class="form-label">Telefon (optional)</label>
<input type="text" name="telefon" value="{{ telefon }}" class="form-control" id="telefon">
</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>
<div class="invalid-feedback">
Geben Sie bitte eine Nachricht mit Ihrem Anliegen ein
</div>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary">Abschicken</button>
<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>
<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>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
<div class="d-grid">
<button type="submit" class="btn btn-primary">Abschicken</button>
</div>
</form>
{% endblock %}
{% block scripts %}
<script>
"use strict";
const form = document.querySelector("#contact-form");
form.addEventListener("submit", (event) => {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add("was-validated");
});
</script>
{% endblock %}