106 lines
3.9 KiB
HTML
106 lines
3.9 KiB
HTML
{% extends "base.askama.html" %}
|
|
|
|
{% block body %}
|
|
<p>{{ strings.description }}</p>
|
|
|
|
<h2>{{ strings.title }}</h2>
|
|
|
|
<form id="contact-form"
|
|
action="{{ base.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="{{ persistent_field_contents.name }}"
|
|
class="form-control"
|
|
id="exampleInputEmail1"
|
|
required>
|
|
<div class="invalid-feedback">{{ strings.name_field.required_feedback }}</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="email" class="form-label">{{ strings.email_field.label }}</label>
|
|
<input type="email"
|
|
name="email"
|
|
value="{{ persistent_field_contents.email }}"
|
|
class="form-control"
|
|
id="email"
|
|
required>
|
|
<div class="invalid-feedback">{{ strings.email_field.required_feedback }}</div>
|
|
</div>
|
|
|
|
{% for custom_field in custom_fields %}
|
|
<div class="mb-3">
|
|
{% let value = persistent_field_contents.custom[loop.index0] %}
|
|
{% let required = custom_field.required_feedback.is_some() %}
|
|
|
|
<label for="{{ custom_field.key }}" class="form-label">{{ custom_field.label }}</label>
|
|
|
|
{% match custom_field.field_type %}
|
|
{% when config::CustomFieldType::Text %}
|
|
<input type="text"
|
|
class="form-control"
|
|
name="{{ custom_field.key }}"
|
|
id="{{ custom_field.key }}"
|
|
value="{{ value }}"
|
|
{% if required %}required{% endif %}>
|
|
{% when config::CustomFieldType::Textarea with { rows } %}
|
|
<textarea rows="{{ rows }}"
|
|
style="resize: none"
|
|
class="form-control"
|
|
name="{{ custom_field.key }}"
|
|
id="{{ custom_field.key }}"
|
|
{% if required %}required{% endif %}>{{ value }}</textarea>
|
|
{% endmatch %}
|
|
|
|
{% match custom_field.required_feedback %}
|
|
{% when Some with (feedback) %}
|
|
<div class="invalid-feedback">{{ feedback }}</div>
|
|
{% when None %}
|
|
{% endmatch %}
|
|
</div>
|
|
{% endfor %}
|
|
|
|
<div class="mb-2 mt-4">
|
|
<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.required_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 %}
|