How to Create Sign Up Page Design in HTML CSS With Source Code

Sign Up Form in HTML CSS With Source Code
How to Create Sign Up Form in HTML CSS With Source Code
Spread the love, Share this Article!

Subscribe to Our YouTube Channel!

Introduction – Signup and Login HTML Form

A Login and sign up page design is an essential feature of every type of website. Website owners require the user’s details such that name, email address, or mobile number for the user registration process. In this article, you will learn how to create sign up page design in HTML CSS with source code and how to use HTML and CSS3’s latest features. This login and sign up page design with HTML CSS is also responsive to all media devices. This article also explains how to create a login and sign up pages using HTML and CSS with step by step guide and source code.

Steps – How to Create Login and Sign Up Page?

We are going to cover the following important topics to create a beautiful HTML CSS-based login and sign up landing page design:

  1. Open the code editor of your choice on your computer. In this tutorial, we are using Visual Studio Code.
  2. Create a new file named signup.html in your code editor.
  3. Write HTML code to design the basic structure of the signup and login forms.
  4. After that, create a style.css file and link a CSS file with an HTML page using an HTML link tag.
  5. Write CSS code to decorate and style the signup form design in HTML and CSS.
  6. Add background body image in HTML CSS sign up form.
  7. Add font awesome social icons using CDN link in HTML signup page.
  8. How to create a beautiful button design in CSS signup and user login form?
  9. How to create a login and sign up pages in CSS and HTML with form toggle features?


Video Tutorial – Creating Signup Page Design

You can watch the video tutorial for a complete step-by-step guide to creating an HTML CSS template for the signup and login forms.

Video tutorial for how to create a login signup page in HTML & CSS!


Or You can read the full detailed article to create a responsive login and sign up page design using HTML and CSS template and how to create a login form template with free Source Code.

HTML Code – User Signup Page Template

In this section, we created a new file named, signup.html in our code editor. After that, write the following HTML code in the body section of your sign-up page. HTML code includes the two sections of the sign-in and signup pages.

<!DOCTYPE html>
<html lang="en">
<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">
    <!-- Font Awesome 5 CDN link to add icones -->
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <title>Sign Up</title>
    <!-- Linking .css file with HTML page -->
    <link rel="stylesheet" href="style1.css">
</head>
<body>
    <div>
        <!-- Left section of signup form -->
        <dive>
            <h1>Sign Up</h1>
            <h5>Welcome to our - favourite music</h5>
            <form action="" method="get">
             <div>
                <p><label for="userNmae">User Name</label></p>
                <input type="text" id="userName" autocomplete="off" >
             </div>
             <div>
                <p><label for="email">Email Address</label></p>
                <input type="email" id="email" name="email" required autocomplete="off">
             </div>
             <div>
                <p><label for="password">Password</label></p>
                <input type="password" id="password" required >
             </div>
             <button type="button" id="btn">Sign Up Now</button>
             <p>Already a member? <a href="login.html">Log in</a></p>
            </form>
            <div></div>  
            <!-- Adding social icones -->
            <div> 
               <h6>Or Connect With - </h6>
               <div><i></i></div>
               <div><i></i></div>
               <div><i></i></i></div>
            </div>
        </dive>
        <!-- Right section of the form containing image -->
        <div> 
            <img src="https://www.hmablogs.com/wp-content/uploads/2021/07/musicImg.png" alt="Music Image">
        </div>
    </div>
</body>
</html>

Explaination – Free HTML Signup Form Code

The signup form source code contains two sections. The first section contains the HTML inputs and font awesome social media icons. The social icons and, the buttons have beautiful mouse-over hover effects. The second section includes an image on the right side of the HTML form.

HTML Code – User Login Page Template

The following image shows the user login form in HTML and CSS.

HTML login gape design template

In this section, we are going to create the HTML login page design. The login page is linked with the signup page design template under the signup button. When the user clicks on the login button then redirected to this login form.

<!DOCTYPE html>
<html lang="en">
<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">
    <!-- Font Awesome icones CDN Link -->
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <title>Sign Up</title>
    <!-- Linking css code file -->
    <link rel="stylesheet" href="style1.css">
</head>
<body>
    <div>
        <dive>
            <h1>Sign in</h1>
            <h5>Welcome to our - favourite music</h5>
            <form action="" method="get">
             <div>
                <p><label for="email">Email</label></p>
                <input type="email" id="email" name="email" required >
             </div>
             <div>
                <p><label for="userNmae">Password</label></p>
                <input type="password" id="password" required >
             </div>
             <button type="button" id="btn">Sign in Now</button>
             <p>Not a register user? <a href="signUp.html">Sign Up</a></p>
            </form>
            <div></div>  
            <!-- Social media icones -->
            <div>
               <h6><strong>Or connect with - </strong></h6>
               <div><i></i></div>
               <div><i></i></div>
               <div><i></i></i></div>
            </div>
        </dive>
        <div> 
            <img src="https://www.hmablogs.com/wp-content/uploads/2021/07/musicImg.png" alt="Music Image">
        </div>
    </div>
