Stop tracking .env

themes/chill-theme/layouts/shortcodes/contact-form.html

@@ -3,7 +3,7 @@
 
 
 <form id="contactForm" class="max-w-lg mx-auto p-6 bg-white rounded shadow" method="POST"
-	action="{{ $form.action | default " http://localhost:3001/contact" }}">
+	action="{{ $form.action | default "http://localhost:3001/contact" }}">
 	<h3 class="text-2xl font-bold mb-4">{{ $form.title }}</h3>
 	{{ range $form.fields }}
 	<div class="mb-4">
@@ -38,10 +38,24 @@
 			{{ $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');
@@ -53,7 +67,9 @@
 			}
 			form.addEventListener('submit', function (e) {
 				e.preventDefault();
-				resultDiv.innerHTML = '';
+				if (resultDiv) {
+					resultDiv.innerHTML = '';
+				}
 				const formData = new FormData(form);
 				fetch(form.action, {
 					method: 'POST',
@@ -62,14 +78,14 @@
 					.then(async response => {
 						const text = await response.text();
 						if (response.status === 200) {
-							resultDiv.innerHTML = `<div style='background:#e6ffed;color:#228B22;padding:1em;border-radius:6px;border:1px solid #228B22;'>${text}</div>`;
+							showResult(text, true);
 							form.reset();
 						} else {
-							resultDiv.innerHTML = `<div style='background:#ffe6e6;color:#b22222;padding:1em;border-radius:6px;border:1px solid #b22222;'>${text}</div>`;
+							showResult(text, false);
 						}
 					})
-					.catch(err => {
-						resultDiv.innerHTML = `<div style='background:#ffe6e6;color:#b22222;padding:1em;border-radius:6px;border:1px solid #b22222;'>Erreur réseau</div>`;
+					.catch(() => {
+						showResult('Erreur réseau', false);
 					});
 			});
 		});