249 lines
8.3 KiB
JavaScript
249 lines
8.3 KiB
JavaScript
"use client";
|
||
|
||
import { useState, useEffect } from "react";
|
||
import ReCAPTCHA from "react-google-recaptcha";
|
||
import axios from "axios";
|
||
import Link from "next/link";
|
||
|
||
const HomeContact = () => {
|
||
const [formData, setFormData] = useState({
|
||
name: "",
|
||
email: "",
|
||
phone: "",
|
||
web: "",
|
||
message: "",
|
||
});
|
||
|
||
const [formErrors, setFormErrors] = useState({});
|
||
const [captchaToken, setCaptchaToken] = useState(null);
|
||
const [alert, setAlert] = useState({ show: false, type: "", message: "" });
|
||
|
||
const handleChange = (e) => {
|
||
const { name, value } = e.target;
|
||
setFormData((prev) => ({ ...prev, [name]: value }));
|
||
};
|
||
|
||
const handleCaptchaChange = (token) => {
|
||
console.log("✅ Captcha token:", token);
|
||
setCaptchaToken(token);
|
||
};
|
||
|
||
const handleSubmit = async (e) => {
|
||
e.preventDefault();
|
||
|
||
const errors = {};
|
||
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.message.trim()) errors.message = "Message is required.";
|
||
if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";
|
||
|
||
setFormErrors(errors);
|
||
if (Object.keys(errors).length > 0) return;
|
||
|
||
const emailData = {
|
||
name: formData.name,
|
||
email: formData.email,
|
||
phone: formData.phone,
|
||
subject: formData.web || "Home Contact Form",
|
||
message: `Website: ${formData.web}<br/><br/>Message: ${formData.message}`,
|
||
to: "info@metatroncubesolutions.com",
|
||
senderName: "Metatroncube Home Page",
|
||
recaptchaToken: captchaToken,
|
||
};
|
||
|
||
console.log("🚀 Submitting home form data:", emailData);
|
||
|
||
try {
|
||
const res = await axios.post("https://mailserver.metatronnest.com/send", emailData, {
|
||
headers: { "Content-Type": "application/json" },
|
||
});
|
||
|
||
setAlert({
|
||
show: true,
|
||
type: "success",
|
||
message: res?.data?.message || "Message sent successfully!",
|
||
});
|
||
|
||
setFormData({
|
||
name: "",
|
||
email: "",
|
||
phone: "",
|
||
web: "",
|
||
message: "",
|
||
});
|
||
setCaptchaToken(null);
|
||
setFormErrors({});
|
||
} catch (error) {
|
||
console.error("❌ Error sending email:", error);
|
||
setAlert({
|
||
show: true,
|
||
type: "danger",
|
||
message: "Failed to send message. Please try again later.",
|
||
});
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (alert.show) {
|
||
const timer = setTimeout(() => {
|
||
setAlert((prev) => ({ ...prev, show: false }));
|
||
}, 5000);
|
||
return () => clearTimeout(timer);
|
||
}
|
||
}, [alert.show]);
|
||
|
||
return (
|
||
<div className="contact-us pt-90 pb-90">
|
||
<div className="container">
|
||
<div className="row">
|
||
{/* Left Side - Form */}
|
||
<div className="col-sm-12 col-md-6 col-lg-6 pl-0 pr-0">
|
||
<div className="contact_from_box">
|
||
<div className="consen-section-title pb-4">
|
||
<h5>CONTACT US</h5>
|
||
<h2>
|
||
Drop your message <span>here.</span>
|
||
</h2>
|
||
</div>
|
||
|
||
{alert.show && (
|
||
<div className={`alert alert-${alert.type}`}>{alert.message}</div>
|
||
)}
|
||
|
||
<form onSubmit={handleSubmit}>
|
||
<div className="row">
|
||
<div className="col-lg-6">
|
||
<div className="form_box mb-30">
|
||
<input
|
||
type="text"
|
||
name="name"
|
||
placeholder="Name"
|
||
value={formData.name}
|
||
onChange={handleChange}
|
||
/>
|
||
{formErrors.name && (
|
||
<small className="text-danger">{formErrors.name}</small>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-lg-6">
|
||
<div className="form_box mb-30">
|
||
<input
|
||
type="email"
|
||
name="email"
|
||
placeholder="Email Address"
|
||
value={formData.email}
|
||
onChange={handleChange}
|
||
/>
|
||
{formErrors.email && (
|
||
<small className="text-danger">{formErrors.email}</small>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-lg-6">
|
||
<div className="form_box mb-30">
|
||
<input
|
||
type="text"
|
||
name="phone"
|
||
placeholder="Phone Number"
|
||
value={formData.phone}
|
||
onChange={handleChange}
|
||
/>
|
||
{formErrors.phone && (
|
||
<small className="text-danger">{formErrors.phone}</small>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-lg-6">
|
||
<div className="form_box mb-30">
|
||
<input
|
||
type="text"
|
||
name="web"
|
||
placeholder="Website (Optional)"
|
||
value={formData.web}
|
||
onChange={handleChange}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-lg-12">
|
||
<div className="form_box mb-30">
|
||
<textarea
|
||
name="message"
|
||
placeholder="Your Message"
|
||
value={formData.message}
|
||
onChange={handleChange}
|
||
/>
|
||
{formErrors.message && (
|
||
<small className="text-danger">{formErrors.message}</small>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-lg-12 mb-3">
|
||
<ReCAPTCHA
|
||
sitekey="6LekfpwrAAAAAOTwuP1d2gg-Fv9UEsAjE2gjOQJl"
|
||
onChange={handleCaptchaChange}
|
||
/>
|
||
{formErrors.captcha && (
|
||
<small className="text-danger">{formErrors.captcha}</small>
|
||
)}
|
||
</div>
|
||
|
||
<div className="col-lg-12">
|
||
<div className="quote_button">
|
||
<button className="btn" type="submit">
|
||
Send a Message
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right Side - Info */}
|
||
<div className="col-sm-12 col-md-6 col-lg-6 pl-0 pr-0">
|
||
<div className="cda-content-area">
|
||
<div className="cda-single-content d-flex">
|
||
<div className="cda-content-inner white">
|
||
<h2>Get In Touch</h2>
|
||
<p>
|
||
We’re here to simplify your digital journey. Share your project ideas, challenges, or questions, and our experts will guide you with the right solutions.
|
||
</p>
|
||
|
||
<h4 className="pt-4">Quick Response:</h4>
|
||
<p>Expect a personalized reply within one business day.</p>
|
||
|
||
<h4 className="pt-4">Expert Consultation:</h4>
|
||
<p>Get a free consultation to align your goals with our web, app, and marketing solutions.</p>
|
||
|
||
<h4 className="pt-4">Privacy Assured:</h4>
|
||
<p>Your data is safe with us. All details remain confidential and secure.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="abouts-button pb-110" style={{ margin: "0 45px" }}>
|
||
<div className="new-button d-flex justify-content-center">
|
||
<Link
|
||
legacyBehavior
|
||
href="https://www.trustpilot.com/review/metatroncubesolutions.com?utm_medium=trustbox&utm_source=TrustBoxReviewCollector"
|
||
>
|
||
<a>Review us on Trustpilot</a>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default HomeContact;
|