NODE.JS Form in Astro + Vercel - Don't send email

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>

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.