built out contact form, added env variable
might make button island so that i can change the button's text
This commit is contained in:
parent
d08463aaf7
commit
4104a76f3e
@ -11,6 +11,7 @@ interface FormState {
|
|||||||
message?: string;
|
message?: string;
|
||||||
};
|
};
|
||||||
submitted?: boolean;
|
submitted?: boolean;
|
||||||
|
failed?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const handler: Handlers = {
|
export const handler: Handlers = {
|
||||||
@ -51,11 +52,19 @@ export const handler: Handlers = {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO: Implement actual form submission logic here
|
const res = await fetch(`${Deno.env.get("EMAIL_FORM")}`, {
|
||||||
// For example, send email, save to database, etc.
|
method: "POST",
|
||||||
console.log("Form submitted:", state);
|
body: formData,
|
||||||
|
});
|
||||||
|
console.log(res);
|
||||||
|
|
||||||
|
if (!res.ok || res.status !== 200) {
|
||||||
|
return ctx.render({
|
||||||
|
...state,
|
||||||
|
failed: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Return successful submission
|
|
||||||
return ctx.render({
|
return ctx.render({
|
||||||
...state,
|
...state,
|
||||||
submitted: true,
|
submitted: true,
|
||||||
@ -66,16 +75,13 @@ export const handler: Handlers = {
|
|||||||
export default function Contact({ data }: PageProps<FormState>) {
|
export default function Contact({ data }: PageProps<FormState>) {
|
||||||
return (
|
return (
|
||||||
<div class="bg-[#313244] min-h-screen">
|
<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>
|
<Head>
|
||||||
<title>Contact</title>
|
<title>Contact</title>
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<h1 class="text-3xl text-white font-bold uppercase text-center">
|
<h1 class="text-3xl text-white font-bold uppercase text-center">
|
||||||
Contact
|
Contact
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
{/* Check if form was successfully submitted */}
|
|
||||||
{data?.submitted && (
|
{data?.submitted && (
|
||||||
<div
|
<div
|
||||||
class="bg-[#a6e3a1] text-[#313244] px-4 py-3 rounded relative"
|
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!
|
Your message has been sent successfully!
|
||||||
</div>
|
</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">
|
<form method="POST" class="space-y-4">
|
||||||
{/* Name Input */}
|
|
||||||
<div>
|
<div>
|
||||||
<label
|
<label
|
||||||
htmlFor="name"
|
htmlFor="name"
|
||||||
@ -110,8 +123,6 @@ export default function Contact({ data }: PageProps<FormState>) {
|
|||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Email Input */}
|
|
||||||
<div>
|
<div>
|
||||||
<label
|
<label
|
||||||
htmlFor="email"
|
htmlFor="email"
|
||||||
@ -135,8 +146,6 @@ export default function Contact({ data }: PageProps<FormState>) {
|
|||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Message Textarea */}
|
|
||||||
<div>
|
<div>
|
||||||
<label
|
<label
|
||||||
htmlFor="message"
|
htmlFor="message"
|
||||||
@ -161,8 +170,7 @@ export default function Contact({ data }: PageProps<FormState>) {
|
|||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
<input type="hidden" name="_gotcha" style="display:none !important" />
|
||||||
{/* Submit Button */}
|
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
|
Loading…
Reference in New Issue
Block a user