Hey there! Let's figure out why you're hitting that 404 when submitting your contact form—since the form renders perfectly, the issue is almost certainly related to how your server handles the submission request, not the frontend rendering. Here are the key checks and fixes you need to make:

1. Match Your Form's action to a Server Route #

First, double-check that your HTML form's action attribute exactly matches the route you've defined in app.js for handling submissions.

• For example, if your form looks like this:

  <form action="/send-message" method="POST">
    <!-- form fields here -->
  </form>
  

  You must have a corresponding POST route in app.js:

  app.post('/send-message', (req, res) => {
    // Nodemailer logic goes here
  });
  

• Common mistake: Using a relative path (like send-message instead of /send-message) or typos in the route name—even a single character difference will trigger a 404.

2. Add Body Parsing Middleware #

Express doesn't automatically parse form data out of the box. You need to add middleware to let your server read the data submitted via the form. Add this line before your submission route in app.js:

app.use(express.urlencoded({ extended: true }));

This middleware parses URL-encoded form data (the default format for HTML form submissions) and makes it available in req.body—without it, you won't be able to access fields like req.body.email or req.body.message.

3. Complete the Nodemailer Route Logic #

Since you've installed Nodemailer, you need to build out the actual email-sending logic in your POST route. Here's a minimal working example to adapt:

const nodemailer = require('nodemailer');

// Step 1: Configure your email transporter (example using Gmail)
const transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: 'your-personal-email@gmail.com',
    pass: 'your-app-specific-password' // Note: Use an app password for Gmail, not your regular password
  }
});

// Step 2: Handle form submission
app.post('/send-message', (req, res) => {
  // Extract form data (match these to your form's input "name" attributes)
  const { name, email, message } = req.body;

  // Define email options
  const mailOptions = {
    from: email,
    to: 'your-personal-email@gmail.com',
    subject: `New Contact Form Submission from ${name}`,
    text: `Message: ${message}\n\nSender Email: ${email}`
  };

  // Send the email
  transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
      console.error('Email failed to send:', error);
      res.status(500).send('Oops! Something went wrong.');
    } else {
      console.log('Email sent successfully:', info.response);
      res.status(200).send('Thanks for reaching out! We\'ll get back to you soon.');
    }
  });
});

4. Verify Route Order & Static File Setup #

Make sure your submission route comes after any static file middleware (like app.use(express.static(path.join(__dirname, 'public')));) but before any catch-all 404 routes. If you have something like:

app.get('*', (req, res) => {
  res.status(404).send('Page not found');
});

This needs to be the last route defined—otherwise, it'll catch your submission request before it hits the correct POST route.

Quick Newbie Pro Tips #

• Always restart your server after making changes to app.js—Express doesn't automatically reload code changes!
• For email services like Gmail, you'll need to enable "Less secure app access" (or better, use an app-specific password if you have 2FA enabled) to avoid authentication errors.
• Test your route directly with a tool like Postman first—send a POST request to /send-message with form data to confirm the server responds correctly before testing the form.

内容的提问来源于stack exchange，提问作者John