How to Create a Registration Form and Connect it to a Node.js Backend

Building a registration form and connecting it to a backend server is a fundamental skill in web development. In this guide, we’ll go step-by-step through the process of creating a registration form with HTML, styling it with CSS, adding JavaScript for validation, and setting up a Node.js backend to handle form submissions. Let’s dive into each part of this full-stack project!

---

1. Setting Up the HTML Structure

Start by building the basic structure of your registration form with HTML. Here’s a simple layout:

 

2. Styling the Form with CSS

To make your form visually appealing, add some CSS styling. This example includes basic styling to center the form and create a clean look.

 

3. Adding JavaScript Validation

To ensure users enter valid data, we’ll add JavaScript to validate the form inputs before submission.

 

4. Setting Up the Node.js Backend

To handle form submissions, we’ll create a simple Node.js server using Express.

1. Install Dependencies: In your project directory, initialize npm and install Express.
   
   
   
    
   

   bash

   
    
   

   
   
    
   

   
   
    
   

   Copy code

   
    
   
   

   
    
   
   

   
    
   

   npm init -y npm install express body-parser

   
    
   
   

 

1. Create the Server: Add the following code in a server.js file to set up the Express server.
   
   
   
    
   

   javascript

   
    
   

   
   
    
   

   
   
    
   

   Copy code

   
    
   
   

   
    
   
   

   
    
   

   const express = require('express'); const bodyParser = require('body-parser'); const app = express(); const PORT = 3000; app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); app.post('/register', (req, res) => { const { username, email, password } = req.body; console.log('User Data:', username, email, password); res.send('Registration Successful!'); }); app.listen(PORT, () => { console.log(`Server running on http://localhost:${PORT}`); });

   
    
   
   

 

1. Connecting the Frontend to the Backend: Update the JavaScript to send form data to the server using fetch API.
   
   
   
    
   

   javascript

   
    
   

   
   
    
   

   
   
    
   

   Copy code

   
    
   
   

   
    
   
   

   
    
   

   // script.js document.getElementById('registrationForm').addEventListener('submit', function(event) { event.preventDefault(); const formData = { username: document.getElementById('username').value, email: document.getElementById('email').value, password: document.getElementById('password').value }; fetch('http://localhost:3000/register', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(formData) }) .then(response => response.text()) .then(data => alert(data)) .catch(error => console.error('Error:', error)); });

   
    
   
   

 

1. Running the Server: To start the server, run node server.js in your terminal. Then, test the form submission by entering data into your frontend form and checking for responses from the server.

 

---

Conclusion

You now have a fully functional registration form with a frontend built in HTML, CSS, and JavaScript, and a backend in Node.js to handle user submissions. This foundational project is perfect for understanding how frontend and backend components interact in a full-stack application.

At Nandha Infotech, we provide hands-on internship in Coimbatore across multiple tech domains, offering real-world experience and live projects. Whether you're looking to strengthen your skills in frontend, backend, or full-stack development, our programs are designed to equip you with practical expertise and industry-relevant projects.