95 lines
4.4 KiB
HTML
95 lines
4.4 KiB
HTML
{% load wagtailimages_tags %}
|
|
<section class="saas-demo saas-demo--modal-trigger saas-demo--{{ self.background_style }}"
|
|
data-width="{{ self.layout_width }}"
|
|
data-demo-modal-root>
|
|
<div class="saas-demo__container">
|
|
<div class="saas-demo__content">
|
|
<h2 class="saas-demo__title">{{ self.section_title }}</h2>
|
|
{% if self.section_subtitle %}
|
|
<div class="saas-demo__subtitle">{{ self.section_subtitle }}</div>
|
|
{% endif %}
|
|
|
|
<button type="button" class="saas-demo__trigger" data-demo-modal-open>
|
|
{{ self.submit_button_text }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div class="saas-demo__modal" data-demo-modal hidden>
|
|
<div class="saas-demo__modal-backdrop" data-demo-modal-close></div>
|
|
<div class="saas-demo__modal-content">
|
|
<button type="button" class="saas-demo__modal-close" data-demo-modal-close aria-label="Close">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
|
|
</button>
|
|
|
|
<h3 class="saas-demo__modal-title">{{ self.section_title }}</h3>
|
|
|
|
<form class="saas-demo__form" action="{% url "contact_form:contact-form-handler" %}" method="post">
|
|
{% csrf_token %}
|
|
<div class="saas-demo__fields">
|
|
{% for field in self.form_fields %}
|
|
<div class="saas-demo__field">
|
|
<label class="saas-demo__label" for="modal-{{ field.field_type }}">
|
|
{{ field.label }}
|
|
{% if field.required %}<span class="saas-demo__required">*</span>{% endif %}
|
|
</label>
|
|
{% if field.field_type == 'message' %}
|
|
<textarea class="saas-demo__textarea"
|
|
id="modal-{{ field.field_type }}"
|
|
name="{% if field.field_type == "email" %}email_from{% elif field.field_type == "phone" %}phonenumber{% elif field.field_type == "text" %}name{% else %}{{ field.field_type }}{% endif %}"
|
|
placeholder="{{ field.placeholder }}"
|
|
{% if field.required %}required{% endif %}></textarea>
|
|
{% else %}
|
|
<input class="saas-demo__input"
|
|
type="{% if field.field_type == 'email' %}email{% elif field.field_type == 'phone' %}tel{% else %}text{% endif %}"
|
|
id="modal-{{ field.field_type }}"
|
|
name="{% if field.field_type == "email" %}email_from{% elif field.field_type == "phone" %}phonenumber{% elif field.field_type == "text" %}name{% else %}{{ field.field_type }}{% endif %}"
|
|
placeholder="{{ field.placeholder }}"
|
|
{% if field.required %}required{% endif %}>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<button type="submit" class="saas-demo__submit">{{ self.submit_button_text }}</button>
|
|
|
|
{% if self.privacy_text %}
|
|
<div class="saas-demo__privacy">{{ self.privacy_text }}</div>
|
|
{% endif %}
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script>
|
|
(function () {
|
|
const roots = document.querySelectorAll('[data-demo-modal-root]');
|
|
roots.forEach((root) => {
|
|
if (root.dataset.modalBound === "1") return;
|
|
root.dataset.modalBound = "1";
|
|
|
|
const modal = root.querySelector('[data-demo-modal]');
|
|
const openBtn = root.querySelector('[data-demo-modal-open]');
|
|
const closeBtns = root.querySelectorAll('[data-demo-modal-close]');
|
|
if (!modal || !openBtn) return;
|
|
|
|
const openModal = () => {
|
|
modal.hidden = false;
|
|
document.body.style.overflow = 'hidden';
|
|
};
|
|
|
|
const closeModal = () => {
|
|
modal.hidden = true;
|
|
document.body.style.overflow = '';
|
|
};
|
|
|
|
openBtn.addEventListener('click', openModal);
|
|
closeBtns.forEach((btn) => btn.addEventListener('click', closeModal));
|
|
|
|
root.addEventListener('keydown', (event) => {
|
|
if (event.key === 'Escape' && !modal.hidden) closeModal();
|
|
});
|
|
});
|
|
})();
|
|
</script>
|