Article Categories

Selected Reading

SignUp form using Node and MongoDB

Node.js Server Side Programming Programming MongoDB

In this article, we will create a simple user sign-up form using Node.js and MongoDB. When users fill out the form and click submit, their details will be saved to the MongoDB database.

Installation

Before creating the sign-up form, install the following dependencies:

Express - Web framework for Node.js to handle HTTP requests

npm install express --save

Body-parser - Middleware to parse HTTP POST data

npm install body-parser --save

Mongoose - MongoDB object modeling library for Node.js

npm install mongoose --save

Example

Create the following project structure:

app.js (main server file)
public/ folder containing:
- index.html
- success.html
- style.css

app.js

var express = require("express");
var bodyParser = require("body-parser");

const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/tutorialsPoint', {
    useNewUrlParser: true,
    useUnifiedTopology: true
});

var db = mongoose.connection;
db.on('error', console.log.bind(console, "connection error"));
db.once('open', function(callback){
    console.log("connection succeeded");
});

var app = express();

app.use(bodyParser.json());
app.use(express.static('public'));
app.use(bodyParser.urlencoded({
    extended: true
}));

app.post('/sign_up', function(req, res){
    var name = req.body.name;
    var email = req.body.email;
    var pass = req.body.password;
    var phone = req.body.phone;

    var data = {
        "name": name,
        "email": email,
        "password": pass,
        "phone": phone
    };

    db.collection('details').insertOne(data, function(err, collection){
        if (err) throw err;
        console.log("Record inserted Successfully");
    });
    
    return res.redirect('success.html');
});

app.get('/', function(req, res){
    res.set({
        'Access-control-Allow-Origin': '*'
    });
    return res.redirect('index.html');
}).listen(3000);

console.log("server listening at port 3000");

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Signup Form</title>
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
        <div class="main">
            <form action="/sign_up" method="post">
                <h1>Welcome to Tutorials Point - SignUp</h1>
                <input class="box" type="text" name="name" placeholder="Name" required>
                <input class="box" type="email" name="email" placeholder="E-Mail" required>
                <input class="box" type="password" name="password" placeholder="Password" required>
                <input class="box" type="text" name="phone" placeholder="Phone Number" required>
                <input type="submit" class="registerbtn" value="Submit">
            </form>
        </div>
    </div>
</body>
</html>

success.html

<!DOCTYPE html>
<html>
<head>
    <title>Signup Form</title>
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
        <div class="main">
            <h1>Signup Successful</h1>
        </div>
    </div>
</body>
</html>

style.css

.main {
    padding: 20px;
    font-family: 'Helvetica', serif;
    box-shadow: 5px 5px 7px 5px #888888;
    margin: 50px auto;
    max-width: 500px;
}

.main h1 {
    font-size: 40px;
    text-align: center;
    font-family: 'Helvetica', serif;
}

input {
    font-family: 'Helvetica', serif;
    width: 100%;
    font-size: 20px;
    padding: 12px 20px;
    margin: 8px 0;
    border: none;
    border-bottom: 2px solid #4CAF50;
}

.registerbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    border-radius: 10px;
    font-size: 18px;
}

.registerbtn:hover {
    opacity: 0.8;
}

Running the Application

Start the server with this command:

node app.js

Visit http://localhost:3000 in your browser to see the signup form.

server listening at port 3000
connection succeeded

How It Works

When users submit the form:

Form data is sent via POST to /sign_up endpoint
Server extracts name, email, password, and phone from request body
Data is inserted into MongoDB's details collection
User is redirected to success page

Conclusion

This example demonstrates a complete signup flow using Node.js, Express, and MongoDB. The form captures user data, stores it in the database, and provides user feedback through page redirection.

Mayank Agarwal

Updated on: 2026-03-15T03:58:03+05:30

4K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next