From 4c0bdbdbac2c3617de2030563ee03a0666efb8aa Mon Sep 17 00:00:00 2001 From: Calum Muir Date: Sun, 28 Dec 2025 13:04:14 +0000 Subject: [PATCH] Load contact form JS as external script --- public/contact-form.js | 55 ++++++ src/pages/contact.astro | 411 ++++++++++++++++++++-------------------- 2 files changed, 263 insertions(+), 203 deletions(-) create mode 100644 public/contact-form.js diff --git a/public/contact-form.js b/public/contact-form.js new file mode 100644 index 0000000..a4fc103 --- /dev/null +++ b/public/contact-form.js @@ -0,0 +1,55 @@ +(() => { + const form = document.querySelector("[data-contact-form]"); + const message = document.querySelector("[data-form-message]"); + const submitButton = document.querySelector("[data-form-submit]"); + + if (!form || !message || !submitButton) return; + + form.addEventListener("submit", async (event) => { + event.preventDefault(); + if (submitButton.disabled) return; + + submitButton.disabled = true; + submitButton.textContent = "Sending..."; + message.textContent = ""; + + try { + const response = await fetch(form.action, { + method: "POST", + body: new FormData(form), + }); + + if (!response.ok) { + let errorMessage = "Request failed"; + const errorData = await response.json().catch(() => null); + if (errorData?.error) { + errorMessage = errorData.details + ? `${errorData.error} (${errorData.details})` + : errorData.error; + } else { + const errorText = await response.text().catch(() => ""); + if (errorText.trim()) { + errorMessage = `${response.status} ${response.statusText}: ${errorText}`; + } else { + errorMessage = `${response.status} ${response.statusText}`; + } + } + throw new Error(errorMessage); + } + + message.textContent = "Thanks! Your message has been sent."; + form.reset(); + if (window.turnstile && typeof window.turnstile.reset === "function") { + window.turnstile.reset(); + } + } catch (error) { + message.textContent = + error instanceof Error + ? error.message + : "Sorry, something went wrong. Please try again."; + } finally { + submitButton.disabled = false; + submitButton.textContent = "Send message"; + } + }); +})(); diff --git a/src/pages/contact.astro b/src/pages/contact.astro index 8ab4359..3c96c66 100644 --- a/src/pages/contact.astro +++ b/src/pages/contact.astro @@ -8,209 +8,214 @@ const turnstileSiteKey = import.meta.env.PUBLIC_TURNSTILE_SITE_KEY ?? ""; --- - { - turnstileSiteKey && ( - - - - ) - } -
-
-
-
-
- -
-
-

- Get in touch -

-
-

- Contact Highland Group RDA -

-

- We would love to hear from you about sessions, volunteering, or ways to support the group. Reach out - and we will get back to you as soon as we can. -

-
-
- - Donate via JustGiving - -
-
- -
-
-
-
-

- Contact details -

-

- Highland Group RDA, Sandycroft, Reelig, Kirkhill, IV5 7PP -

-

- Tel: +447500 203226 -
- Email: info@highlandgrouprda.org.uk -

-
- - Email us - -
-
- -
-

- Send a message -

-
- { - !turnstileSiteKey && ( -

- Turnstile is not configured. Set PUBLIC_TURNSTILE_SITE_KEY and redeploy to enable the form. -

- ) - } -
- - -
-
- - -
-
- - -
-
-

- -
-
-
-
-
-
-
-
-
- -
-
-
- -
-
- - + + + +
+
+
+
+
+ +
+
+

+ Get in touch +

+
+

+ Contact Highland Group RDA +

+

+ We would love to hear from you about sessions, + volunteering, or ways to support the group. + Reach out and we will get back to you as soon as + we can. +

+
+
+ + Donate via JustGiving + +
+
+ +
+
+
+
+

+ Contact details +

+

+ Highland Group RDA, Sandycroft, Reelig, + Kirkhill, IV5 7PP +

+

+ Tel: +447500 203226 +
+ Email: info@highlandgrouprda.org.uk +

+
+ + Email us + +
+
+ +
+

+ Send a message +

+
+ { + !turnstileSiteKey && ( +

+ Turnstile is not configured. Set + PUBLIC_TURNSTILE_SITE_KEY and + redeploy to enable the form. +

+ ) + } +
+ + +
+
+ + +
+
+ + +
+
+
+

+

+ +
+
+
+
+
+
+
+
+
+ +
+
+
+ +
+