contact-form/templates/contact_form.askama.html

87 lines
3.1 KiB
HTML

{% extends "base.askama.html" %}
{% block body %}
<p>{{ strings.description }}</p>
<h2>{{ strings.title }}</h2>
<form id="contact-form"
action="{{ path_prefix }}/"
method="post"
{% if was_validated %} class="was-validated"{% endif %}
novalidate>
<input type="hidden" name="id" value="{{ id }}" required>
<div class="mb-3">
<label for="name" class="form-label">{{ strings.name_field.label }}</label>
<input type="text"
name="name"
value="{{ name }}"
class="form-control"
id="exampleInputEmail1"
required>
<div class="invalid-feedback">{{ strings.name_field.invalid_feedback }}</div>
</div>
<div class="mb-3">
<label for="email" class="form-label">{{ strings.email_field.label }}</label>
<input type="email"
name="email"
value="{{ email }}"
class="form-control"
id="email"
required>
<div class="invalid-feedback">{{ strings.email_field.invalid_feedback }}</div>
</div>
<div class="mb-3">
<label for="telefon" class="form-label">{{ strings.telefon_field_label }}</label>
<input type="text"
name="telefon"
value="{{ telefon }}"
class="form-control"
id="telefon">
</div>
<div class="mb-5">
<label for="message" class="form-label">{{ strings.message_field.label }}</label>
<textarea name="message" rows="5" class="form-control" id="message" style="resize: none;" required>{{ message }}</textarea>
<div class="invalid-feedback">{{ strings.message_field.invalid_feedback }}</div>
</div>
<div class="mb-3">
<img src="data:image/png;base64,{{ captcha }}">
</div>
<div class="mb-3">
<label for="captcha_answer" class="form-label">{{ strings.captcha_field.label }}</label>
<input type="text"
name="captcha_answer"
class="form-control"
id="captcha_answer"
required>
<div class="invalid-feedback">{{ strings.captcha_field.invalid_feedback }}</div>
</div>
{% if error_message.len() > 0 %}
<div class="alert alert-warning" role="alert">{{ error_message }}</div>
{% endif %}
<div class="d-grid">
<button type="submit" class="btn btn-primary">{{ strings.submit }}</button>
</div>
</form>
{% endblock %}
{% block scripts %}
<script>
"use strict";
const form = document.querySelector("form#contact-form");
form.addEventListener("submit", (event) => {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add("was-validated");
});
</script>
{% endblock %}