Hello Friend, how are you ? Hope everyone is good. In this blog we will discuss that how to we create an Attractive and Responsive Registration form with the help of html and css with easy code. Earlier I have shared one article on the Responsive contact us page using html and css and Now we create a responsive registration or sign up page. In my website you find all web pages with free source code and these web pages are fully responsive.

What is Registration page ? Why it is important ?

You know that Registration form is a most important page in the any webpage , Organizationme or any website because with the help of registration page user can register yourself on this. Registration form contains many fields like user name, user email, user contact, address of user and many more fields who contains user information.

In this registration page we use a six input fields where user need to fill name, email, contact and create password.

First Name (For User)
Last Name( For User)
Email Address (For User)
Contact Number ( For User)
Password (For User)
Confirm Password (For User)
Register Button (For User)

The source code of this responsive registration form is given below, if you want to source code of registration page just copy it and use it.

You know that we provide a very simple and easy to understand code so this code is also very easy. If you are beginner on this field and you know basic about HTML and CSS then you easily understand this code. You also understand that what is basic structure of html in my blog here you find this blog easily.

Many templates available in browser but most of them make with the help of bootstrap and paid but In this page you find a many web pages like navigation bar, about us page and contact us page with free source code and without using bootstrap. Just scroll out and copy code and use it now.

Also learn -

Responsive Registration Form Using Html and Css

You can see below I have provide a preview image of responsive registration page who made with the help of Html and Css and here we use a transparent color for ragistrtiom page.

Now we design a responsive registration form.

To create a responsive registration form, you need to create two files one is html file for designing a structure of registration page and another is css file for designing and styling a structure of a registration page. Both Html and Css code is easy to understand.

After creating these two files, copy this html code given below and paste in html file and also copy this css code given below and paste this code in css file and for image you visit pixabay website and download this type of image free.

index.html

First of all you create an html file for creating a structure of registration page with the name index.html and remember the extension of this html file must be .html and copy this given code and paste this html code on this file 👇👇👇

<html>
<head>
<title> Registration Page Using Html and Css  </title>
<link rel="stylesheet" type="text/css" href="style4.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="main">
   <form method="POST" action="#">
   <h1>Student Registration </h1>
   <p>First Name</p>
   <input type="text" placeholder="Enter Fisrt Name">
   <p>Last Name</p>
   <input type="text" placeholder="Last Name ">
   <p>Email Address </p>
   <input type="email" placeholder="Enter Email Address ">
   <p>Contact Number</p>
   <input type="number" name="contact" placeholder="Enter Contact Number">
   <p>Password</p>
   <input type="password" name="password" placeholder="Password ">
   <p>Confirm Password</p>
   <input type="password" name="cpassword" placeholder="Confirm Password"><br>
   <button type="submit" >Register</button>
   </form>
</div>
</body>
</html>

style.css

Create a css file fpr styling a structure of registration page with the name of style.css and remember the extension of this css file must be .css and copy this given code and paste this code in this css file 👇👇👇


body{
background :url(image4.jpg);
background-size:cover;
background-repeat:no-repeat; 
}
.main
{
width:500px;
text-align :center; 
background :rgba(0,0,0,0.5);
margin:100px auto;
color:white;
border-radius :10px;
padding :10px;  
}
p
{
text-align :left; 
margin:15px 0 5px 75px; 
font-size :20px;  
}
input 
{
width:70%;
height:35px; 
font-size :15px; 
border:none;
outline:none;
padding:7px;
border-radius :5px; 
} 
button
{
width:20%;
height :32px; 
background :white; 
border:none;
outline:none;
font-size :20px;
margin:10px auto auto auto; 
}  
button:hover
{
color:green;
}       
@media (max-width:947px)
{
    .main
    {
     width:300px;
     margin:auto;
     }
    p
    {
     font-size :15px; 
     margin:12px 0 5px 20px; 
    }
   input 
    {
    width:90%;
    height:30px; 
    font-size :15px; 
    }
    button
    {
    width:30%;
    }
}

Note - html file, css file and image must be same folder if you change the path of any file you must also change the path in source code otherwise you face some issues related to styling a structure of registration page. If you want to write this code in same file so you do but for styling a structure you need to write css code inside a style tag and this style tag written under head tag.

Thank you for visiting my website and reading our blog. If you face any problem during creating this responsive registration form using html and css, then you contact us or

comment. We will try to provide a solution of your problem as soon as possible. If you want to any college project, website, portfolio website and any web page you contact us with the help of social media platform like instagram, facebook or comment on any post we provides a all this. Also give your suggestion for make a better web pages.

Thank you

Keep loving and supporting us.

Connect with us through the Instgram, facebook and youtube.

Share this post with your friends

Also learn -

👉 Responsive about us page using html

👉 Responsive contact us page using html and css

👉Responsive navigation bar with the help of HTML and CSS

👉 Keyboard key design using html and css

👉 Responsive contact us page using html and css