contact-form/templates/contact_form.askama.html

107 lines
3.9 KiB
HTML
Raw Normal View History

2022-11-01 19:45:06 +00:00
{% extends "base.askama.html" %}
2022-10-29 15:12:29 +00:00
{% block body %}
2022-12-03 16:08:23 +00:00
<p>{{ strings.description }}</p>
<h2>{{ strings.title }}</h2>
2022-10-29 15:12:29 +00:00
2022-11-06 20:24:30 +00:00
<form id="contact-form"
2022-12-17 17:37:04 +00:00
action="{{ base.path_prefix }}/"
2022-11-06 20:24:30 +00:00
method="post"
2023-02-23 19:22:59 +00:00
{% if was_validated %}class="was-validated"{% endif %}
2022-11-06 20:24:30 +00:00
novalidate>
2022-10-29 15:12:29 +00:00
<input type="hidden" name="id" value="{{ id }}" required>
<div class="mb-3">
2022-12-03 16:08:23 +00:00
<label for="name" class="form-label">{{ strings.name_field.label }}</label>
2022-11-06 20:24:30 +00:00
<input type="text"
name="name"
2023-02-25 20:35:20 +00:00
value="{{ persistent_field_contents.name }}"
2022-11-06 20:24:30 +00:00
class="form-control"
id="exampleInputEmail1"
required>
2023-02-25 17:08:21 +00:00
<div class="invalid-feedback">{{ strings.name_field.required_feedback }}</div>
2022-10-29 15:12:29 +00:00
</div>
<div class="mb-3">
2022-12-03 16:08:23 +00:00
<label for="email" class="form-label">{{ strings.email_field.label }}</label>
2022-11-06 20:24:30 +00:00
<input type="email"
name="email"
2023-02-25 20:35:20 +00:00
value="{{ persistent_field_contents.email }}"
2022-11-06 20:24:30 +00:00
class="form-control"
id="email"
required>
2023-02-25 17:08:21 +00:00
<div class="invalid-feedback">{{ strings.email_field.required_feedback }}</div>
2022-10-29 15:12:29 +00:00
</div>
2022-10-27 16:44:40 +00:00
2023-02-25 17:08:21 +00:00
{% for custom_field in custom_fields %}
<div class="mb-3">
2023-02-25 20:35:20 +00:00
{% let value = persistent_field_contents.custom[loop.index0] %}
2023-02-25 17:08:21 +00:00
{% let required = custom_field.required_feedback.is_some() %}
2022-10-26 00:23:55 +00:00
2023-02-25 20:14:58 +00:00
<label for="{{ custom_field.key }}" class="form-label">{{ custom_field.label }}</label>
2022-12-03 16:42:25 +00:00
2023-02-25 17:08:21 +00:00
{% match custom_field.field_type %}
2023-02-25 19:47:34 +00:00
{% when config::CustomFieldType::Text %}
<input type="text"
class="form-control"
2023-02-25 20:14:58 +00:00
name="{{ custom_field.key }}"
id="{{ custom_field.key }}"
2023-02-25 19:47:34 +00:00
value="{{ value }}"
{% if required %}required{% endif %}>
{% when config::CustomFieldType::Textarea with { rows } %}
<textarea rows="{{ rows }}"
style="resize: none"
class="form-control"
2023-02-25 20:14:58 +00:00
name="{{ custom_field.key }}"
id="{{ custom_field.key }}"
2023-02-25 19:47:34 +00:00
{% if required %}required{% endif %}>{{ value }}</textarea>
{% endmatch %}
2023-02-25 17:08:21 +00:00
2023-02-25 19:47:34 +00:00
{% match custom_field.required_feedback %}
{% when Some with (feedback) %}
<div class="invalid-feedback">{{ feedback }}</div>
{% when None %}
{% endmatch %}
</div>
{% endfor %}
2023-02-25 17:08:21 +00:00
2023-02-25 19:47:34 +00:00
<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>
2023-02-25 17:08:21 +00:00
2023-02-25 19:47:34 +00:00
{% if error_message.len() > 0 %}
<div class="alert alert-warning" role="alert">{{ error_message }}</div>
{% endif %}
2023-02-25 17:08:21 +00:00
2023-02-25 19:47:34 +00:00
<div class="d-grid">
<button type="submit" class="btn btn-primary">{{ strings.submit }}</button>
</div>
</form>
2022-10-29 15:12:29 +00:00
{% endblock %}
{% block scripts %}
<script>
"use strict";
2022-12-03 16:08:23 +00:00
const form = document.querySelector("form#contact-form");
2022-10-29 15:12:29 +00:00
form.addEventListener("submit", (event) => {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
2022-12-03 16:08:23 +00:00
2022-10-29 15:12:29 +00:00
form.classList.add("was-validated");
});
</script>
{% endblock %}