fix: parameterize contact backend in contact form.

Author: zicklag

src/components/ContactForm.astro

@@ -6,6 +6,7 @@ interface Props {
   title: string;
   lead: string;
   turnstileSiteKey: string;
+  contactBackend: string;
 }
 const props = Astro.props;
 ---
@@ -64,21 +65,18 @@ const props = Astro.props;
   src="https://challenges.cloudflare.com/turnstile/v0/api.js"
   defer></script>
 
-<script>
+<script define:vars={{ props }} is:inline>
   // Add event listener for form submission
   document.querySelector("form")?.addEventListener("submit", async (e) => {
     e.preventDefault();
-    const formData = new FormData(e.target! as HTMLFormElement);
+    const formData = new FormData(e.target);
 
     // Call the contact webhook
     try {
-      const response = await fetch(
-        "https://wediy-life-contact.deno.dev/contact",
-        {
-          method: "POST",
-          body: formData,
-        }
-      );
+      const response = await fetch(props.contactBackend, {
+        method: "POST",
+        body: formData,
+      });
 
       if (!response.ok) {
         throw new Error("Network response was not ok");
@@ -94,9 +92,7 @@ const props = Astro.props;
       // Clear the form fields
       document
         .querySelectorAll("input,textarea")
-        .forEach(
-          (x) => ((x as HTMLInputElement | HTMLTextAreaElement).value = "")
-        );
+        .forEach((x) => (x.value = ""));
     } catch (error) {
       console.error("Error sending message:", error);
       window

src/config.yaml

@@ -13,3 +13,4 @@ sections:
     title: Contact Us
     lead: Let's get it done.
     turnstileSiteKey: 0x4AAAAAABXiVbLyKqAQitnM
+    contactBackend: ktech-consulting-contact.deno.dev/contact

src/env.d.ts

@@ -47,6 +47,7 @@ declare module "~/config.yaml" {
     | {
         type: "contact-form";
         turnstileSiteKey: string;
+        contactBackend: string;
       }
   );
   const value: {