I've been building a one-page business website with a contact form that submits to the business' email (using Nodemailer).
I've managed to get that part of it working; however, after the user submits the form, there is no way of knowing whether it sent successfully or not - is there a way I can implement this? (I'm quite new to web development!)
So far I've been following this tutorial: https://lo-victoria.com/how-to-build-a-contact-form-with-javascript-and-nodemailer
Any help is greatly appreciated!
Client-side code
const form = document.getElementById("contactForm");
const formEvent = form.addEventListener("submit", (event) => {
event.preventDefault();
let mail = new FormData(form);
sendMail(mail);
form.reset()
})
const sendMail = (mail) => {
fetch("/", {
method: "post",
body: mail,
}).then((response) => {
return response.json();
});
};
Nodemailer code
const transporter = nodemailer.createTransport({
service: "gmail",
auth: {
user: process.env.EMAIL,
pass: process.env.PASS,
},
});
transporter.verify(function (error, success) {
if (error) {
console.log(error);
} else {
console.log("Server is ready to take our messages");
}
});
app.post("/send", (req, res) => {
let form = new multiparty.Form();
let data = {};
form.parse(req, function (err, fields) {
console.log(fields);
Object.keys(fields).forEach(function (property) {
data[property] = fields[property].toString();
});
const mail = {
sender: `${data.name} <${data.email}>`,
to: process.env.EMAIL,
subject: data.subject,
text: `${data.name} <${data.email}> \n${data.message}`,
};
transporter.sendMail(mail, (err, data) => {
if (err) {
console.log(err);
res.status(500).send("Something went wrong.");
} else {
res.status(200).send("Email successfully sent to recipient!");
}
});
});
});