How to Make a Responsive Registration Form in HTML and CSS

how to make a registration form in html and css,
how to make a registration form in html and css,
Spread the love, Share this Article!

Subscribe to Our YouTube Channel!

In this HTML CSS tutorial, you will learn how to make a responsive registration form in HTML and CSS. The project includes all the basic input fields for student or user registration such as email input, date of birth, phone number input with all country code lists, an ID card input field with a specific pattern, and a gender radio input.

This is a mobile responsive registration form designed for beginner-level developers. I have used the CSS flexbox method to create the registration form into two columns. When the user reduces the screen size the two columns convert into a single column on mobile devices.

How to create a simple registration form using HTML and CSS

Moreover, it’s a simple registration form created by using HTML and CSS only. I have also included the source codes of the registration form in this blog post. A simple front-end template design of registration form for beginner web developers. To create a responsive registration form you need to learn the basics of HTML and CSS languages.

How to Make a Responsive Registration Form in HTML and CSS

Now, I will show you the main steps to create a user registration HTML form. To make this form, I have used the following HTML5 input types in this simple HTML CSS project.

  • Input type text
  • Input type email
  • HTML5 input type radio
  • HTML5 input type phone
  • For file upload, HTML input type file

Also for your understanding, I have created a video tutorial on how to create a simple registration form using HTML and CSS. Watch the complete video tutorial with the source code below:

Video Tutorial

How to create a simple registration form using HTML and CSS

Now, you will get the source codes with explanations to create a simple registration form for your practice.’

Source Codes – Registration Form HTML CSS

In this section of the blog article, you will get the source codes of HTML and CSS with a brief explanation for beginners and code newbies.

HTML Source Code

In this HTML code, I have used the basic HTML input types to create a simple user registration form. Now, first of all, we will create an HTML div element with a container class and all the forms enclosed by the container class. The form has one row and two columns.

Half of the input fields are placed in the first column and the others are placed in the second column. The following HTML code will clear your concept accordingly.

<!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>Document</title>
    <link rel="stylesheet" href="form.css">
    <link rel="stylesheet" href="https://cdn.tutorialjinni.com/intl-tel-input/17.0.8/css/intlTelInput.css"/>
    <script src="https://cdn.tutorialjinni.com/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>

</head>
<body>
    <div class="container">
        <form id="contact" action="" method="post">
            <h1>Registration Form</h1>
            <h3>Fill the form below and press the submit button!</h3>
            <div class="row">
                <!-- first column -->
                <div class="column">                        
                    <fieldset>
                        <input type="text" placeholder="Full Name *" name="name" required autofocus>
                    </fieldset>
                    <fieldset>
                        <input type="text" placeholder="Father name *" name="fname" required autofocus>
                    </fieldset>
                    <fieldset>
                        <input type="email" placeholder="Your email *" name="email" required autofocus>
                    </fieldset>
                    <fieldset>
                        <input type="text" placeholder="Date of birth *" name="date" onfocus="(this.type = 'date')" required autofocus>
                    </fieldset>
                    <!-- adding all country code list -->
                    <fieldset>
                        <input type="text" placeholder="Phone number *" name="phone" id="phone" required autofocus>
                    </fieldset>
                </div>
                <!-- second column -->
                <div class="column">
                    <fieldset>
                        <p>What is your gender?</p>
                        <div class="radio">
                            <input type="radio" id="male" name="gender" required>
                            <label for="male">Male</label>
                        </div>
                        <div class="radio">
                            <input type="radio" id="female" name="gender" required>
                            <label for="female">Female</label>
                        </div>
                    </fieldset>
                    <fieldset>
                        <label for="idCard">Enter your ID Card in given formate.</label>
                        <div class="idCard">
                            <input type="text" name="idCard" pattern="[0-9]{5}" placeholder="#####" maxlength="5"> _
                            <input type="text" name="idCard" pattern="[0-9]{7}" placeholder="#######" maxlength="7"> _ 
                            <input type="text" name="idCard" pattern="[0-9]{1}" placeholder="#" maxlength="1">
                        </div>
                    </fieldset>
                    <fieldset>
                        <p>Upload File</p>
                        <input type="file" id="file" required>
                    </fieldset>
                </div>
            </div>
            <!-- submit button -->
            <fieldset>
                <button type="submit" id="button">Submit Now</button>
            </fieldset>
        </form>
    </div>


    <!-- Javascript to initialize the code list -->
    <script>
    var input = document.querySelector("#phone");
    window.intlTelInput(input, {
     separateDialCode: true
     });
  </script>
</body>
</html>

How to create a dropdown country phone code list in HTML

Now, Let’s learn about how to create a dropdown country phone code list and HTML registration form. The list contains the phone code list of all the countries around the world. User can easily select their country phone code by using a drop-down list as shown in the image below:

The easiest way to create the dropdown country phone code list in HTML, paste the following CDN code links inside the <head> section of the HTML code.

    <link rel="stylesheet" href="https://cdn.tutorialjinni.com/intl-tel-input/17.0.8/css/intlTelInput.css"/>
    <script src="https://cdn.tutorialjinni.com/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>

After that, add the following HTML input filed with input type text and id = phone inside the body tag of HTML.

<input type="text" placeholder="Phone number *" name="phone" id="phone" required autofocus>

