diff --git a/js/contact.js b/js/contact.js new file mode 100644 index 0000000..a94a157 --- /dev/null +++ b/js/contact.js @@ -0,0 +1,72 @@ +import { buildMailtoUrl } from "./mailto.js"; + +/** The address the contact form messages are sent to. */ +export const MAILTO_TARGET = "hello@example.com"; + +/** + * Collect form field values by name. + * Works with a real DOM form and with the minimal fake form used in tests. + * + * @param {{querySelectorAll(selector: string): ArrayLike<{name: string, value: string}>}} form + * @returns {{name: string, email: string, message: string}} + */ +export function readFormValues(form) { + const values = {}; + for (const el of form.querySelectorAll("[name]")) { + values[el.name] = el.value; + } + return values; +} + +/** + * Build the mailto: URL for the contact form from the entered values. + * + * @param {{name: string, email: string, message: string}} values + * @param {string} [to] + * @returns {string} + */ +export function buildContactMailto(values, to = MAILTO_TARGET) { + const subject = `Contact form submission from ${values.name || "someone"}`; + const body = [ + `Name: ${values.name || ""}`, + `Email: ${values.email || ""}`, + "", + "Message:", + values.message || "", + ].join("\n"); + return buildMailtoUrl({ to, subject, body }); +} + +/** + * Handle a contact form submit: build the mailto: URL and send the + * visitor to it so their mail client opens pre-filled. + * + * @param {HTMLFormElement} form + * @param {{to?: string, navigate?: (url: string) => void}} [options] + * @returns {string} the mailto: URL that was navigated to + */ +export function handleContactSubmit( + form, + { to = MAILTO_TARGET, navigate = (url) => { window.location.href = url; } } = {} +) { + const url = buildContactMailto(readFormValues(form), to); + navigate(url); + return url; +} + +/** + * Wire the submit handler onto a contact form. + * @param {HTMLFormElement} form + */ +export function initContactForm(form) { + form.addEventListener("submit", (event) => { + event.preventDefault(); + handleContactSubmit(form); + }); +} + +// Browser-only wiring — guarded so this module stays importable in Node tests. +if (typeof window !== "undefined" && typeof document !== "undefined") { + const form = document.getElementById("contact-form"); + if (form) initContactForm(form); +}