How to Create Form and Submit Form in Node using Express Js

It might be challenging to create forms in the node js application; however, it becomes fun with the proper guidance and straightforward examples.

If you are a node developer and want to know more about simple form in node, then you are at the right place.

In this eloquent guide, we will step by step enumerate the procedure to create a form in node and submit the form with the help of express js.

At the end of this tutorial, you will utterly find out how easy it can be to work with forms in node.

We will create a basic node app for handling form submission in the Node js application.

On top of that, make you familiar with all the significant information required to send or pass the data through an HTML form using express js.

Node Form Submission using Express Tutorial

  • Step 1: Create Node Project
  • Step 2: Install NPM Packages
  • Step 3: Create Form Route with Express
  • Step 4: Build Simple Form Submission
  • Step 5: Configure Npm Command
  • Step 6: Run Node App

Create Node Project

Let us start the process by building a new project folder for node app development.

mkdir node-pandora

Next, step inside the project by using the following command.

cd node-pandora

Now, on your terminal, type the following command to initialize the node project.

npm init

Immediately after you bring the above command into action, specific questions appear on the command-line tool.

Add the details about the project; subsequently, it will generate the new package.json file.

Install NPM Packages

To build the simple route we will use express and body-parser packages, on your command prompt type the given command and than hit enter.

npm install express body-parser

Create Form Route with Express

In the previous step, we installed the body parser and express packages.

Now, in this step we will learn to use them to create the basic route to handle form submission in node application.

Create the index.js file at the root of your node application, also ensure that you are adding the entire given code in the same file.

const express = require('express')

var parseUrl = require('body-parser')
const app = express()


let encodeUrl = parseUrl.urlencoded({ extended: false })

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/form.html')
})

app.post('/', encodeUrl, (req, res) => {
  console.log('Form request:', req.body)
  res.sendStatus(200)
})

app.listen(4000)

Build Simple Form Submission

Now, you are going to create a basic yet beautiful form in node, to build the form we are using bootstrap 5.

Make sure to add the bootstrap CDN link in the head section, thereafter, use the form component to create the form, also define the action attribute in the form tag.

Create the form.html file in your node folder and add the following code within the file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <h2>Node JS Submit Form with Express Js - RemoteStack.io</h2>
      <form action="/" method="POST">
        <div class="form-group mb-3">
          <label>First name</label>
          <input type="text" class="form-control" placeholder="First name" name="firstName">
        </div>
        <div class="form-group mb-3">
          <label>Last name</label>
          <input type="text" class="form-control" placeholder="Last name" name="lastName">
        </div>
        <div class="form-group mb-3">
          <label>Email</label>
          <input type="email" class="form-control" placeholder="Email" name="email">
        </div>
        <div class="d-grid mt-3">
        <button type="submit" class="btn btn-danger">Submit</button>
        </div>
      </form>
  </body>
</html>

Configure Npm Command

We want to manage the app from the command line tool; we need to configure the package json file.

Head over to the package.json file; in here, you have to define the start script.

{
    ...
    ...
    ...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"

  },
    ...
    ...
    ...
}

Run Node App

Up until now, all the things have been connected properly. So, without wasting much time, let us start the node application.

npm start

After the node server starts, take the given URL, reach to browser’s address bar and see the app in action.

How to Create Form and Submit Form in Node using Express Js

Summary

We have highlighted all the significant concepts associated with node express form submission functionality throughout this tutorial.

You must have assimilated how to make a form, create a simple route, set an express route, and run the route on a specific port. Not only but also learned how to create, submit and parse form data in the node js application.