98 lines
3.7 KiB
HTML
98 lines
3.7 KiB
HTML
{{ $form := .Page.Params.contactForm }}
|
|
{{ $baseURL := default "http://localhost" (getenv "BASE_URL") }}
|
|
{{ $normalizedBaseURL := strings.TrimSuffix "/" $baseURL }}
|
|
{{ $defaultContactAction := printf "%s:3001/contact" $normalizedBaseURL }}
|
|
|
|
|
|
|
|
<form id="contactForm" class="max-w-lg mx-auto p-6 bg-white rounded shadow" method="POST"
|
|
action="{{ $form.action | default $defaultContactAction }}">
|
|
<h3 class="text-2xl font-bold mb-4">{{ $form.title }}</h3>
|
|
{{ range $form.fields }}
|
|
<div class="mb-4">
|
|
{{ if eq .type "textarea" }}
|
|
<label for="{{ .name }}">{{ .label }}</label>
|
|
<textarea id="{{ .name }}" name="{{ .name }}" rows="5" {{ if .required }}required{{ end }}
|
|
class="w-full px-3 py-2 border rounded focus:outline-none focus:ring focus:border-blue-300"></textarea>
|
|
{{ else if eq .type "select" }}
|
|
<select id="{{ .name }}" name="{{ .name }}" {{ if .required }}required{{ end }}
|
|
class="w-full px-3 py-2 border rounded focus:outline-none focus:ring focus:border-blue-300">
|
|
{{ range .options }}
|
|
<option value="{{ .value }}">{{ .label | default .value }}</option>
|
|
{{ end }}
|
|
</select>
|
|
{{ else }}
|
|
<input type="{{ .type }}" placeholder="{{.label}}" id="{{ .name }}" name="{{ .name }}" {{ if .required }}required{{
|
|
end }} class="w-full px-3 py-2 border rounded focus:outline-none focus:ring focus:border-blue-300" />
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
<!-- Champ honeypot invisible pour les robots -->
|
|
<div style="position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;">
|
|
<label for="website">Ne pas remplir ce champ</label>
|
|
<input type="text" id="website" name="website" tabindex="-1" autocomplete="off" />
|
|
</div>
|
|
<div class=" text-md text-gray-500 mt-1 prose prose-sm">
|
|
{{ $form.hint | markdownify | safeHTML }}
|
|
</div>
|
|
<div class="flex justify-end mt-4">
|
|
<button type="submit"
|
|
class="px-6 py-3 rounded-lg font-bold transition duration-200 ease-in-out border-2 text-primary-400 border-primary-400 hover:border-primary-400 hover:text-primary-400 hover:scale-105">
|
|
{{ $form.button.label | default "Envoyer" }}
|
|
</button>
|
|
</div>
|
|
<div id="contact-result" class="mt-4" aria-live="polite"></div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const form = document.getElementById('contactForm');
|
|
const resultDiv = document.getElementById('contact-result');
|
|
if (!form) {
|
|
return;
|
|
}
|
|
|
|
function showResult(message, isSuccess) {
|
|
if (!resultDiv) {
|
|
return;
|
|
}
|
|
const bg = isSuccess ? '#e6ffed' : '#ffe6e6';
|
|
const color = isSuccess ? '#228B22' : '#b22222';
|
|
resultDiv.innerHTML = "<div style='background:" + bg + ";color:" + color + ";padding:1em;border-radius:6px;border:1px solid " + color + ";'></div>";
|
|
resultDiv.firstElementChild.textContent = message;
|
|
}
|
|
// Pré-sélectionner le champ "sujet" si paramètre dans l'URL
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const subject = urlParams.get('subject');
|
|
if (subject) {
|
|
const select = document.getElementById('subject');
|
|
if (select) {
|
|
select.value = subject;
|
|
}
|
|
}
|
|
form.addEventListener('submit', function (e) {
|
|
e.preventDefault();
|
|
if (resultDiv) {
|
|
resultDiv.innerHTML = '';
|
|
}
|
|
const formData = new FormData(form);
|
|
fetch(form.action, {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(async response => {
|
|
const text = await response.text();
|
|
if (response.status === 200) {
|
|
showResult(text, true);
|
|
form.reset();
|
|
} else {
|
|
showResult(text, false);
|
|
}
|
|
})
|
|
.catch(() => {
|
|
showResult('Erreur réseau', false);
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</form>
|
|
|
|
{{ partial "shortcodes/contact-developer.html" (dict "developers" $form.developers) }} |