Cool sign up page design using HTML, CSS, and Javascript

Hello friends, today in this blog we will see how to create a cool sign-up form design using HTML, CSS, and Javascript. In our previous blog, we saw how to create an awesome login form design using HTML and CSS Only. Earlier, I shared many projects related to CSS Forms, you can check if you want, and don't forget to check HTML, CSS, and Javascript projects.

The Sign-Up form is commonly used by websites, computer applications, and mobile apps. A Sign-Up page (also known as a registration page) enables users to create an account and use the platform's services. There are some standard details, that platforms ask to fill in the form like name, email, and password.

HTML Code

<!DOCTYPE html>
<html lang="en">
<!-- -------------------- Created By InCoder -------------------- -->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cool sign up form - InCoder</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>

<body>
    <div class="container">
        <h1 class="title">Create Account</h1>
        <p class="link">Already have an account? <a href="#">Sign in</a></p>
        <form id="signUp">
            <div class="form-group name-input-group">
                <input type="text" placeholder="First Name">
                <input type="text" placeholder="Last Name">
            </div>
            <div class="form-group">
                <input type="email" placeholder="Email">
            </div>
            <div class="form-group passInput">
                <input type="password" placeholder="Password">
                <i class="fa-solid fa-eye" onclick="toggleType(this)"></i>
            </div>
            <div class="form-group passInput">
                <input type="password" placeholder="Confirm Password">
                <i class="fa-solid fa-eye" onclick="toggleType(this)"></i>
            </div>
            <button type="submit" class="submitBtn">Sign Up <i class="fa-solid fa-arrow-right"></i></button>
        </form>
        <p class="terms-services">
            <input class="input" id="terms-services" type="checkbox" />
            <label class="checkbox" for="terms-services"><span>
                    <svg width="12px" height="10px">
                        <use xlink:href="#check"></use>
                    </svg></span><span>I have read and agree to the Terms of Service</span></label>
            <!--SVG Sprites-->
            <svg class="inline-svg">
                <symbol id="check" viewbox="0 0 12 10">
                    <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
                </symbol>
            </svg>
        </p>
    </div>
</body>

</html>

CSS Code

/* -------------------- Created By InCoder -------------------- */

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    background: linear-gradient(50deg, rgb(255 159 77 / 71%), rgb(253 80 112 / 79%) 20%, rgb(255 83 101 / 76%) 80%, rgb(255 159 77 / 55%));
}

.container {
    margin: 1.2rem;
    background: #fff;
    border-radius: 1.5rem;
    transition: transform .3s;
    width: clamp(20rem, 55vh, 30rem);
    transform: scale(1) translateY(0rem);
    animation: scaleUp 1s cubic-bezier(0, 1.06, 0.73, 1.02);
}

@keyframes scaleUp {
    0%{
        transform: scale(.7) translateY(6rem);
    }
    100%{
        transform: scale(1) translateY(0rem);
    }
}

.container .title {
    margin-top: 1rem;
    text-align: center;
    letter-spacing: -0.5px;
    font-size: clamp(1.8rem, 6vh, 2.5rem);
}

.container .link {
    margin-bottom: 1.5rem;
    text-align: center;
}

.container .link a {
    color: #5056c6;
    text-decoration: none;
}

.container .link a:hover {
    text-decoration: underline;
}

#signUp {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.form-group {
    width: 80%;
    display: flex;
    position: relative;
    align-items: center;
    margin-bottom: .8rem;
    justify-content: center;
}

.form-group input {
    border: 0;
    width: 100%;
    height: 3.2rem;
    font-size: 1rem;
    border-radius: 1rem;
    padding-left: .8rem;
    padding-right: .8rem;
    color: rgb(0 0 0 / 50%);
    background-color: rgb(0 0 0 / 5%);
}

.form-group input:focus {
    background-color: rgb(0 0 0 / 8%);
}

.form-group input::placeholder {
    font-size: 1rem;
    color: rgb(0 0 0 / 50%);
}

.form-group input:focus {
    outline: none;
}

.passInput i{
    right: 5%;
    display: none;
    font-size: 1.2rem;
    cursor: pointer;
    position: absolute;
    color: rgb(0 0 0 / 40%);
}

