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
In this web development tutorial we are going to learn, How to Create sign up page design in HTML CSS With Source Code. You are going to get free source code of HTML CSS login and sign up form.
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:

93 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. Hi there! This is my first comment here so I just wanted to give a quick shout out and tell you I really enjoy reading through your posts. Can you recommend any other blogs/websites/forums that cover the same topics? Thank you so much!

  4. 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

  5. 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!

  6. 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!

  7. 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

  8. 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.

  9. I do not even know the way I stopped up right here, but I thought this submit used to be good.
    I don’t understand who you might be however definitely you’re going
    to a well-known blogger should you are not already. Cheers!

  10. Hey there! I know this is kind of off topic but I was wondering which blog platform
    are you using for this website? I’m getting fed up of WordPress because I’ve
    had issues with hackers and I’m looking at options
    for another platform. I would be great if you could point me in the direction of a
    good platform.

  11. Hi there! This is kind of off topic but I need some advice from an established blog.

    Is it difficult to set up your own blog? I’m not very techincal but I
    can figure things out pretty quick. I’m thinking about setting up my own but I’m not sure where to begin. Do
    you have any points or suggestions? Appreciate it

  12. When I originally commented I seem to have clicked the -Notify me when new comments are added- checkbox and
    from now on whenever a comment is added I recieve 4
    emails with the same comment. Perhaps there is an easy method
    you are able to remove me from that service?
    Appreciate it!

  13. Hello there! This is my first visit to your blog! We are a group of volunteers and starting a new project in a community in the same niche. Your blog provided us useful information to work on. You have done a extraordinary job!

  14. Excellent goods from you, man. I’ve take into account your stuff prior to and you’re just too fantastic.
    I really like what you have bought here, certainly like what you
    are stating and the way in which by which you say it.
    You are making it entertaining and you continue to care
    for to stay it sensible. I can not wait to read much more from you.
    This is actually a terrific web site.

  15. I’m really impressed with your writing talents as smartly as
    with the format to your weblog. Is this a paid subject or did you
    modify it yourself? Anyway keep up the excellent quality writing,
    it is rare to peer a nice weblog like this one nowadays..

  16. Hey! This post couldn’t be written any better! Reading
    through this post reminds me of my old room mate!
    He always kept chatting about this. I will forward this post
    to him. Pretty sure he will have a good read. Many thanks for sharing!

  17. It’s appropriate time to make some plans for the future
    and it’s time to be happy. I’ve read this post and if I could I want to suggest you some interesting things or tips.
    Perhaps you can write next articles referring to this article.

    I desire to read more things about it!

  18. whoah this blog is wonderful i love reading your posts. Keep up the good work! You know, lots of people are searching around for this information, you can help them greatly.

  19. I need to to thank you for this very good read!!
    I absolutely enjoyed every little bit of it. I have got you book-marked to check out new
    stuff you post…

  20. What i don’t understood is actually how you’re not really much more well-liked than you might be right now. You are very intelligent. You realize therefore considerably relating to this subject, made me personally consider it from numerous varied angles. Its like women and men aren’t fascinated unless it is one thing to do with Lady gaga! Your own stuffs great. Always maintain it up!

  21. Thanks for a marvelous posting! I quite enjoyed reading it, you can be a great author.I will always bookmark your blog and definitely will come back someday. I want to encourage you to continue your great work, have a nice holiday weekend!

  22. Excellent article. Keep posting such kind of information on your page.
    Im really impressed by your blog.
    Hi there, You’ve done an excellent job. I’ll definitely digg it
    and in my opinion recommend to my friends.
    I am confident they’ll be benefited from this website.

  23. Cool blog! Is your theme custom made or did you download it from somewhere?
    A design like yours with a few simple adjustements would really make my blog jump
    out. Please let me know where you got your design. Thank
    you

  24. Hey there! I know this is kinda off topic but I was wondering if you knew where I could get a captcha plugin for my comment form? I’m using the same blog platform as yours and I’m having trouble finding one? Thanks a lot!

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

  26. Hmm it seems like your website ate my first comment (it was super long) so I guess I’ll just sum it up what I submitted and say, I’m thoroughly enjoying your blog.
    I as well am an aspiring blog blogger but I’m still new to everything.
    Do you have any points for inexperienced blog writers?
    I’d certainly appreciate it.

  27. Hmm it seems like your site ate my first
    comment (it was super long) so I guess I’ll just sum it up what I wrote and say, I’m
    thoroughly enjoying your blog. I too am an aspiring blog blogger but I’m still new
    to everything. Do you have any helpful hints for newbie blog writers?

    I’d genuinely appreciate it.

  28. Hello! I just wanted to ask if you ever have any trouble with hackers?My last blog (wordpress) was hacked and I endedup losing a few months of hard work due to no data backup.Do you have any methods to prevent hackers?

  29. Every weekend i used to pay a quick visit this website, for the
    reason that i want enjoyment, as this this web page conations in fact pleasant funny material too.

  30. After looking over a few of the articles on your website, I
    seriously like your way of writing a blog. I saved it to my bookmark
    webpage list and will be checking back soon. Take a
    look at my website too and let me know what
    you think.

  31. Hello Dear, are you actually visiting this website on a regular basis,
    if so then youu will definitely get pleasant knowledge.

  32. Howdy would you mind letting me know which hosting
    company you’re working with? I’ve loaded your blog in 3 completely different browsers and I must say this blog loads a lot quicker then most.
    Can you suggest a good internet hosting provider at a fair price?
    Kudos, I appreciate it!

  33. It’s remarkable to visit this website and reading the views of all mates on the topic of this post, while I am also keen of getting familiarity.

  34. Nice blog right here! Also your weeb sire quitee
    a bit up very fast! What web host are you the
    use of? Can I get your affiliate hyperlink to your host?
    I drsire myy web site loaded up as quickly as yours lol

  35. Good post. I learn something totally new and challenging on sites I stumbleupon every day.

    It’s always helpful to read content from other athors and practice a little
    something from their web sites.

  36. Wow that was unusual. I just rote an extremely long comment
    but after Iclicked submit my comment didn’t appear.

    Grrrr… well I’m not writing all that over again. Anyhow, juxt wanted to
    say excellent blog!

  37. Usually I don’t read post onn blogs, however I wish too say that this write-up vety pressured me too take
    a look at and do so! Your writing style has been surprised me.
    Thanks, very nice post.

  38. I think that is among the such a lot significant info for me.
    And i am satisfied studying your article. However wanna commentary on few common things, The web site style is great, the
    articles is truly nice : D. Good task, cheers

  39. Oh my goodness! Awesome articloe dude! Thank you so much, However I am having issues with your RSS.

    I don’t know the reason why I am unable to join it.
    Is there anybodcy else getting similar RSS problems?
    Anyone that knows tthe solution will you kindly respond?
    Thanx!!

  40. I got this website from my friend who told me
    on the topic of this site and now this time I am browsing this web site and
    reading very informative articles or reviews at
    this time.

  41. Hmm is anyone else encountering problems with the images on this blog loading?
    I’m trying to figure out if its a problem on my end or if it’s the blog.
    Any suggestions would be greatly appreciated.

  42. Hmm is anyone else having problems with the images on this blog loading?
    I’m trying to figure out if its a problem on my end
    or if it’s the blog. Any suggestions would be greatly appreciated.

  43. I’m not sure where you are getting your info,
    but great topic. I needs to spend some time learning much more or understanding more.
    Thanks for excellent information I was looking for this information for my mission.

  44. I think that everything wrote was very logical. However, what about this?
    what if you were to create a awesome headline? I mean, I don’t want to tell you
    how to run your website, but suppose you added a title that makes people want more?
    I mean Sign Up Page Design in HTML CSS with Source Code –
    HMA WebDesign is a little plain. You could glance at Yahoo’s
    front page and see how they create article headlines to get
    people to open the links. You might add a video or a related
    picture or two to grab people interested about what you’ve written. Just my opinion, it would bring
    your posts a little livelier.

Leave a Reply

Your email address will not be published.