Added simple-form component

Author: brassdan

astro.config.mjs

@@ -14,6 +14,7 @@ import react from "@astrojs/react";
 import markdoc from "@astrojs/markdoc";
 import keystatic from '@keystatic/astro';
 import cloudflare from "@astrojs/cloudflare";
+import simpleStackForm from "simple-stack-form";
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const whenExternalScripts = (items = []) => ANALYTICS.vendors.googleAnalytics.id && ANALYTICS.vendors.googleAnalytics.partytown ? Array.isArray(items) ? items.map(item => item()) : [items()] : [];
 
@@ -46,7 +47,7 @@ export default defineConfig({
     JavaScript: true,
     SVG: false,
     Logger: 1
-  }), tasks(), react(), markdoc(), keystatic()],
+  }), tasks(), react(), markdoc(), keystatic(), simpleStackForm()],
   image: {
     service: squooshImageService()
   },

package-lock.json

@@ -31,8 +31,10 @@
     "lodash.merge": "^4.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "simple-stack-form": "^0.1.12",
     "typescript-esbuild": "^0.3.6",
-    "unpic": "^3.16.0"
+    "unpic": "^3.16.0",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@astrojs/mdx": "^2.1.0",

package.json

@@ -1,4 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
+/// <reference types="simple-stack-form/types" />
 /// <reference types="vite/client" />

src/env.d.ts

@@ -4,11 +4,22 @@ import Hero from '~/components/widgets/Hero.astro';
 import Features from '~/components/widgets/Features.astro';
 import CallToAction from '~/components/widgets/CallToAction.astro';
 import ContactUs from '~/components/widgets/Contact.astro';
+import { z } from "zod";
+import { createForm } from "simple:form";
+
+export const subscribeForm = createForm({
+  name: z.string(),
+  email: z.string().email(),
+  disclaimer: z.boolean()
+});
 
 const metadata = {
   title: 'CREEC — Carquinez Regional Environmental Education Center',
   ignoreTitleTemplate: true,
 };
+
+const res = await Astro.locals.form.getData(subscribeForm);
+
 ---
 
 <Layout metadata={metadata}>
@@ -109,5 +120,24 @@ const metadata = {
     }}
     description="Get news about CREEC events and volunteer opportunities!"
   />
+<form method = "POST">
+  <label for="name">Name</label>
+  <input id="name" {...subscribeForm.inputProps.name} />
+  <label for="email">Email</label> 
+  <input id="email" {...subscribeForm.inputProps.email} />
+  {
+    res?.fieldErrors?.email?.map((error) => 
+      <p class ="error">{error}</p>
+    ) 
+  }
+  <label for="disclaimer">By submitting this form, you acknowledge and agree to the collection of your personal information.</label>
+  <input id="disclaimer" {...subscribeForm.inputProps.disclaimer} />
+  {
+    res?.fieldErrors?.disclaimer?.map((error) => 
+      <p class="error">{error}</p>
+    ) 
+  }
+  <button type="submit">Subscribe</button>
 
+</form>
 </Layout>