I'm currently working on a contact form for my node.js and express web app, utilizing nodemailer.

Everything seems to be functioning correctly - the server is recording information and sending it to the specified email address. However, there is an issue regarding the email section in the message, which appears as "--- email: ''." It's not causing errors but remains blank.

In addition, this "email: ''" text shows up on the server side, but it isn't displayed in the email sent by the function at all.

I've attempted to adjust the html body section and troubleshoot any potential issues with the form or the javascript, but haven't found a solution yet.

Any assistance would be greatly appreciated! Thank you!

The structure of app.js is outlined below:

//jshint eversion:6

const http = require('http')
const express = require("express");
const bodyParser = require("body-parser")

const ejs = require('ejs');
const nodemailer = require('nodemailer');
const hostname = '127.0.0.1';
const path = require('path');
const port = 3000;


const app = express();


app.set("view engine", "ejs");
app.use(bodyParser.urlencoded({
    extended: false
}));
app.use(express.json());



// custom middleware to log data access
const log = function (request, response, next) {
    console.log(`${new Date()}: ${request.protocol}://${request.get('host')}${request.originalUrl}`);
    console.log(request.body); // make sure JSON middleware is loaded first
    next();
}
app.use(log);
// end custom middleware


app.use(express.static('public'));
app.use(express.static('images'));



app.get("/", function (req, res) {
    res.render("index");
});

app.get("/prices", function (req, res, ) {
    res.render("prices");
});

app.get("/about", function (req, res, ) {
    res.render("about");
});
app.get("/contact", function (req, res, ) {
    res.render("contact");
});

module.exports = function () {
    this.Categories = require('tools.js');
}



// HTTP POST
app.post("/ajax/email", function (request, response) {
    // create reusable transporter object using the default SMTP transport
    const transporter = nodemailer.createTransport({
        host: "smtp.gmail.com",
        port: 465,
        secure: true,
        auth: {
            user: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85ddddddddddddddddc5e2e8e4ece9abe6eae8">[email protected]</a>", // this should be YOUR GMAIL account
            pass: "XXXXXX" // this should be your password
        }
    });

    var textBody = `FROM: ${request.body.fname}  EMAIL: ${request.body.email} MESSAGE: ${request.body.comment}`;
    var htmlBody = `<h2>Mail From Contact Form</h2> <p>from: ${request.body.fname} ${request.body.lname} </p> <p>${request.body.email}</p>  <p>${request.body.phone}</p> <p>${request.body.company}</p><p>${request.body.comment}</p>`;
    var mail = {
        from: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b7f3d2dbc3d6f3d2c4ded0d9c4f0dbd8d5d6dbf7d0dad6dedb99d4d8da">[email protected]</a>", // sender address
        to: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c767d71796f327d326a7d727879727e796e7b5c7b717d7570327f7371">[email protected]</a>", // list of receivers (THIS COULD BE A DIFFERENT ADDRESS or ADDRESSES SEPARATED BY COMMAS)
        subject: "Mail From Contact Form", // Subject line
        text: textBody,
        html: htmlBody
    };

    // send mail with defined transport object
    transporter.sendMail(mail, function (err, info) {
        if (err) {
            console.log(err);
            response.json({
                message: "message not sent: an error occurred; check the server's console log"
            });
        } else {
            response.json({
                message: `Thanks for reaching out! We'll contact you ASAP`
            });
        }
    });
});


const PORT = process.env || port;


// const server = http.createServer((req, res) => {
//     res.statusCode = 200;
//     res.setHeader('Content-Type', 'text/plain');
//     res.end('Hello World! NodeJS \n');
// });

app.listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}/`);
});

The structure of the form and Java script is as follows:

 <div class="contact-form" id="contact-id">
          <form action="/ajax/email" class="contact-form" method="POST" onsubmit="return submitEmailForm(this);">
          <div class="form-group">
            <label class="control-label col-sm-2" for="fname">First Name:</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="fname" placeholder="Enter First Name" name="fname">
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-sm-2" for="lname">Last Name:</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="lname" placeholder="Enter Last Name" name="lname">
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-sm-2" for="email">Email:</label>
            <div class="col-sm-10">
              <input type="email" class="form-control" id="email" placeholder="Enter Email" name="email">
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-sm-2" for="phone">Phone:</label>
            <div class="col-sm-10">
              <input type="tel" class="form-control" id="phone" placeholder="Enter Phone Number" name="email">
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-sm-2" for="company">Company:</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="company" placeholder="Enter Company Name" name="email">
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-sm-2" for="comment">Question:</label>
            <div class="col-sm-10">
              <textarea class="form-control" rows="5" id="comment">What services are you interested in?</textarea>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-default">Submit</button>
            </div>

          </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- <hr>
<div class="contactQuote">
  <h1>Coming together is a beginning, <br>
    staying together is progress, <br>
    & working together is success.
  </h1>
</div>
<hr> -->
<!-- <div col-12 class="contactCollabImg">
  <img class="contactImg2" src="images/contactcollabImg.jpg" alt="" srcset="">
</div> -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
  function submitEmailForm(form) {
    var obj = new XMLHttpRequest();
    obj.onreadystatechange = function(){
      if(obj.readyState == 4){
        if(obj.status == 200){
          var res = JSON.parse(obj.responseText);
          alert(res.message); 
        }
        else{
          alert("XMLHttp status " + obj.status + ":Failed to Send Message " + obj.statusText);
        }
      }
    };
    obj.open("post", form.action, true);
    obj.setRequestHeader("Content-Type", "application/json"); // NOTICE: "application/json"
    obj.send(JSON.stringify({ fname: form.fname.value, lname: form.lname.value, email: form.email.value, phone: form.phone.value, company: form.company.value, comment: form.comment.value }));
    return false;
  }
</script>