Skip to content
Related Articles
Open in App
Not now

Related Articles

Feedback form using Pugjs, Node.js, MongoDB, Express

Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 11 Oct, 2022
Improve Article
Save Article

We can create a feedback form using PugJs, NodeJS, MongoDB, Express with the following steps. A feedback form takes the input from the user and sends the data to the server to process it and store it accordingly into the database.

Step 1: Create a feedback_form named folder in any directory. You can take any name.

Step 2: Initialize the NodeJS project using the following command.

npm init  –y

Step 3: Install the required modules using the following command from your terminal/cmd.

// Express middleware
npm install express  --save 

// Database setup
npm install mongoose  --save 

// pugjs for client site rendering
npm install pug  --save 

// OR you can install all command
// using single command
npm install express pug mongoose

Step 4: Directory structure will look like the following.

Directory structure

  • node_modules: It contains all our installed node modules.
  • static: It contains the static files for your server.
  • views: It contains PugJS files to render to the client site.
  • app.js: It contains the server code to run this application.

Step 5: After installing modules, write down the following codes in order to create a feedback form.   

Filename: app.js


// Require express to make easy
// routing on server side.
const express = require("express");
// Creating express object
const app = express();
// Require path module
const path = require('path');
// Require pug template engine
const pug = require("pug");
// Require mongoose to use mongoDb
// in a easier way
const mongoose = require("mongoose");
// Define a port number
const port = 3000;
// Make a static route to use your
// static files in client side
app.use('/static', express.static('static'));
// Middleware for parsing
// Define and use pug engine so also
// declare path on rendering
app.set('view engine', 'pug');
app.set('views', path.join(__dirname, 'views'));
// Database Connection
    { useUnifiedTopology: true }
// Create schema
const feedschema = mongoose.Schema({
    name: String,
    email: String,
    feed: String
// Making a modal on our already
// defined schema
const feedModal = mongoose
    .model('feeds', feedSchema);
// Handling get request
app.get('/', function (req, res) {
    // Rendering your form
// Handling data after submission of form"/feedback_form", function (req, res) {
    const feedData = new feedModal({
        .then(data => {
{ msg: "Your feedback successfully saved." });
        .catch(err => {
                { msg: "Check Details." });
// Server setup
app.listen(port, () => {
    console.log("server is running");

Filename: feedback_form.pug


<!DOCTYPE html>
        meta(name="viewport", content=
            "width=device-width, initial-scale=1.0")
        title Feedback Form
        //- we are directly use static files because
        // already use static serve
        link(rel="stylesheet", href="/static/style.css")
            h2 Feedback Form
            //- feedback_form POST route
                label(for="name") Enter Your Name
                input#name(type="text", name="name")
                label(for="email") Enter Your Email
                input#email(type="email", name="email")
                label(for="feedback") Enter Your Feedback
                    cols="30", rows="5"
                button(type="submit") Submit

Filename: style.css


* {
    margin: 0;
    font-family: system-ui;
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
.form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: white;
    padding: 1rem;
    box-shadow: 0px 0px 6px 0px #808080b3;
    border-radius: 10px;
.form form {
    display: flex;
    flex-direction: column;
    justify-content: center;
.form form input, .form form textarea {
    border: 1px solid gray;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 20px;
    outline: none;
.form form label {
    margin-top: 7px;
.form button {
    margin-top: 10px;
    padding: 4px 10px;
    font-size: 1rem;
    border: 1px solid gray;
    border-radius: 7px;
    outline: none;
    cursor: pointer;

Step 6: Run the app.js file using the following command:

node app.js

Design Preview:

Design of our form

Filled Form:

Filled Form

After Submit:

Successfully Submitted form

MongoDB Commands: Use these command to see your database records:

mongo // Start mongo shell
show dbs // See database cluster
use feedback // Use table name
show collections // See collections in cluster 
db.feeds.find() // See records with table name


Data records

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!