262 lines
9.7 KiB
JavaScript
262 lines
9.7 KiB
JavaScript
"use client";
|
||
|
||
import { useState, useEffect } from "react";
|
||
import ReCAPTCHA from "react-google-recaptcha";
|
||
import axios from "axios";
|
||
import SubCard from "@/src/components/AboveFooter";
|
||
import Contacts from "@/src/components/services-details-banner/contacts.js";
|
||
import ConsenHead from "@/src/ConsenHead";
|
||
import Layout from "@/src/layout/Layout";
|
||
|
||
const Contact = () => {
|
||
const [formData, setFormData] = useState({
|
||
name: "",
|
||
phone: "",
|
||
email: "",
|
||
service: "",
|
||
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.phone.trim()) errors.phone = "Phone is required.";
|
||
if (!formData.email.trim()) errors.email = "Email is required.";
|
||
if (!formData.service.trim()) errors.service = "Please select a service.";
|
||
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 = {
|
||
...formData,
|
||
message: `Service: ${formData.service}<br /><br />Message: ${formData.message}`,
|
||
to: "info@metatroncubesolutions.com",
|
||
senderName: "Metatroncube Contact Page",
|
||
recaptchaToken: captchaToken,
|
||
};
|
||
|
||
// console.log("🚀 Submitting 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: "",
|
||
phone: "",
|
||
email: "",
|
||
service: "",
|
||
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 (
|
||
<>
|
||
<ConsenHead
|
||
title="Contact MetatronCube India - Best Web, App & SEO Services"
|
||
description="Get in touch with MetatronCube India for website development, mobile apps, SEO, digital marketing, UI/UX, and design services."
|
||
/>
|
||
<Layout>
|
||
<Contacts pageName="CONTACT US" />
|
||
|
||
<div className="contact-us">
|
||
<div className="container">
|
||
<div className="row">
|
||
<div className="col-sm-12 col-md-6 col-lg-6 pl-0 pr-0">
|
||
<div className="contact_from_box">
|
||
<div className="contact_title pb-4">
|
||
<h3>Get In Touch with us</h3>
|
||
</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="Full 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">
|
||
<select
|
||
name="service"
|
||
value={formData.service}
|
||
onChange={handleChange}
|
||
className="form-control"
|
||
>
|
||
<option value="">Select Service</option>
|
||
<option value="Website Development">Website Development</option>
|
||
<option value="Mobile Application Development">Mobile Application Development</option>
|
||
<option value="Graphic Designing">Graphic Designing</option>
|
||
<option value="UI / UX Designing ">UI / UX Designing </option>
|
||
<option value="SEO & Content Writing">SEO & Content Writing</option>
|
||
<option value="Digital Marketing">Digital Marketing</option>
|
||
</select>
|
||
{formErrors.service && (
|
||
<small className="text-danger">{formErrors.service}</small>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-lg-12">
|
||
<div className="form_box mb-30">
|
||
<textarea
|
||
name="message"
|
||
placeholder="Write 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>
|
||
|
||
<div className="col-sm-12 col-md-6 col-lg-6 pl-0 pr-0 contact-box">
|
||
<div className="cda-content-area">
|
||
<div className="cda-single-content d-flex">
|
||
<div className="cda-content-inner">
|
||
<h4 className="mid-container">Say Hello to Us</h4>
|
||
<h1>We’re just a message away.</h1>
|
||
</div>
|
||
</div>
|
||
<div className="cda-single-content hr d-flex">
|
||
<div className="cda-content-inner">
|
||
<p>
|
||
Have a question, an idea, or a project in mind? At <b>MetatronCube India</b>, we’re always excited to hear from you. Whether you want to discuss your digital goals, need expert guidance, or are ready to start building something amazing, our team is here to listen and provide tailored solutions.
|
||
<br/>Reach out to us today and take the first step toward your next digital success story.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="cda-single-content hr d-flex">
|
||
<div className="cda-content-inner">
|
||
<h4>Our Email Address</h4>
|
||
<p>info@metatroncubesolutions.in</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="sub color-bg">
|
||
<div className="container">
|
||
<SubCard />
|
||
</div>
|
||
</div>
|
||
</Layout>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default Contact; |