Responsive Registration Form Using HTML5 CSS3 with Source Code

Responsive registration form using HTML5 and CSS3
Responsive registration form using HTML5 and CSS3
Hi, In this web development tutorial we are going to learn, How to Create responsive registration form using HTML5 and CSS3 programming with source code.
Spread the love, Share this Article!

Subscribe to Our YouTube Channel!

A responsive registration form is a necessary part of every 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 to create the responsive registration form using HTML5 CSS3 with Source Code and with CSS3’s latest features. This Sign Up Form with HTML5 CSS3 is also responsive to all media devices.

Follow these steps to create the Responsive user Sign Up form:

  1. Open code editor of your choice. In this toturial we are using Visual Studio Code.
  2. Create new file named signup.html in your code editor.
  3. Write HTML code to create the basic structure of registration form.
  4. After that, create style.css file and link CSS file with html page using HTML link tag.
  5. Write CSS code to decorate the responsive signup registration form.
  6. Add background body image in HTML CSS registration form.
  7. Add font awesome social icons in HTML signup form,
  8. Add CSS media curies to make the registration form mobile responsive

You can watch this video tutorial for a complete step-by-step guide to creating a responsive user registration.

Responsive Registration Form Using HTML5 CSS3 with Source Code

Or You can read the full detailed article to create a Responsive Registration Form Using HTML5 CSS3 with Source Code.


HTML Code – User Registration 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">
    <title>Sign Up Form</title>
    <!-- CSS file -->
    <link rel="stylesheet" href="formStyle.css">
    <!-- Font Awesome 5 CDN link to add social icons in html5 registration form -->
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
        integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

</head>

<body>
     
    <div class="container">
        <dive class="formWraper">

            <!-- Left section of responsive registration form -->

            <div class="formDiv">
                <h2>Create Account</h2>
                <p class="text"> Sign Up with Social Media</p>

             <!-- Font Awesome Icons -->
                <div class="socialBtn">
                    <div class="facebook icon"><i class="fab fa-facebook-f"></i></div>
                    <div class="twitter icon"><i class="fab fa-twitter"></i></div>
                    <div class="instagram icon"><i class="fab fa-instagram"></i></i></div>
                </div>
                
                <!--Horizontal Line-->
                <hr>
                <div class="orDiv">Or</div>

                <p class="text">Sign Up with Email Address</p>
                <div class="formGroup">
                    <i class="far fa-user"></i>
                    <input type="text" name="name" id="name" placeholder="Name">
                </div>
                <div class="formGroup">
                    <i class="far fa-envelope"></i>
                    <input type="email" name="email" id="email" placeholder="Email">
                </div>
                <div class="formGroup">
                    <i class="fas fa-lock"></i>
                    <input type="password" name="password" id="password" placeholder="Password">
                </div>
                <div class="checkBox">
                    <input type="checkbox" name="checkbox" id="checkbox">
                    <span class="text">I Agree with Term & Conditions.</span>
                </div>
                <button class="btn">SIGN UP</button>
            </div>

            <!-- Right section of responsive registration form -->
            <div class="welcomeDiv">
                <h2>Welcome Back!</h2>
                <p class="text">Get in touch with us for our news letter and more updates.</p>
                <button class="btn2">SIGN IN</button>
            </div>

        </dive>
    </div>

</body>

</html>

HTML Code Explaination:

In the above HTML code for the responsive user register form, I used an outer div with a container class. The form has two sections. The first section is the left section with the formDiv class and the right section contains the welcomeDiv class. The first section of the responsive registration user form contains the font awesome social icons and form data input. The right section of the form contains the welcome back text and sign-up button.


CSS Code – Responsive user Sign Up form

  1. Adding body backdround responsive image in user registraton HTML for
body{
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
    box-sizing: border-box;
    background-image: url(imageName.jpg);
    background-size: cover;
    background-attachment: fixed;
}

2. How to center content vertically and horizontally with CSS – Align a Div or Text center inside the container div.

.container{
    display: flex;
    align-content: center;
    justify-content: center;
}

3. CSS code for the left and right sections of the responsive user signup registration form.

.formWraper{
    display: flex;
    width: 55%;
    height: 500px;
    background-color: yellowgreen;
    margin-top: 80px;
    border-radius: 10px;
    box-shadow:0px 0px 20px black;
}

/* code for left sectin of form */
.formDiv{
    width: 50%;
    padding: 8%;
    background-color: lavender;
    text-align: center;
    border-radius: 10px 0px 0px 10px;
}
.formDiv h2 {
    color: green;
    margin-top: -5px;
}

/* code for right sectin of the registration form */
.welcomeDiv{
    width: 50%;
    padding: 10px;
    background-image: url(image1.jpg);
    background-size: cover;
    text-align: center;
    color: white;
}  
.welcomeDiv h2 {
    margin-top: 150px;
}


 /* ---- code for Font Awsome social icons */
