wymiller/my-website-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

built out contact form, added env variable

Browse Source 
might make button island so that i can change the button's text
This commit is contained in:
Wyatt J. Miller 2024-12-04 23:36:49 -05:00
parent d08463aaf7
commit 4104a76f3e
1 changed files with 24 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/routes/contact/index.tsx
View File

@ -11,6 +11,7 @@ interface FormState {
message?: string;
};
submitted?: boolean;
failed?: boolean;
}
export const handler: Handlers = {
@ -51,11 +52,19 @@ export const handler: Handlers = {
});
}
// TODO: Implement actual form submission logic here
// For example, send email, save to database, etc.
console.log("Form submitted:", state);
const res = await fetch(`${Deno.env.get("EMAIL_FORM")}`, {
method: "POST",
body: formData,
});
console.log(res);
if (!res.ok || res.status !== 200) {
return ctx.render({
...state,
failed: true,
});
}
// Return successful submission
return ctx.render({
...state,
submitted: true,
@ -66,16 +75,13 @@ export const handler: Handlers = {
export default function Contact({ data }: PageProps<FormState>) {
return (
<div class="bg-[#313244] min-h-screen">
<div class="px-4 py-8 mx-auto p-6 flex flex-col bg-[#313244] shadow-md min-h-screen w-full md:max-w-md">
<div class="px-4 py-8 mx-auto p-6 flex flex-col bg-[#313244] min-h-screen w-full md:max-w-md">
<Head>
<title>Contact</title>
</Head>
<h1 class="text-3xl text-white font-bold uppercase text-center">
Contact
</h1>
{/* Check if form was successfully submitted */}
{data?.submitted && (
<div
class="bg-[#a6e3a1] text-[#313244] px-4 py-3 rounded relative"
@ -84,9 +90,16 @@ export default function Contact({ data }: PageProps<FormState>) {
Your message has been sent successfully!
</div>
)}
{data?.failed && (
<div
class="bg-[#f38ba8] text-[#313245] px-4 py-3 rounded relative"
role="alert"
>
There has been a error in sending your message. Please try again
later.
</div>
)}
<form method="POST" class="space-y-4">
{/* Name Input */}
<div>
<label
htmlFor="name"
@ -110,8 +123,6 @@ export default function Contact({ data }: PageProps<FormState>) {
</p>
)}
</div>
{/* Email Input */}
<div>
<label
htmlFor="email"
@ -135,8 +146,6 @@ export default function Contact({ data }: PageProps<FormState>) {
</p>
)}
</div>
{/* Message Textarea */}
<div>
<label
htmlFor="message"
@ -161,8 +170,7 @@ export default function Contact({ data }: PageProps<FormState>) {
</p>
)}
</div>
{/* Submit Button */}
<input type="hidden" name="_gotcha" style="display:none !important" />
<div>
<button
type="submit"