And at the end, add this chunk of JavaScript code at the bottom of the HTML body section. This code will initialize the phone code list on every reload.

<!-- Javascript to initialize the code list -->
    <script>
    var input = document.querySelector("#phone");
    window.intlTelInput(input, {
     separateDialCode: true
     });
  </script>

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

CSS Source Code:

Now, You will get the CSS source code of this simple registration form template design. CSS is a very important web language to style web pages and HTML forms. In this project, I used the CSS flexbox model and CSS media queries to make the form mobile responsive. Below is the source code for your understanding:

/* import google font family */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,[email protected],600;1,600&display=swap');
/* selecting everything */
* {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
}
body {
 font-family: 'Open Sans', sans-serif, helvetica, Arial;
 font-weight: 400;
 font-size: 14px;
 color: black;
 /* body background image */
 background-image: linear-gradient(to bottom, rgba(128, 128, 128, 0.541), rgba(204, 0, 255, 0.637)), url(image.jpg);
 background-attachment: fixed;
 background-size: cover;
 
}
.container {
 max-width: 800px;
 width: 100%;
 margin: 0 auto;
}
#contact {
 background-color: rgba(220, 255, 66, 0.7);
 padding: 20px;
 margin: 50px 0;
}
#contact input, button {
 font: 400 15px 'Open Sans', sans-serif, helvetica, Arial;
}
#contact h1 {
 font-size: 35px;
 font-weight: bold;
 text-align: center;
 color: blue;
}
#contact h3 {
 margin: 5px 0px 15px;
 text-align: center;
}
.row {
 display: flex;
 width: 100% !important;
 padding: 20px 0px;
}
.row .column {
 margin: 0px 20px;
 width: 50%;
}
fieldset {
 border: medium none !important;
 margin:  0 0 10px;
 min-width: 100%;
 width: 100%;
}
#contact input {
 width: 100%;
 border: 1px solid rgb(150, 150, 150);
 background-color: white;
 padding: 10px;
 margin: 5px 0;
}
input[type = "radio"] {
 width: 10% !important;
}
#contact .row .radio {
 border: 1px solid rgb(150, 150, 150);
 background-color: white;
 margin: 7px 0 10px;
 padding: 5px;
}
#contact .row .idCard{
 display: flex;
 height: 45px !important;
 margin: 5px 0;
}
#contact .row .idCard :first-child {
 width: 80px;
}
#contact .row .idCard :last-child {
 width: 40px;
}
#contact .row #phone {
 max-width: 100% !important;
 padding-right: 80px;
}
#contact input:hover {
 transition: border-color 0.3s ease-in-out;
 border: 1px solid rgb(68, 68, 68);
}
#contact button {
 outline: none;
 border: none;
 background-color: blue;
 color: white;
 margin: 0 0 5px 40%;
 padding: 10px;
 font-size: 17px;
 width: 150px;
}

#contact button:hover {
 background-color: rgba(0, 0, 255, 0.8);
}

#contact input:focus {
 outline: 0;
 border: 1px solid red;
}

/* mobile responsive mode */
@media screen and (max-width: 580px)  {
 .row {
  flex-direction: column;
 }
 .row .column {
  width: 90% !important;
 }
 #contact .row #phone {
 padding-right: 180px;
}
}

Finally, below is the mobile responsive view of the registration form.

Responsive registration form using HTML and CSS
Responsive registration form using HTML and CSS

I hope you understand the above HTML CSS registration form. If you still need any help related to this tutorial, you can contact me. Happy coding!!!

Hit The Subscribe Button to Get Daily New video!

Spread the love, Share this Article!

Important Tags:

11 Responses

  1. I know this if off topic but I’m looking into starting my own blog and was curious what all is needed to get set up? I’m assuming having a blog like yours would cost a pretty penny? I’m not very internet savvy so I’m not 100 certain. Any suggestions or advice would be greatly appreciated. Cheers

  2. I must thank you for the efforts youve put in penning this site. I am hoping to check out the same high-grade blog posts by you in the future as well. In fact, your creative writing abilities has motivated me to get my very own blog now 😉

  3. Fantastic goods from you, man. I have keep in mind your stuff prior to and you are simply too fantastic. I actually like what you have acquired right here, certainly like what you are stating and the way in which by which you say it. You are making it enjoyable and you still care for to stay it smart. I cant wait to read much more from you. That is really a terrific web site.

  4. Just to let you know, this page appears a little bit funny from my smart phone.
    Who knows perhaps it really is just my phone. Great article by the way.

  5. Ӏ am really loving the theme/design օf youг site. Do yoou ever run into any web browser compatibility issues?
    Α couple of my blkg visitors have complained aƅout my webste not workіng correctly in Explorer Ƅut ⅼooks ցreat in Safari.
    Do yߋu hɑve any advice to help ffix this рroblem?

  6. Write more, thats all I have to say. Literally, it seems
    as though you relied on the video to make your point.

    You definitely know what youre talking about,
    why waste your intelligence on just posting videos to your blog when you could be giving us something enlightening to read?

  7. This design is wicked! You obviously know how to keep a reader entertained. Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Fantastic job. I really enjoyed what you had to say, and more than that, how you presented it. Too cool!

Leave a Reply

Your email address will not be published.