How To Build a Responsive Signup Form? A Step-by-Step Tutorial For Beginners

The sign-up form is one of the most important aspects of any of the websites, web applications, or any mobile application. Even the big tech giants like Google, Facebook, and Apple, etc. have a signup form implemented on their website.

Basically, these forms are used for collecting user’s information so that they can later be used for a specific purpose. The best example that suits will be creating a Facebook account.

This article is about creating such a signup form for websites. In this responsive web design tutorial, we will create modern signup from scratch using the CSS framework known as Bootstrap.

This tutorial is for those who are just beginning their journey into web designing & development. We will be using HTML, CSS & Bootstrap as our main tech stack.

After the completion of this project one can create various signup or login forms using the bootstrap framework.

Since this is a tutorial for creating a registration form we will only go through the concepts that are necessary for building a form. For the in-depth concept regarding the bootstrap framework, you can visit their official documentation.

Before beginning the tutorial I assume that my readers have basic understanding of HTML, CSS and Bootstrap.

Software Requirements

Before proceeding further we need to install some software in our device and make necessary setup ready.

For this project, we need a code editor where we can write code to build our project. Similarly, a browser which helps to visually implement the code that we write.

In our case we will be using Visual Studio Code & Google Chrome.

In order to install visual studio code you can visit their official website. Installing visual studio code is easy, first download the setup file and follow every instruction guided by the software.

Project Folder Structure

Once you’ve finished installing the software create a folder in your computer drive and open the folder inside the code editor (visual studio code).

Now create a new folder and name it assets. This folder consists of all the files such as css, js etc that are required for our project.

Inside the assets, folder create two sub-folder and name them CSS & images respectively.

Visual Representation for folder structure.

assets/
├── css/
│   ├── style.css
└── images/
    ├── image.jpg

This article is further divided into three sections, Section A & Section B, Section C. In Section A we will cover all the steps that are necessary for structuring our website. Here will use HTML elements to structure our webpage. Similarly, we will link our HTML file with other necessary files such as CSS, js.

In Section B we will implement the bootstrap framework in our project and use necessary class provided by the bootstrap framework to make our website presentable.

Section C will be our last section where we will cover all the steps required to make our website fully responsive. We will also see how we can make use of chrome developer tool to make our website responsive.

Section A : Structuring the Website

Here in this section, we will implement the basic structure of HTML. You can implement it as given in the code snippets below.

Step One : Basic HTML Structure

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Responsive Signup Form - HTML, CSS & Bootstrap Framework Tutorial</title>
        <!-- Custom CSS  -->
        <link rel="stylesheet" href="assets/css/style.css">
    </head>

    <body>
        <div class="container">
        </div>
    </body>
</html>
Code Explained

In the above code snippet first, we created the doctype declaration. The doctype declaration helps the browser to display the webpage correctly. It also specifies the version of the HTML that the webpage is using.

Inside the head element, we linked our document with the CSS file that we will use later to implement our custom CSS. Similarly, inside our body element, we have created a division element with a class name container.

Step Two : Creating the Sections

In this step, we will create a two-section using the division element. These two division elements will inside the container div.

     <!-- Division One: Signup Form Illustration  -->
     <div class="div-img">
        <img src="assets/images/registration.png" alt="Signup Illustration">
     </div>
            <!-- Division Two : Signup Form  -->
            <div>
                <h4>Sign up to proceed</h4>

                <!-- social media authentication  -->
                <div>
                    <!-- Google Authentication Button  -->
                    <div>
                        <a href="#">Sign up withGoogle</a>
                    </div>

                    <!-- Facebook Authentication Button  -->
                    <div>
                        <a href="#">Sign up with Facebook</a>
                    </div>
                </div>

                <!-- Signup Form  -->
                <form>

                    <!-- Full Name  -->
                    <div>
                        <label>Name</label>
                        <input type="text" name="full_name">
                    </div>

                    <!-- Username  -->
                    <div>
                        <label>Username</label>
                        <input type="text" name="username">
                    </div>

                    <!-- Email  -->
                    <div>
                        <label>Email</label>
                        <input type="email" name="email">
                    </div>

                    <!-- Password  -->
                    <div>
                        <label>Password</label>
                        <input type="password" name="password">
                    </div>

                    <!-- User agreement -->
                    <div>
                        <div>
                            <input type="checkbox">
                            <label>
                                Creating an account means you're okay with our <a href="#">Terms of Service</a> & <a
                                    href="#">Privacy Policy</a>
                            </label>
                        </div>
                    </div>

                    <!-- Submit Button  -->
                    <div>
                        <button type="submit">Sign up</button>
                    </div>

                </form>
            </div>
