Use versioned contact form script
This commit is contained in:
parent
b17a556fa7
commit
3cfebd6d51
2 changed files with 64 additions and 1 deletions
63
public/contact-form-v2.js
Normal file
63
public/contact-form-v2.js
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
(() => {
|
||||
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 formData = new FormData(form);
|
||||
const body = new URLSearchParams();
|
||||
for (const [key, value] of formData.entries()) {
|
||||
if (typeof value === "string") {
|
||||
body.append(key, value);
|
||||
}
|
||||
}
|
||||
const response = await fetch(form.action, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
||||
body,
|
||||
});
|
||||
|
||||
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";
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
|
@ -24,7 +24,7 @@ const turnstileSiteKey = import.meta.env.PUBLIC_TURNSTILE_SITE_KEY ?? "";
|
|||
)
|
||||
}
|
||||
<Fragment slot="head">
|
||||
<script src="/contact-form.js?v=2" defer data-cfasync="false"></script>
|
||||
<script src="/contact-form-v2.js" defer data-cfasync="false"></script>
|
||||
</Fragment>
|
||||
<div class="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
|
||||
<main class="w-full">
|
||||
|
|
|
|||
Loading…
Reference in a new issue