contact-form/templates/contact_form.askama.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 %}