.name-input-group input:first-child {
    border-radius: 1rem 0 0 1rem;
    border-right: 3px solid #fff;
}

.name-input-group input:last-child {
    border-radius: 0 1rem 1rem 0;
    border-left: 3px solid #fff;
}

.submitBtn {
    border: 0;
    width: 80%;
    color: #fff;
    height: 3.2rem;
    cursor: pointer;
    margin-top: .2rem;
    font-size: 1.2rem;
    position: relative;
    border-radius: 1rem;
    background-color: rgb(72 150 255);
}

.submitBtn i {
    top: 35%;
    right: 8%;
    position: absolute;
}

.submitBtn:hover i,
.submitBtn:focus i{
    outline: none;
    animation: move .8s cubic-bezier(0.4, 0, 1, 1) infinite alternate;
}

a:focus,
.submitBtn:focus {
    outline: none;
}

@keyframes move {
    0% {
        right: 8%;
    }

    100% {
        right: 6%;
    }
}

@-moz-keyframes move {
    0% {
        right: 8%;
    }

    100% {
        right: 6%;
    }
}

@-webkit-keyframes move {
    0% {
        right: 8%;
    }

    100% {
        right: 6%;
    }
}

@-o-keyframes move {
    0% {
        right: 8%;
    }

    100% {
        right: 6%;
    }
}

.terms-services {
    display: flex;
    margin-top: 1rem;
    margin-bottom: 1rem;
    justify-content: center;
}

.checkbox {
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    padding: 6px 8px;
    display: flex;
    max-width: 80%;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.checkbox:not(:last-child) {
    margin-right: 6px;
}

.checkbox span {
    float: left;
    vertical-align: middle;
    transform: translate3d(0, 0, 0);
}

.checkbox span:first-child {
    position: relative;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 4px;
    transform: scale(1);
    border: 1px solid #cccfdb;
    transition: all 0.2s ease;
    box-shadow: 0 1px 1px rgba(0, 16, 75, 0.05);
}

.checkbox span:first-child svg {
    position: absolute;
    top: 3px;
    left: 2px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.3s ease;
    transition-delay: 0.1s;
    transform: translate3d(0, 0, 0);
}

.checkbox span:last-child {
    padding-left: 8px;
    line-height: 18px;
}

.checkbox:hover span:first-child {
    border-color: #07f;
}

.input {
    position: absolute;
    visibility: hidden;
}

.input:checked+.checkbox span:first-child {
    background: #07f;
    border-color: #07f;
    animation: wave 0.4s ease;
}

.input:checked+.checkbox span:first-child svg {
    stroke-dashoffset: 0;
}
.inline-svg {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    user-select: none;
}

@-moz-keyframes wave {
    50% {
        transform: scale(0.9);
    }
}

@-webkit-keyframes wave {
    50% {
        transform: scale(0.9);
    }
}

@-o-keyframes wave {
    50% {
        transform: scale(0.9);
    }
}

@keyframes wave {
    50% {
        transform: scale(0.9);
    }
}

@media (max-width: 320px) {
    .container .title{
        font-size: 2rem;
    }
    .link{
        font-size: .9rem;
    }
}

Javascript Code

let passInput = document.querySelectorAll(".passInput input")
        let state = false

        const toggleType = (icon) => {
            if(state){
                icon.classList.remove('fa-eye-slash')
                icon.classList.add('fa-eye')
                icon.parentElement.querySelector('input').type = 'password'
                state = false
            }else{
                icon.classList.remove('fa-eye')
                icon.classList.add('fa-eye-slash')
                icon.parentElement.querySelector('input').type = 'text'
                state = true
            }
        }

        passInput.forEach(input => {
            input.addEventListener('keyup', e => {
                if(e.target.value.length != 0){
                  input.parentElement.querySelector('i').style.display = 'block'
                }else{
                    input.parentElement.querySelector('i').style.display = 'none'
                }
            })
        })

Blog

Cool sign up page design using HTML, CSS, and Javascript

Ashutosh Tiwari

You may like these:

HTML Code

CSS Code

Javascript Code

Join Our Newsletter. No Spam, Only the good stuff.

Related