import { Handlers, PageProps } from "$fresh/server.ts"; import { Head } from "$fresh/runtime.ts"; interface FormState { name?: string; email?: string; message?: string; errors?: { name?: string; email?: string; message?: string; }; submitted?: boolean; } export const handler: Handlers = { GET(_, ctx) { return ctx.render({}); }, async POST(req, ctx) { const formData = await req.formData(); const state: FormState = { name: formData.get("name")?.toString(), email: formData.get("email")?.toString(), message: formData.get("message")?.toString(), }; // Validation logic const errors: FormState["errors"] = {}; if (!state.name || state.name.trim() === "") { errors.name = "Name is required"; } const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!state.email) { errors.email = "Email is required"; } else if (!emailRegex.test(state.email)) { errors.email = "Invalid email format"; } if (!state.message || state.message.trim() === "") { errors.message = "Message is required"; } // If there are errors, return the form with error messages if (Object.keys(errors).length > 0) { return ctx.render({ ...state, errors, }); } // TODO: Implement actual form submission logic here // For example, send email, save to database, etc. console.log("Form submitted:", state); // Return successful submission return ctx.render({ ...state, submitted: true, }); }, }; export default function Contact({ data }: PageProps) { return (
Contact

Contact

{/* Check if form was successfully submitted */} {data?.submitted && ( )}
{/* Name Input */}
{data?.errors?.name && (

{data.errors.name}

)}
{/* Email Input */}
{data?.errors?.email && (

{data.errors.email}

)}
{/* Message Textarea */}
{data?.errors?.message && (

{data.errors.message}

)}
{/* Submit Button */}
); }