Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

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

  • Difficulty Level : Medium
  • Last Updated : 07 Oct, 2021

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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

Javascript




// 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
app.use(express.urlencoded());
  
// 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 
mongoose.connect(
    { useUnifiedTopology: true }
);
  
// Create schema
const feedSchecma = mongoose.Schema({
    name: String,
    email: String,
    feed: String
});
  
// Making a modal on our already
// defined schema
const feedModal = mongoose
    .model('feeds', feedSchecma);
  
// Handling get request
app.get('/', function (req, res) {
    // Rendering your form
    res.render('feedback_form');
});
  
// Handling data after submission of form
app.post("/feedback_form", function (req, res) {
    const feedData = new feedModal({
        name: req.body.name,
        email: req.body.email,
        feed: req.body.feedback
    });
    feedData.save()
        .then(data => {
            res.render('feedback_form',
{ msg: "Your feedback successfully saved." });
        })
        .catch(err => {
            res.render('feedback_form'
                { msg: "Check Details." });
        });
})
  
// Server setup
app.listen(port, () => {
    console.log("server is running");
});

Filename: feedback_form.pug

html




<!DOCTYPE html>
html(lang="en")
    head
        meta(charset="UTF-8")
        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")
    body
        .form
            h2 Feedback Form
            if(msg)
                small=msg
            //- feedback_form POST route
            form(action="/feedback_form",method="POST")
                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
                textarea#feedback(
                    name="feedback", 
                    cols="30", rows="5"
                )
                button(type="submit") Submit

Filename: style.css



CSS




* {
    margin: 0;
    padding: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

Output:

Data records




My Personal Notes arrow_drop_up
Recommended Articles
Page :