Update contact form to dynamically set API URL: retrieve URL from form data attribute and add error handling for missing URL.

Author: markgoho

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

@@ -1,3 +1,4 @@
+const contactForm: HTMLFormElement | null = document.querySelector(".form");
 const contactName: HTMLInputElement | null = document.querySelector("#name");
 const email: HTMLInputElement | null = document.querySelector("#email");
 const message: HTMLTextAreaElement | null = document.querySelector("#message");
@@ -14,7 +15,10 @@ async function sendContactForm({
   email: string;
   message: string;
 }): Promise<void> {
-  const url = "/api/contact-us-form";
+  const url = contactForm?.dataset["apiUrl"];
+  if (!url) {
+    throw new Error("API URL not found");
+  }
 
   const response = await fetch(url, {
     method: "POST",

hugo/layouts/contact-us/single.html

@@ -25,7 +25,14 @@ <h1 class="contact-us-page__title">{{ .Title }}</h1>
   </div>
 
   <section class="text-content">
-    <form class="form" novalidate>
+    <form
+      class="form"
+      novalidate
+      data-api-url="{{ if hugo.IsProduction }}
+        /api/contact-us-form
+      {{ else }}
+        http://127.0.0.1:5001/doula-cooperative/us-central1/contactUsForm
+      {{ end }}">
       <div class="form-group full-width">
         <label for="name" class="form__label">Name (first and last)</label>
         <input type="text" id="name" class="form__input" required />