I am trying to configure the form with Vercel having some trouble.
I got this message from the inspector:
Failed to load resource: the server responded with a status of 404 ()
9611.vendors.chunk.js:1 [DEFAULT]: WARN : Using DEFAULT root logger
value @ 9611.vendors.chunk.js:1
I also set the environment variable as you can see from the screenshot.
Have a look at the snippets please:
---- sendEmail.js ----
const nodemailer = require("nodemailer");
module.exports = async (req, res) => {
const { name, surname, email, options, message } = req.body;
// Configure the transporter with environment variables
const transporter = nodemailer.createTransport({
host: "secure.emailsrvr.com", // Replace with your SMTP server address
port: 465,
secure: true, // true for 465, false for other ports
auth: {
user: process.env.SMTP_USER, // Use environment variable for SMTP username
pass: process.env.SMTP_PASS, // Use environment variable for SMTP password
},
});
// Setup email options
const mailOptions = {
from: '"Your Name" <hello@my-site.com>', // Replace with your email
to: "test_email@gmail.com", // Replace with recipient email address
subject: "Hi there! I will get back to you shortly", // Subject line
text: `You have received a new message from ${name} ${surname} (${email}):
"${message}"
Category: ${options}`, // plain text body
};
// Send the email
transporter.sendMail(mailOptions, (error, info) => {
if (error) {
return res.status(500).send({ success: false, error: error.toString() });
}
res.status(200).send({ success: true, message: "Email sent", info });
});
};
---- contactForm.astro ------
<script>
document.addEventListener("DOMContentLoaded", () => {
const checkFormFields = () => {
const name = (document.getElementById("name") as HTMLInputElement)?.value;
const surname = (document.getElementById("surname") as HTMLInputElement)
?.value;
const email = (document.getElementById("email") as HTMLInputElement)
?.value;
const options = (document.getElementById("options") as HTMLSelectElement)
?.value;
const message = (
document.getElementById("message") as HTMLTextAreaElement
)?.value;
const allFilled = name && surname && email && options && message;
const submitButton = document.getElementById(
"submitButton"
) as HTMLButtonElement; // Correct type assertion
if (submitButton) {
submitButton.disabled = !allFilled;
if (submitButton.disabled) {
submitButton.classList.remove("hover:bg-black", "hover:text-white");
submitButton.classList.add(
"hover:border-stone-300",
"hover:text-stone-300"
);
} else {
submitButton.classList.add("hover:bg-black", "hover:text-white");
submitButton.classList.remove(
"hover:border-stone-300",
"hover:text-stone-300"
);
}
}
};
// Attach the event listener to form inputs
document
.getElementById("contactForm")
?.addEventListener("input", checkFormFields);
// Call checkFormFields immediately to check the initial form state
checkFormFields();
});
// AFTER FORM SUBMISSION
document
.getElementById("contactForm")
?.addEventListener("submit", function (event) {
event.preventDefault(); // Prevent the default form submission
// Access the sections safely, ensuring they are not null before proceeding
const contactFormSection = document.getElementById("contactFormSection");
const thankYouSection = document.getElementById("thankYouSection");
if (contactFormSection && thankYouSection) {
// If both elements exist, proceed to hide one and show the other
contactFormSection.style.display = "none"; // Hide the contact form section
thankYouSection.style.display = "flex"; // Show the thank you section
} else {
// Handle the case where the elements might not be found (optional)
console.error("One or more elements were not found!");
}
alert("Form inviata");
});
</script>