Skip to content

feat(form): added functionality to the form submission via email #110

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
LxsaChn merged 1 commit into from
Jul 11, 2026
Merged

feat(form): added functionality to the form submission via email #110

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 58 additions & 8 deletions src/components/blocks/LetsGrowSomething.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,34 +13,50 @@

<!-- Form and image container -->
<div class="contact-form-container flex w-full flex-row gap-45">
<!-- Form inputs -->
<div class="contact-form flex flex-1 flex-col gap-6">
<!-- Contact form -->
<form id="contact-form" class="contact-form flex flex-1 flex-col gap-6">
<!-- Name input field -->
<input
type="text"
name="name"
placeholder="Your Name"
placeholder="Name"
required
class="rounded-2xl bg-[#d9d9d9] px-8 py-4 outline-none focus:ring-2 focus:ring-gray-300"
/>
<!-- Email input field -->
<input
type="email"
name="email"
placeholder="Your Email"
placeholder="Email"
required
class="rounded-2xl bg-[#d9d9d9] px-8 py-4 outline-none focus:ring-2 focus:ring-gray-300"
/>
<!-- Subject input field -->
<input
type="text"
name="subject"
placeholder="Subject"
required
class="rounded-2xl bg-[#d9d9d9] px-8 py-4 outline-none focus:ring-2 focus:ring-gray-300"
/>
<!-- Message text area -->
<textarea
name="message"
placeholder="Your Message"
required
class="h-[272px] resize-none rounded-2xl bg-[#d9d9d9] px-8 py-6 outline-none focus:ring-2 focus:ring-gray-300"
></textarea>
</div>
<!-- Submit button -->
<button
type="submit"
class="justify text-md h-[40px] w-[269px] items-center self-center rounded-full bg-[#d9d9d9] text-center transition-all duration-300 hover:cursor-pointer hover:bg-[#cccccc]"
>
Send Message
</button>
</form>

<!-- Image -->
<div
class="contact-image h-[450px] w-[409px] shrink-0 rounded-[3rem] bg-gray-200"
>
<div class="contact-image w-[409px] shrink-0 rounded-[3rem] bg-gray-200">
<img
src="/contact-us.jpg"
alt="UBC Agrobot Team Contact Us"
Expand All @@ -49,3 +65,37 @@
</div>
</div>
</div>

<script>
const form = document.getElementById(
"contact-form",
) as HTMLFormElement | null;

if (form) {
form.addEventListener("submit", (e) => {
e.preventDefault();

const name = (
form.elements.namedItem("name") as HTMLInputElement
).value.trim();
const email = (
form.elements.namedItem("email") as HTMLInputElement
).value.trim();
const subject = (
form.elements.namedItem("subject") as HTMLInputElement
).value.trim();
const message = (
form.elements.namedItem("message") as HTMLTextAreaElement
).value.trim();

const body = `From: ${name}\nEmail: ${email}\n\nMessage:\n${message}`;

const mailtoUrl =
`mailto:ubcagrobot@gmail.com` +
`?subject=${encodeURIComponent(subject)}` +
`&body=${encodeURIComponent(body)}`;

window.location.href = mailtoUrl;
});
}
</script>
Loading