calum/rda-v3
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Send form as urlencoded to avoid multipart issues

Browse source
This commit is contained in:
Calum Muir 2025-12-28 13:18:55 +00:00
parent 5f01d89a62
commit c8ae9caa35
2 changed files with 85 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
functions/api/contact.ts
View file

@ -13,13 +13,33 @@ const jsonResponse = (data: Record<string, unknown>, status = 200) =>
const readFormField = (value: FormDataEntryValue | null) =>
typeof value === "string" ? value.trim() : "";
const readTextField = (value: string | null) => (value ?? "").trim();
const parseFormFields = async (request: Request) => {
const contentType = request.headers.get("content-type") ?? "";
if (contentType.includes("application/x-www-form-urlencoded")) {
const bodyText = await request.text();
const params = new URLSearchParams(bodyText);
return {
name: readTextField(params.get("name")),
email: readTextField(params.get("email")),
message: readTextField(params.get("message")),
turnstileToken: readTextField(params.get("cf-turnstile-response")),
};
}
const formData = await request.formData();
return {
name: readFormField(formData.get("name")),
email: readFormField(formData.get("email")),
message: readFormField(formData.get("message")),
turnstileToken: readFormField(formData.get("cf-turnstile-response")),
};
};
const handlePost: PagesFunction<Env> = async ({ request, env }) => {
const formData = await request.formData();
const name = readFormField(formData.get("name"));
const email = readFormField(formData.get("email"));
const message = readFormField(formData.get("message"));
const turnstileToken = readFormField(formData.get("cf-turnstile-response"));
const { name, email, message, turnstileToken } =
await parseFormFields(request);
if (!name || !email || !message) {
return jsonResponse(

107
public/contact-form.js
View file

@ -1,55 +1,68 @@
(() => {
const form = document.querySelector("[data-contact-form]");
const message = document.querySelector("[data-form-message]");
const submitButton = document.querySelector("[data-form-submit]");
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;
if (!form || !message || !submitButton) return;
form.addEventListener("submit", async (event) => {
event.preventDefault();
if (submitButton.disabled) return;
form.addEventListener("submit", async (event) => {
event.preventDefault();
if (submitButton.disabled) return;
submitButton.disabled = true;
submitButton.textContent = "Sending...";
message.textContent = "";
submitButton.disabled = true;
submitButton.textContent = "Sending...";
message.textContent = "";
try {
const response = await fetch(form.action, {
method: "POST",
body: new FormData(form),
});
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}`;
}
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";
}
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";
}
});
});
})();