Learn how to create a pure CSS sign up form or registration form in HTML with our step-by-step guide. Improve your web development skills with our CSS form design tips and create a responsive registration form with ease.
Table of Contents
User login and registration systems are super helpful when we want to store information about the users of our website. This applies to everything from educational websites, which might store course progress and marks, to e-commerce websites, which will store information about customers' past purchases.
Registration forms have different types and are used intensively on the registration page of the website to allow user or visitor to create their profile on your website to get more benefits on the website such as post articles, downloading files, and more, it depends on website purpose.
Let's start making these amazing sign-up / registration form Using HTML and CSS step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our sign-up form.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Here’s a breakdown of its structure and elements:
Document Type Declaration and HTML Tag:
<!DOCTYPE html> <html lang="en">
<!DOCTYPE html>: Declares the document type and version of HTML (HTML5 in this case).<html lang="en">: The root element of the HTML document, with lang="en" indicating the language of the document is English.
Head Section:
<head> <title>Sign Up / Registration Form </title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width" /> <link rel="stylesheet" href="styles.css" /> </head>
<title>: Sets the title of the webpage, which appears in the browser tab.<meta charset="UTF-8" />: Specifies the character encoding for the document, ensuring proper display of text.<meta name="viewport" content="width=device-width" />: Makes the webpage responsive by setting the viewport width to the device width.<link rel="stylesheet" href="styles.css" />: Links an external CSS stylesheet (styles.css) for styling the HTML content.
Body Section:
<body>
<div class="container">
<div class="center">
<h1>Register</h1>
<form method="POST" action="">
<div class="txt_field">
<input type="text" name="name" required>
<span></span>
<label>Name</label>
</div>
<div class="txt_field">
<input type="email" name="email" required>
<span></span>
<label>Email</label>
</div>
<div class="txt_field">
<input type="password" name="password" required>
<span></span>
<label>Password</label>
</div>
<div class="txt_field">
<input type="password" name="cpassword" required>
<span></span>
<label>Confirm Password</label>
</div>
<input name="submit" type="Submit" value="Sign Up">
<div class="signup_link">
Have an Account ? <a href="#">Login Here</a>
</div>
</form>
</div>
</div>
</body>
<body>: Contains the content of the webpage.<div class="container">: A container div, likely used for centering and spacing purposes.<div class="center">: A div that centers the registration form on the page.<h1>Register</h1>: A heading for the registration form.<form method="POST" action="">: The form element with method POST, indicates that form data will be sent to the server. The action attribute is empty, meaning the form will be submitted to the same page.- Text Field Divs:
<div class="txt_field">: Wrapper for each input field, likely styled with CSS.<input type="text" name="name" required>: Text input for the user's name. required ensures the field cannot be left empty.<input type="email" name="email" required>: Email input for the user's email address.<input type="password" name="password" required>: Password input for the user’s password.<input type="password" name="cpassword" required>: Password input for confirming the user’s password.
<input name="submit" type="Submit" value="Sign Up">: Submit button for the form, labeled "Sign Up".<div class="signup_link">: A div containing a link for users who already have an account to log in.
This is the basic structure of our sign-up form using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the signup form is in place, the next step is to add styling to the signup form using CSS. CSS allows us to control the visual appearance of the signup form, including things like layout, color, and typography.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our registration form. We will also add some padding and margin properties to ensure that everything looks correct.
Here’s a detailed explanation of each part:
General Styles
body{
margin: 0;
padding: 0;
font-family: Roboto;
background-repeat: no-repeat;
background-size: cover;
background: linear-gradient(120deg, #007bff, #d0314c);
height: 100vh;
overflow: hidden;
}
- margin: 0; padding: 0;: Removes default margins and padding around the body.
- font-family: Roboto;: Sets the font to Roboto.
- background-repeat: no-repeat;: Prevents the background image from repeating.
- background-size: cover;: Ensures the background image covers the entire viewport.
- background: linear-gradient(120deg, #007bff, #d0314c);: Applies a linear gradient background from blue (#007bff) to red (#d0314c).
- height: 100vh;: Sets the body height to the viewport height.
- overflow: hidden;: Prevents scrolling by hiding any overflow content.
Centering and Styling the Form Container
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 29vw;
background: white;
border-radius: 10px;
}
- position: absolute;: Positions the .center element absolutely within its containing block.
- top: 50%; left: 50%; transform: translate(-50%, -50%);: Centers the element both horizontally and vertically.
- width: 29vw;: Sets the width to 29% of the viewport width.
- background: white;: Sets the background color to white.
- border-radius: 10px;: Rounds the corners with a 10px radius.
Form Heading
.center h1{
text-align: center;
padding: 0 0 20px 0;
border-bottom: 1px solid silver;
}
- text-align: center;: Centers the text inside the heading.
- padding: 0 0 20px 0;: Adds 20px padding at the bottom.
- border-bottom: 1px solid silver;: Adds a 1px solid silver border at the bottom.
Form and Input Fields
.center form{
padding: 0 40px;
box-sizing: border-box;
}
- padding: 0 40px;: Adds 40px padding on the left and right sides of the form.
- box-sizing: border-box;: Includes padding and border in the element’s total width and height.
form .txt_field{
position: relative;
border-bottom: 2px solid #adadad;
margin: 30px 0;
}
- position: relative;: Positions the .txt_field element relative to its normal position.
- border-bottom: 2px solid #adadad;: Adds a 2px solid border at the bottom of the field.
- margin: 30px 0;: Adds 30px margin above and below the field.
.txt_field input{
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16px;
border: none;
background: none;
outline: none;
}
- width: 100%;: Makes the input field take the full width of its parent.
- padding: 0 5px;: Adds 5px padding on the left and right sides.
- height: 40px;: Sets the height of the input field.
- font-size: 16px;: Sets the font size inside the input field.
- border: none; background: none; outline: none;: Removes border, background, and outline.
.txt_field label{
position: absolute;
top: 50%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
}
- position: absolute;: Positions the label absolutely within its parent .txt_field.
- top: 50%; left: 5px;: Positions the label vertically centered and 5px from the left.
- color: #adadad;: Sets the text color to a light gray.
- transform: translateY(-50%);: Vertically centers the label.
- font-size: 16px;: Sets the font size.
- pointer-events: none;: Prevents the label from capturing mouse events.
Label and Span Transitions
.txt_field span::before{
content: '';
position: absolute;
top: 40px;
left: 0;
width: 0px;
height: 2px;
background: #2691d9;
transition: .5s;
}
- content: '';: Inserts an empty content before the span.
- position: absolute; top: 40px; left: 0;: Positions the pseudo-element 40px from the top of the .txt_field.
- width: 0px; height: 2px;: Initially sets the width to 0px and height to 2px.
- background: #2691d9;: Sets the background color.
- transition: .5s;: Adds a transition effect for width changes.
.txt_field input:focus ~ label,
.txt_field input:valid ~ label{
top: -5px;
color: #2691d9;
}
- input:focus ~ label, input:valid ~ label: Moves the label up and changes its color when the input field is focused or has valid input.
.txt_field input:focus ~ span::before,
.txt_field input:valid ~ span::before{
width: 100%;
}
- input:focus ~ span::before, input:valid ~ span::before: Expands the span’s width to 100% when the input field is focused or valid.
Password Visibility Toggle and Submit Button
.pass{
margin: -5px 0 20px 5px;
color: #a6a6a6;
cursor: pointer;
}
- margin: -5px 0 20px 5px;: Adds margin around the password visibility toggle.
- color: #a6a6a6;: Sets text color.
- cursor: pointer;: Changes the cursor to a pointer when hovering.
.pass:hover{
text-decoration: underline;
}
- text-decoration: underline;: Underlines the text on hover.
input[type="Submit"]{
width: 100%;
height: 50px;
border: 1px solid;
border-radius: 25px;
font-size: 18px;
font-weight: 700;
cursor: pointer;
}
- width: 100%; height: 50px;: Makes the submit button full width and sets its height.
- border: 1px solid; border-radius: 25px;: Adds a solid border and rounds the corners.
- font-size: 18px; font-weight: 700;: Sets the font size and weight.
- cursor: pointer;: Changes the cursor to a pointer on hover.
input[type="Submit"]:hover{
background: #2691d9;
color: #e9f4fb;
transition: .5s;
}
- background: #2691d9; color: #e9f4fb;: Changes the background and text color on hover.
- transition: .5s;: Adds a transition effect.
Sign-Up Link
.signup_link{
margin: 30px 0;
text-align: center;
font-size: 16px;
color: #666666;
}
- margin: 30px 0;: Adds vertical margin.
- text-align: center;: Centers the text.
- font-size: 16px; color: #666666;: Sets the font size and color.
.signup_link a{
color: #2691d9;
text-decoration: none;
}
- color: #2691d9; text-decoration: none;: Styles the link with a blue color and no underline.
.signup_link a:hover{
text-decoration: underline;
}
- text-decoration: underline;: Underlines the link on hover.
HomeAbout Class
.HomeAbout{
width: 100vw;
height: 25vh;
}
- width: 100vw; height: 25vh;: Sets the width to 100% of the viewport width and height to 25% of the viewport height.
This will give our registration form an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
body{
margin: 0;
padding: 0;
font-family: Roboto;
background-repeat: no-repeat;
background-size: cover;
background: linear-gradient(120deg, #007bff, #d0314c);
height: 100vh;
overflow: hidden;
}
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 29vw;
background: white;
border-radius: 10px;
}
.center h1{
text-align: center;
padding: 0 0 20px 0;
border-bottom: 1px solid silver;
}
.center form{
padding: 0 40px;
box-sizing: border-box;
}
form .txt_field{
position: relative;
border-bottom: 2px solid #adadad;
margin: 30px 0;
}
.txt_field input{
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16px;
border: none;
background: none;
outline: none;
}
.txt_field label{
position: absolute;
top: 50%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
}
.txt_field span::before{
content: '';
position: absolute;
top: 40px;
left: 0;
width: 0px;
height: 2px;
background: #2691d9;
transition: .5s;
}
.txt_field input:focus ~ label,
.txt_field input:valid ~ label{
top: -5px;
color: #2691d9;
}
.txt_field input:focus ~ span::before,
.txt_field input:Valid ~ span::before{
width: 100%;
}
.pass{
margin: -5px 0 20px 5px;
color: #a6a6a6;
cursor: pointer;
}
.pass:hover{
text-decoration: underline;
}
input[type="Submit"]{
width: 100%;
height: 50px;
border: 1px solid;
border-radius: 25px;
font-size: 18px;
font-weight: 700;
cursor: pointer;
}
input[type="Submit"]:hover{
background: #2691d9;
color: #e9f4fb;
transition: .5s;
}
.signup_link{
margin: 30px 0;
text-align: center;
font-size: 16px;
color: #666666;
}
.signup_link a{
color: #2691d9;
text-decoration: none;
}
.signup_link a:hover{
text-decoration: underline;
}
.HomeAbout{
width: 100vw;
height: 25vh;
} Final Output:
Conclusion:
In conclusion, creating a pure CSS sign up form or registration form using HTML is an essential skill for web developers who want to enhance the user experience and improve the overall design of a website. By following the step-by-step guide provided in this blog post, developers can create a professional-looking form that is both aesthetically pleasing and easy to use. From the HTML structure of the form to advanced CSS styling and responsive design, developers can use their new skills to create forms that are optimized for all devices and ensure that users have a positive experience when signing up for a service or product. By paying attention to the details and using best practices for form validation and submission, developers can help ensure that users have a seamless experience and reduce the likelihood of frustration or abandonment. So why wait? Start using your new CSS and HTML skills to create engaging and effective sign up or registration forms today!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