.socialBtn{
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.icon{
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background-color:lavender;
    margin: 5px;
    line-height: 30px;
    box-shadow: 0px 0px 10px black;
    
}



.text{
    font-size: small;
}
.orDiv {
    width: 10%;
    margin: 0 auto;
    background-color: lavender;
    position: relative;
    top: -16px;
    justify-content: center;
}

/* code for form input fields */
.formGroup{
    width: 100%;
    position: relative;
}
.formGroup input {
    width: 90%;
    padding: 10px;
    margin-bottom: 10px;
    border-style: none;
    padding-left: 30px !important;
}


/* Code for Icones inside html form input */
.formGroup i {
    position: absolute;
    left: 0px;
    top: 0px;
    color: grey;
    font-size: smaller;
    margin: 10px !important;
}


input::placeholder {
    position: relative;
    left: 10px;
}
input:focus{
    border-color: red;
}
.checkBox{
    width: 100%;
    margin-top: 2px;
}

.btn{
    width: 70%;
    padding: 15px;
    background-color: green;
    margin-top: 15px;
    color: lavender;
    border-radius: 20px;
    border-style: none;
}
.btn2{
    width: 70%;
    padding: 15px;
    background-color:transparent;
    margin-top: 15px;
    color: lavender;
    border-radius: 20px;
    border-style: none;
    border: 2px solid rgb(247, 243, 243);
}

/* CSS mouse hover efects */
.btn:hover, .btn2:hover, .icon:hover{
    background-color: rgb(7, 80, 35);
    color: whitesmoke;
}

How to make User Regisraton Responsive?

responsive registration form
Responsive Registration Form Using HTML CSS

Now, it’s time to make our HTML CSS registration responsive to mobile devices. We will use the following CSS media queries to make the right section hidden on mobile devices.

/* making HTML registration form responsive to mobile devices */
@media screen and (max-width: 1000px){
    .formWraper{
        width: 70%;
    }
}
@media screen and (max-width: 670px){
    .formDiv{
        width: 90%;
        border-radius: 10px 10px 10px 10px;
    }
    .welcomeDiv{
        display: none;
    }
}

If you find this post helpful please didn’t forget to Subscribe to our YouTube Channel. Your small help in this regard enables us to bring such type of free resource content for you!!!

Hit The Subscribe Button to Get Daily New video!

Spread the love, Share this Article!

Important Tags:

31 Responses

  1. An impressive share, I simply given this onto a colleague who was doing a bit of analysis on this. And he actually bought me breakfast because I found it for him.. smile. So let me reword that: Thnx for the deal with! However yeah Thnkx for spending the time to debate this, I feel strongly about it and love studying extra on this topic. If potential, as you turn into expertise, would you thoughts updating your weblog with more details? It’s extremely useful for me. Massive thumb up for this blog post!

  2. Simply wish to say your article is as astonishing. The clearness in your post is simply excellent and that i could assume you’re an expert on this subject. Well along with your permission let me to clutch your feed to stay updated with imminent post. Thanks one million and please carry on the enjoyable work.

  3. I was recommended this web site by my cousin. I’m not sure whether this post is written by him as no one else know such detailed about my difficulty.
    You’re incredible! Thanks!

  4. I’ll right away snatch your rss as I can’t in finding your
    email subscription hyperlink or e-newsletter service.
    Do you’ve any? Kindly allow me understand so that I may just subscribe.
    Thanks.

  5. Nice post. I was checking continuously this blog and I am
    impressed! Very helpful information specifically the last part 🙂 I care
    for such info much. I was looking for this particular information for a very long time.

    Thank you and good luck.

  6. It’s actually a great and useful piece of information. I am satisfied that you simply shared this useful information with us.
    Please keep us up to date like this. Thank you for
    sharing.

  7. Magnificent beat ! I would like to apprentice while you amend your web site, how could i subscribe for a blog web site? The account helped me a acceptable deal. I had been a little bit acquainted of this your broadcast provided bright clear idea

  8. Very great post. I just stumbled upon your weblog and wanted to mention that I have truly loved browsing your blog posts.
    In any case I will be subscribing in your rss feed and I’m hoping you write again very
    soon!

  9. you’re actually a just right webmaster. The site loading speed is incredible. It seems that you are doing any distinctive trick. In addition, The contents are masterwork. you have done a magnificent job on this matter!

  10. Hi, Neat post. There’s a problem with your web site in internet explorer, would check this… IE still is the market leader and a huge portion of people will miss your magnificent writing because of this problem.

  11. Hiya very nice blog!! Guy .. Excellent .. Superb .. I will bookmark your web
    site and take the feeds additionally? I am happy to find a lot of helpful info right here in the publish, we’d like work out more strategies on this regard, thank you for
    sharing. . . . . .

  12. Greetings from California! I’m bored at work so I decided to browse your blog on my iphone during lunch break. I love the information you present here and can’t wait to take a look when I get home. I’m amazed at how fast your blog loaded on my cell phone .. I’m not even using WIFI, just 3G .. Anyways, great blog!

  13. Pretty component of content. I just stumbled upon your website and in accession capital
    to say that I get actually enjoyed account your weblog posts.
    Anyway I’ll be subscribing to your feeds and even I fulfillment you access constantly rapidly.

  14. Thanks for another informative site. Where else could I get that type of info written in such a perfect way? I have a project that I am just now working on, and I have been on the look out for such info.

  15. Hey tһere just ԝanted to give you a quick heads up and let you know a few of
    the pictures aren’t loading correctly. I’m not sure why but I think its
    a linking issuе. I’ve tried it in two different web browsers and both
    show tһe ѕame results.

Leave a Reply

Your email address will not be published.