2️⃣ Advanced: Node.js + Express Backend
If you want to store form data in MongoDB or send emails using Nodemailer,create a backend.🔹 Backend (server.js)
javascript
Copy
Edit
const
express = require("express");
const cors = require("cors");
const nodemailer = require("nodemailer");
const app = express();
app.use(express.json());
app.use(cors());
const transporter = nodemailer.createTransport({
service: "gmail",
auth: {
user: "your-email@gmail.com",
pass: "your-password",
},
});
app.post("/send-email", (req, res) => {
const { firstName, lastName, email, subject, message } = req.body;
const mailOptions = {
from: email,
to: "your-email@gmail.com",
subject: `New Contact Form Submission: ${subject}`,
text: `Name: ${firstName} ${lastName}\nEmail: ${email}\nMessage: ${message}`,
};
transporter.sendMail(mailOptions, (error, info) => {
if (error) {
res.status(500).send("Email not sent");
} else {
res.send("Email sent successfully");
}
});
});
app.listen(5000, () => console.log("Server running on port 5000"));
🔹 React (Frontend)
jsx
Copy
Edit
const handleSubmit = async (event) => {
event.preventDefault();
const formData = {
firstName: event.target.firstName.value,
lastName: event.target.lastName.value,
email: event.target.email.value,
subject: event.target.subject.value,
message: event.target.message.value,
};
const response = await fetch("http://localhost:5000/send-email", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(formData),
});
if (response.ok) {
setStatus("Message sent successfully!");
event.target.reset();
} else {
setStatus("Failed to send message.");
}
};
✅ How This Works:
Backend uses Nodemailer to send emails
Frontend sends data using fetch()
Emails are delivered to your inbox
