DEV Community

Robson Muniz
Robson Muniz

Posted on

🦶🏼Multi Step Form With Progress | HTML CSS & JavaScript

🦶🏼Multi Step Form With Progress | HTML CSS & JavaScript


Markup:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Multi Step Form with Progressbar</title>
    <link rel="stylesheet" href="style.css">
    <script src="app.js" defer></script>
</head>
<body>

<form action="#" class="form">

    <h1 class="text-center">SignUp Form</h1>

<!--    Progressbar-->
    <div class="progressbar">

        <div class="progress" id="progress"></div>

        <div class="progress-step active" data-title="Name"></div>
        <div class="progress-step" data-title="Contact"></div>
        <div class="progress-step" data-title="ID"></div>
        <div class="progress-step" data-title="Password"></div>
    </div>

<!--    steps-->
    <div class="form-step active">
        <div class="input-group">
            <label for="username">First Name</label>
            <input type="text" name="username" id="username">
        </div>
        <div class="input-group">
            <label for="lname">Last Name</label>
            <input type="text" name="lname" id="lname">
        </div>
        <div class="">
            <a href="#" class="btn btn-next with-50 ml-auto">Next</a>
        </div>
    </div>

    <div class="form-step">
        <div class="input-group">
            <label for="phone">Phone</label>
            <input type="text" name="phone" id="phone">
        </div>
        <div class="input-group">
            <label for="email">Email</label>
            <input type="email" name="email" id="email">
        </div>
        <div class="btns-group">
            <a href="#" class="btn btn-pre">Previous</a>
            <a href="#" class="btn btn-next">Next</a>
        </div>
    </div>

    <div class="form-step">
        <div class="input-group">
            <label for="dob">Date of Birth</label>
            <input type="date" name="dob" id="dob">
        </div>
        <div class="input-group">
            <label for="id">National ID</label>
            <input type="number" name="id" id="id">
        </div>
        <div class="btns-group">
            <a href="#" class="btn btn-pre">Previous</a>
            <a href="#" class="btn btn-next">Next</a>
        </div>
    </div>

    <div class="form-step">
        <div class="input-group">
            <label for="password">Password</label>
            <input type="password" name="password" id="password">
        </div>
        <div class="input-group">
            <label for="ConfirmPassword">Confirm Password</label>
            <input type="password" name="ConfirmPassword" id="ConfirmPassword">
        </div>
        <div class="btns-group">
            <a href="#" class="btn btn-pre">Previous</a>
            <input type="submit" value="Submit" class="btn">
        </div>
    </div>

</form>

</body>
</html>

Enter fullscreen mode Exit fullscreen mode

Discussion (0)