Code Explained

Division One consists an image. So here we create an img element and provide the path for the following image.

Similarly, the section division consists of an HTML form. In this step we created the HTML form with the necessary form elements. Besides there are two button element linking to the social sites. So you can refer the above code snippet.

Section B : Implementing Bootstrap Framework

In this section, we will implement the Bootstrap Framework. Here we will prepare the necessary setup that is required to work with the Bootstrap Framework.

Step One : Link-up the necessary files

For this tutorial we will use the bootstrap cdn method to link with the necessary css and js file. So these are the required link.

  • Bootstrap CSS: https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css
  • Bootstrap Icon: https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css
  • Bootstrap JS: https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js

Place the CSS & Icon inside the head element as the code snippets below.

 <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet">
 
<!-- Bootstrap Icons  -->
       <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">

Step Two : Implementing Bootstrap Classes

<!doctype html>
<html lang="en">

    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"
            integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">

        <!-- Bootstrap Icons  -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">

        <!-- Google Font  -->
        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap"
            rel="stylesheet">

        <!-- Custom CSS  -->
        <link href="assets/css/style.css" type="text/css" rel="stylesheet">


        <title>Responsive Signup Form - HTML, CSS & Bootstrap Framework Tutorial</title>
    </head>

    <body>

        <!-- Main Container  -->
        <div class="container">
            <div class="row align-items-center g-5 py-5">
                <!-- Division One: Signup Form Illustration  -->
                <div class="col-xxl-6 col-xl-6 col-lg-5 div-img">
                    <img src="assets/images/registration.png" alt="Signup Illustration" class="img-fluid">
                </div>

                <!-- Division Two : Signup Form  -->
                <div class="col-xxl-6 col-xl-6 col-lg-7 col-md-12 px-5 py-5">
                    <h4 class="display-5 fw-bold mb-4">Sign up to proceed</h4>

                    <!-- social media authentication  -->
                    <div class="row mb-3">
                        <!-- Google Authentication Button  -->
                        <div class="col-md-6 d-grid mb-2">
                            <a href="#" class="btn btn-primary"><i class="bi bi-google"></i> &nbsp; Sign up with
                                Google</a>
                        </div>

                        <!-- Facebook Authentication Button  -->
                        <div class="col-md-6 d-grid mb-2">
                            <a href="#" class="btn btn-primary"><i class="bi bi-facebook"></i> &nbsp; Sign up with
                                Facebook</a>
                        </div>
                    </div>

                    <!-- Signup Form  -->
                    <form class="row g-3">

                        <!-- Full Name  -->
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Name</label>
                            <input type="text" name="full_name" class="form-control">
                        </div>

                        <!-- Username  -->
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Username</label>
                            <input type="text" name="username" class="form-control">
                        </div>

                        <!-- Email  -->
                        <div class="col-md-12">
                            <label class="form-label fw-bold">Email</label>
                            <input type="email" name="email" class="form-control">
                        </div>

                        <!-- Password  -->
                        <div class="col-md-12">
                            <label class="form-label fw-bold">Password</label>
                            <input type="password" name="password" class="form-control">
                        </div>

                        <!-- User agreement -->
                        <div class="col-md-12">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input">
                                <label class="form-check-label">
                                    Creating an account means you're okay with our <a href="#">Terms of Service</a> & <a
                                        href="#">Privacy Policy</a>
                                </label>
                            </div>
                        </div>

                        <!-- Submit Button  -->
                        <div class="col-md-6 d-grid">
                            <button class="btn btn-primary" type="submit">Sign up</button>
                        </div>

                    </form>
                </div>
            </div>
            <!-- Container Ends  -->




            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"
                integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8"
                crossorigin="anonymous"></script>


    </body>

</html>