Create a Pure CSS Sign Up Form / Registration Form in HTML

By Faraz - July 16, 2022

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.

Join us on Telegram

Read Also creating a unique neubrutalism portfolio page with html, css, and javascript.jpg

Creating a Unique Neobrutalism Portfolio Page with HTML, CSS, and JavaScript

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.

This is the basic structure of our sign-up form using HTML, and now we can move on to styling it using CSS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <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="loginForm.php">Login Here</a>
              </div>
          </form>
      </div>
  </div>
  </body>
</html>

Read Also

Pure CSS Social Media Icons With Tooltip Hover Effect

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.

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:

Read Also Create a Responsive Bootstrap 5 Navbar with Topbar.jpg

Create a Responsive Bootstrap 5 Navbar with Topbar

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 😊