Vue Bootstrap 5 Contact form component

// JS

NODE_ENV=development
PORT=3000
MAIL_USERNAME=your_smtp_email_address
MAIL_PASSWORD=your_smtp_email_password
MAIL_HOST=your_smtp_host
MAIL_PORT=your_smtp_port
MAIL_TO=email_address_to_which_you_want_mails_to_be_sent

// JS

NODE_ENV=development
PORT=3000
MAIL_USERNAME=your_email_address_here
MAIL_PASSWORD=your_email_password
MAIL_HOST=smtp.gmail.com
MAIL_PORT=465
MAIL_TO=email_address_to_which_you_want_mails_to_be_sent

// JS

require('dotenv').config();

module.exports = {
PORT: process.env.PORT || 3000,
NODE_ENV,
MAIL_HOST: process.env.MAIL_HOST,
MAIL_PORT: process.env.MAIL_PORT,
MAIL_USERNAME: process.env.MAIL_USERNAME,
MAIL_PASSWORD: process.env.MAIL_PASSWORD,
MAIL_TO: process.env.MAIL_TO
};

// JS

const express = require("express");
const multer = require("multer");
const cors = require("cors");
const config = require("./config");
const routes = require("./routes");

const upload = multer();
const app = express();

app.use(cors());
app.use(upload.none());

app.use("/api", routes);

app.listen(config.PORT, () => {
console.log(`Server is running on port ${config.PORT}.`);
});

// JS

const router = require("express").Router({ mergeParams: true });
const contactRoutes = require("./contact.routes");

router.use("/contact", contactRoutes);

module.exports = router;

// JS


// express server specific imports
const router = require("express").Router({ mergeParams: true });

// import for contact form routes controller
const { ContactController } = require("../controllers/contact.controller");

router.post("/", (req, res) => {
const controller = new ContactController(req, res);
controller.sendContactForm();
});

module.exports = router;

// JS

const nodemailer = require("nodemailer");

const { MAIL_HOST, MAIL_PORT, MAIL_PROVIDER, MAIL_USERNAME, MAIL_PASSWORD, MAIL_TO } =
require('../config');

const transporter = nodemailer.createTransport({
host: MAIL_HOST,
port: MAIL_PORT,
auth: {
user: MAIL_USERNAME,
pass: MAIL_PASSWORD,
},
});

class ContactController {
constructor(request, response) {
this.request = request;
this.response = response;
}

sendContactForm() {

const { name, email, subject, message, mailCopy } = this.request.body;

const mailOptions = {
to: [MAIL_TO], // Enter here the email address on which you want to send emails from your
customers
from: name,
subject,
text: message,
};

if (mailCopy) {
mailOptions.to.push(email);
}

transporter
.sendMail(mailOptions)
.then(() => {
return this.response
.status(200)
.json({ msg: "Email sent successfully" });
})
.catch((error) => {
return this.response
.status(400)
.json({ errors: [{ msg: `Something went wrong: ${error}` }] });
});
}
}

module.exports = ContactController;

// JS


const { body, validationResult } = require("express-validator");

module.exports = [
body("name").notEmpty().withMessage("You must supply a name"),
body("email").isEmail().normalizeEmail().withMessage("Email is not valid"),
body("subject").notEmpty().withMessage("You must supply a subject"),
body("message").notEmpty().withMessage("You must supply a message"),
body("mailCopy").toBoolean(),
function (req, res, next) {
const errors = validationResult(req);

if (!errors.isEmpty()) {
return res.status(400).json({ errors: errors.array() });
}

next();
},
];

// JS

// express server specific imports
const router = require("express").Router({ mergeParams: true });

// import validation middleware
const validate = require("../middleware/validate");

// import for contact form routes controller
const { ContactController } = require("../controllers/contact.controller");

// add validator to the route callback
router.post("/", validate, (req, res) => {
const controller = new ContactController(req, res);
controller.sendContactForm();
});

module.exports = router;

// package.json

"start": "node server.js",
"start:dev" : "nodemon server.js"

// Terminal

npm install nodemon --save-dev

<script>
  import {
    MDBInput,
    MDBTextarea,
    MDBBtn,
  } from "mdb-vue-ui-kit";
  import {
    ref
  } from "vue";
  export default {
    components: {
      MDBInput,
      MDBTextarea,
      MDBBtn,
    },
    setup() {
      const nameCustomValidation = ref("");
      const emailCustomValidation = ref("");
      const subjectCustomValidation = ref("");
      const messageCustomValidation = ref("");
      const copyCustomValidation = ref(false);

      const statusRef = ref(null);
      const checkValidation = () => {
        let isDataValid = true;
        let statusMessage = "";

        if (nameCustomValidation.value === "") {
          statusMessage +=
            '<p class="note note-danger"><strong>Name</strong> cannot be empty</p>';
          isDataValid = false;
        }

        if (emailCustomValidation.value === "") {
          statusMessage +=
            '<p class="note note-danger"><strong>Email</strong> cannot be empty</p>';
          isDataValid = false;
        } else {
          const re =
            /^(([^<>()[]\.,;:s@"]+(.[^<p>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;

          if (!re.test(emailCustomValidation.value)) {
            statusMessage += '<p class="note note-danger"><strong>Email</strong> is invalid</p>'
            ';
            isDataValid = false;
          }
        }

        if (subjectCustomValidation.value === "") {
          statusMessage +=
            '<p class="note note-danger"><strong>Subject</strong> cannot be empty</p>';
          isDataValid = false;
        }
        if (messageCustomValidation.value === "") {
          statusMessage +=
            '<p class="note note-danger"><strong>Message</strong> cannot be empty</p>';
          isDataValid = false;
        }
        return {
          isDataValid,
          statusMessage
        };
      };

      const validateForm = (e) => {
        const formData = new FormData(e.target);

        const {
          isDataValid,
          statusMessage
        } = validateForm();

        if (!isDataValid) {
          statusRef.value.innerHTML = statusMessage;
          return;
        }

        fetch('/api/contact', {
            method: 'POST',
            body: formData,
            mode: 'cors'
          })
          .then((response) => {
            response.json();
          })
        then((response) => {
            // handle errors
            if (response.errors) {
              response.errors.forEach(({
                msg
              }) => {
                statusRef.value.innerHTML += `<p class="note note-danger">${msg}</p>`
              });
              return;
            }
            // If mail was sent successfully, reset all elements with attribute 'name'
            nameCustomValidation.value = ''
            emailCustomValidation.value = ''
            subjectCustomValidation.value = ''
            messageCustomValidation.value = ''
            copyCustomValidation.valule = false

            statusRef.value.innerHTML = `<p class="note note-success">${response.msg}</p>`;
          })
          .catch((err) => {
            statusRef.value.innerHTML += `<p class="note note-danger">${err}</p>`
          })
          .finally(() => {
            setTimeout(() => {
              statusRef.value.innerHTML = '';
            }, 2000)
          })
      };

      return {
        nameCustomValidation,
        emailCustomValidation,
        subjectCustomValidation,
        messageCustomValidation,
        statusRef,
        validateForm
      };
    },
  }
</script>