Implement contact form functionality with TypeScript, including form submission handling and API integration. Update HTML to link the new script and adjust TypeScript configuration to include DOM library.

Author: markgoho

hugo/assets/ts/contact-us-form.ts

@@ -0,0 +1,43 @@
+const contactName: HTMLInputElement | null = document.querySelector("#name");
+const email: HTMLInputElement | null = document.querySelector("#email");
+const message: HTMLTextAreaElement | null = document.querySelector("#message");
+const submitButton: HTMLButtonElement | null =
+  document.querySelector("#submit-button");
+
+async function sendContactForm({
+  contactName,
+  email,
+  message,
+}: {
+  contactName: string;
+  email: string;
+  message: string;
+}): Promise<void> {
+  const url = "//api/contact-us-form";
+
+  await fetch(url, {
+    method: "POST",
+    body: JSON.stringify({ contactName, email, message }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+}
+
+const doSubmit = async () => {
+  if (contactName?.value && email?.value && message?.value) {
+    await sendContactForm({
+      contactName: contactName.value,
+      email: email.value,
+      message: message.value,
+    });
+  }
+};
+
+if (submitButton) {
+  submitButton.addEventListener("click", (event: Event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    void doSubmit();
+  });
+}

hugo/layouts/contact-us/single.html

@@ -55,35 +55,13 @@ <h1 class="contact-us-page__title">{{ .Title }}</h1>
         >
       </div>
 
-      <button type="submit" class="button">Submit</button>
+      <button type="submit" id="submit-button" class="button">Submit</button>
     </form>
   </section>
-
-  <div id="confirmation-message" class="form__confirmation" hidden>
-    <h2>Thank you!</h2>
-    <p>Your message has been sent. We'll get back to you shortly.</p>
-  </div>
 {{ end }}
 
 {{ define "footer-scripts" }}
-  <script>
-    document.addEventListener("DOMContentLoaded", function () {
-      const form = document.querySelector(".contact-us-page__form");
-      const confirmationMessage = document.getElementById(
-        "confirmation-message",
-      );
-
-      form.addEventListener("submit", function (event) {
-        event.preventDefault();
-        event.stopPropagation();
-
-        if (!form.checkValidity()) {
-          form.classList.add("was-validated");
-        } else {
-          form.hidden = true;
-          confirmationMessage.hidden = false;
-        }
-      });
-    });
-  </script>
+  {{ $opts := dict "targetPath" "contact-us-form.js" }}
+  {{ $built := resources.Get "ts/contact-us-form.ts" | js.Build $opts | resources.Minify | resources.Fingerprint }}
+  <script type="text/javascript" src="{{ $built.RelPermalink }}" defer></script>
 {{ end }}

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     // Environment setup & latest features
-    "lib": ["ESNext"],
+    "lib": ["ESNext", "dom"],
     "target": "ESNext",
     "module": "Preserve",
     "moduleDetection": "force",