</body>
</html>

Want more Free Source Codes?

Hey, If this article is helpful, Please Consider Buying Me a Coffee

Your small help will enable us to bring free content for you!


CSS Source Code – Login & Signup Forms

In this section, we are going to write CSS source code for both Login and sign-up pages. Both pages have the same CSS code file and which has linked to both of them.

How to add body background image in CSS?

First of all, we are adding a body background image in the sign-up page design. the HTML body tag contains the box-sizing CSS property.

What is CSS Box Sizing?

The CSS box-sizing property allows us to include the padding and border in an element’s total width and height.

body{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: sans-serif;
    background-image: url(https://www.hmablogs.com/wp-content/uploads/2021/07/backgroundimg-scaled.jpg);
    background-size: cover;
    background-attachment: fixed;
}

CSS Code – HTML Sign Up Page With Sections

The Login and sign-up forms have two sections. The first section has a with of 40% and the second has with of 50%. We have used the input: focus CSS property to design the input fields for HTML CSS forms. Password: focus CSS property was used to decorate the password field of the login & sign-up forms.

.container{
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 650px;
    height: 500px;
    margin-top: 90px;
    background-color: #FBFBFB;
    display: flex;
}
.section1{
    width: 40%;
    padding-left: 50px;
}
.section2{
    width: 50%;  
}
.section2 > img{
    width: 100%;
    height: 100%;
    margin: 10px 0px 0px 8px;
}
h5{
    margin-top: -12px;
}
label{
    text-transform: uppercase;
    font-size: 12px;
    color: rgb(48, 48, 48);
}
input{
    border: none;
    width: 100%;
    border-bottom: 1px solid lightgray;
    background-color: #FBFBFB;
    position: relative;
    top: -10px;
    padding: 5px;
}
input:focus {
    outline: none !important;
    border-bottom: 1px solid red;
    font-size: 14px;
    font-weight: bold;
}
#password:focus{
    color: red;
    font-size: 16px;
    font-weight: bold;
}
#btn{
    border: none;
    background-color: red;
    border-radius: 20px;
    padding: 10px;
    color: white;
    width: 120px;
    margin-top: 15px;
}
p{
    font-size: small;
}
.line{
    border-bottom: 1px solid lightgray;
    width: 100%;
    margin-top: 50px;
}
.socialIcons{
    display: flex;
    margin-top: 5px;
}
.icon{
    margin: 10px 7px;
    position: relative;
    left: 30px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 2px solid black;
    font-size: 12px;
    line-height: 25px;
}
.fab{
    position: relative;
    left: 6px;
}
.fb > .fab {
    position:relative;
    left: 8px;
}
h6{
    position:relative;
    top: -8px;
    font-size: 12px;
}
.icon:hover, #btn:hover{
    box-shadow: 0 0 25px rgba(8, 8, 8, 0.2);
    background-color: rgb(182, 49, 93);
}

Want more Free Source Codes?
Please Consider Buying Me a Coffee!

Your small help will enable us to bring free content for you!

Hit The Subscribe Button to Get Daily New video!

Spread the love, Share this Article!

Important Tags:

13 Responses

  1. Usuаlly I don’t read poѕt on blogs, howevеr I wish
    to say that thiѕ write-up very compelled me to try and ɗo ѕo!
    Your writing style has been surpriseɗ me. Thаnk you, quite nice articⅼe.

    Review my page :: job

  2. I like the helpful information you provide in your articles.
    I will bookmark your blog and check again here frequently.
    I am quite sure I will learn plenty of new stuff right
    here! Best of luck for the next!

  3. I think this is one of the most important information for me. And i am glad reading your article. But should remark on few general things, The site style is great, the articles is really excellent : D. Good job, cheers

  4. Greetings! I’ve been following your blog for a long time now and finally got the courage to go ahead and give you a shout out from Kingwood Texas! Just wanted to tell you keep up the fantastic work!

  5. Hi, I think your site might be having browser compatibility issues.
    When I look at your blog site in Safari, it looks fine but when opening in Internet Explorer, it
    has some overlapping. I just wanted to give you a quick heads up!
    Other then that, awesome blog!

  6. I think this is one of the most significant info for me.
    And i’m glad reading your article. But wanna remark on few general things, The site
    style is great, the articles is really nice : D. Good job,
    cheers

  7. Hi i am kavin, its my first time to commenting anywhere, when i read this
    piece of writing i thought i could also make comment due
    to this brilliant paragraph.

Leave a Reply

Your email address will not be published.