diff --git a/src/components/BookTable/BookTable.tsx b/src/components/BookTable/BookTable.tsx
index 2b121a8..81027a2 100644
--- a/src/components/BookTable/BookTable.tsx
+++ b/src/components/BookTable/BookTable.tsx
@@ -8,6 +8,7 @@ import styles from './BookTable.module.css'
interface FormErrors {
name?: string;
+ email?: string;
phone?: string;
date?: string;
captcha?: string;
@@ -24,6 +25,7 @@ export default function BookTable() {
const [formData, setFormData] = useState({
name: "",
+ email: "",
phone: "",
date: "",
message: "",
@@ -52,6 +54,7 @@ export default function BookTable() {
const errors: FormErrors = {};
if (!formData.name.trim()) errors.name = "Name is required.";
+ if (!formData.email.trim()) errors.email = "Email is required.";
if (!formData.phone.trim()) errors.phone = "Phone is required.";
if (!formData.date.trim()) errors.date = "Date is required.";
if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";
@@ -62,11 +65,12 @@ export default function BookTable() {
const emailData = {
name: formData.name,
phone: formData.phone,
- email: email,
+ email: formData.email,
subject: `Table Reservation - ${formData.name} on ${formData.date}`,
message: `
Reservation Details:
Name: ${formData.name}
+ Email: ${formData.email}
Phone: ${formData.phone}
Date: ${formData.date}
Message:
@@ -92,6 +96,7 @@ export default function BookTable() {
setFormData({
name: "",
+ email: "",
phone: "",
date: "",
message: "",
@@ -166,6 +171,23 @@ export default function BookTable() {
{formErrors.name && {formErrors.name}}
+ {/* Email Input with Placeholder */}
+