Responsive Registration Form in HTML and CSS
Are you interested in designing a beautiful and effective registration form for your website? We’ll show you how! Creating a Responsive Registration Form in HTML and CSS is useful for websites that require users to sign up, it will available through any device.
Well in this article, I will show you how to create this form from scratch, as well as provide you with the source code that you can use to customize it further.
GitHub Source: Responsive Registration Form
Features
Here are a few highlights of what makes this responsive form design special:
- Customization – You can easily change the look and the layout to fit the specific website.
- Compatibility – The form integrates seamlessly with most current CMSs; thus, it is efficient.
- Clean Code – This is source code is not only clean but also very well documented for purposes of editing.
Technologies Used
- HTML (Hypertext Markup Language)
- CSS (Cascading Style Sheets)
Video Tutorial
Steps to Build Form
- Make Project Folder – The first thing to do is to form a new folder for this project so that files can be well arranged.
- Design an HTML form – Now you should create HTML file with title index.html.
- Create style.css – This is a CSS file that will contain the styling properties that should be used to style the form and ensure that is is responsive.
- Copy & Paste – Paste the following HTML and CSS into your files to finalised the form.
HTML
Here is the HTML code for your index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Registration Form | JV Source Codes</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<!-- Title Section -->
<div class="title">Registration</div>
<div class="content">
<!-- Registration Form -->
<form action="#">
<div class="user-details">
<!-- Full Name Input -->
<div class="input-box">
<span class="details">Full Name</span>
<input type="text" placeholder="Enter your name" required>
</div>
<!-- Username Input -->
<div class="input-box">
<span class="details">Username</span>
<input type="text" placeholder="Enter your username" required>
</div>
<!-- Email Input -->
<div class="input-box">
<span class="details">Email</span>
<input type="text" placeholder="Enter your email" required>
</div>
<!-- Phone Number Input -->
<div class="input-box">
<span class="details">Phone Number</span>
<input type="text" placeholder="Enter your number" required>
</div>
<!-- Password Input -->
<div class="input-box">
<span class="details">Password</span>
<input type="password" placeholder="Enter your password" required>
</div>
<!-- Confirm Password Input -->
<div class="input-box">
<span class="details">Confirm Password</span>
<input type="password" placeholder="Confirm your password" required>
</div>
</div>
<!-- Gender Selection -->
<div class="gender-details">
<span class="gender-title">Gender</span>
<!-- Radio Inputs for Gender -->
<input type="radio" name="gender" id="dot-1">
<input type="radio" name="gender" id="dot-2">
<input type="radio" name="gender" id="dot-3">
<div class="category">
<!-- Male Option -->
<label for="dot-1">
<span class="dot one"></span>
<span class="gender">Male</span>
</label>
<!-- Female Option -->
<label for="dot-2">
<span class="dot two"></span>
<span class="gender">Female</span>
</label>
<!-- Prefer Not to Say Option -->
<label for="dot-3">
<span class="dot three"></span>
<span class="gender">Prefer not to say</span>
</label>
</div>
</div>
<!-- Submit Button -->
<div class="button">
<input type="submit" value="Register">
</div>
</form>
</div>
</div>
</body>
</html>
CSS
Here is the complete code for style.css file to style the form:
/* Importing Google Fonts - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
background: linear-gradient(135deg, #fa7777, #f7cd73);
}
.container {
max-width: 700px;
width: 100%;
background-color: #fff;
padding: 25px 30px;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
.container .title {
font-size: 25px;
font-weight: 500;
position: relative;
}
.container .title::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 30px;
border-radius: 5px;
background: linear-gradient(135deg, #d40101, #b44301);
}
.content form .user-details {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px 0 12px 0;
}
form .user-details .input-box {
margin-bottom: 15px;
width: calc(100% / 2 - 20px);
}
form .input-box span.details {
display: block;
font-weight: 500;
margin-bottom: 5px;
}
.user-details .input-box input {
height: 45px;
width: 100%;
outline: none;
font-size: 16px;
border-radius: 5px;
padding-left: 15px;
border: 1px solid #ccc;
border-bottom-width: 2px;
transition: all 0.3s ease;
}
.user-details .input-box input:focus,
.user-details .input-box input:valid {
border-color: #f83918;
}
form .gender-details .gender-title {
font-size: 20px;
font-weight: 500;
}
form .category {
display: flex;
width: 80%;
margin: 14px 0;
justify-content: space-between;
}
form .category label {
display: flex;
align-items: center;
cursor: pointer;
}
form .category label .dot {
height: 18px;
width: 18px;
border-radius: 50%;
margin-right: 10px;
background: #d9d9d9;
border: 5px solid transparent;
transition: all 0.3s ease;
}
#dot-1:checked~.category label .one,
#dot-2:checked~.category label .two,
#dot-3:checked~.category label .three {
background: #fc3b19;
border-color: #bbffbe;
}
form input[type="radio"] {
display: none;
}
form .button {
height: 45px;
margin: 35px 0
}
form .button input {
height: 100%;
width: 100%;
border-radius: 5px;
border: none;
color: #fff;
font-size: 18px;
font-weight: 500;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
background: linear-gradient(135deg, #d40101, #b44301);
}
form .button input:hover {
background: linear-gradient(-135deg, #d40101, #b44301);
}
/* Responsive media query code for mobile devices */
@media(max-width: 584px) {
.container {
max-width: 100%;
}
form .user-details .input-box {
margin-bottom: 15px;
width: 100%;
}
form .category {
width: 100%;
}
.content form .user-details {
max-height: 300px;
overflow-y: scroll;
}
.user-details::-webkit-scrollbar {
width: 5px;
}
}
/* Responsive media query code for mobile devices */
@media(max-width: 459px) {
.container .content .category {
flex-direction: column;
}
}
Download Source Code
You can download the complete source code of this Responsive Registration Form in HTML and Pure CSS without any copyrights issues from the button below. You are welcome to change and use on your site.
Conclusion
This form is perfect for consistent and easy usability across devices, and can be easily made to fit any website design or template. This can be useful for designing your website as it is a Responsive Registration Form in HTML and CSS to improve the user experience.
If you liked this, consider joining JV Source Codes, and if you have any questions, don’t hesitate to comment – I’ll update you if you need help!
