How To Make Beautiful Facebook Sign Up Form

Introduction

Here we are for another great tutorial for which maximum of you discover it tough at the same time as looking to do it. You are very fortunate as you notice this tutorial online, and i wish every person is aware of what a facebook sign up form is. Facebook sign up form is the form displayed or pop-up when you click on the Create Account link or button. Below are the few steps concerned in developing facebook sign up form.

Preview

Demo & Download

Add HTML

Open your favourites Text Editor
Create the HTML document by way of naming it Index.html or you can choose your preferred name.
Double click to copy the code below and paste it inside the created document
Replace the # with the url you would like to submit the form to.

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <meta content='width=device-width, initial-scale=1' name='viewport'/>
      <title>Sign Up - Gutlibe</title>
   </head>
   <body>
         <div class="wrapper">
            <div class="title">
               Create an account
               <p>Please provide your real information</p>
            </div>
            <form action="#">
               <div class="field">
                  <input type="text" required>
                  <label for="">First Name</label>
               </div>
               <div class="field">
                  <input type="text" required>
                  <label for="">Last Name</label>
               </div>
               <div class="field">
                  <input type="email" required>
                  <label for="">Email Address</label>
               </div>
               <div class="field">
                  <input type="password" required>
                  <label for="">Password</label>
               </div>
               <div class="field">
                  <input type="password" required>
                  <label for="">Confirm Password</label>
               </div>
               <div class="content">
                  <div class="checkbox">
                     <input type="checkbox" id="remember-me">
                     <label for="remember-me">Remember Me</label>
                  </div>
                  <div class="pass-link">
                     <a href="#">Forgot password?</a>
                  </div>
               </div>
               <div class="field">
                  <input type="submit" value="Sign Up">
               </div>
               <div class="signup-link">
                  Already have a account?<a href="#"> Login Now</a>
               </div>
            </form>
         </div>
  </body>
</html>

Add CSS

Now you are certified for the subsequent step. Before the form can resemble facebook Signup, we need to feature CSS which will give the coloration, position, length and plenty of more to the form.
You can add the CSS code the html by introducing it between <style> and </style> tag.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{  margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
html, body{
    display: grid;
    height: 100%;
    width: 100%;
    place-items:center;
    background: #f2f2f2;
}
::selection{
    background: #4158d0;
    color:#fff;
}
.wrapper{
    width: 500px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0px 15px 20px rgba(0,0,0,0.1);
}
.wrapper .title{
    font-size: 35px;
    font-weight: 600;
    text-align: left;
    color: #fff;
    user-select: none;
    border-radius: 15px 15px 0 0;
    background: #2b519a;
    padding: 32px;
}
.title p{
    font-size: 18px;
}
.wrapper form{
    padding: 10px 30px 50px 30px;
}
.wrapper form .field{
    height: 50px;
    width: 100%;
    margin-top: 20px;
    position: relative;
}
.wrapper form .field input{
    height: 100%;
    width: 100%;
    outline: none;
    font-size: 17px;
    padding-left: 20px;
    border: 1px solid lightgray;
    transition: all 0.3s ease;
}
.wrapper form .field input:focus,
form .field input:valid{
    border-color: #4158d0;
}
.wrapper form .field label{
    position: absolute;
    top: 50%;
    left: 20px;
    color: #999999;
    font-weight: 400;
    font-size: 17px;
    pointer-events: none;
    transform: translateY(-50%);
    transition: all 0.3s ease;
}
form .field input:focus ~ label,
form .field input:valid ~ label{
    top: 0%;
    font-size: 16px;
    color: #4158d0;
    background: #fff;
    transform: translateY(-50%);
}
form .content{
    display: flex;
    width: 100%;
    height: 50px;
    font-size: 16px;
    align-items: center;
    justify-content: space-around;
}
form .content .checkbox{
    display: flex;
    align-items: center;
    justify-content: center;
}
form .content input{
    width: 15px;
    height: 15px;
}
form .content label{
    color: #262626;
    user-select: none;
    padding-left: 5px;
}
form .content .pass-link{
    color: "";
}
form .field input[type="submit"]{
    color: #fff;
    border: none;
    padding-left: 0;
    margin-top: -10px;
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
    background: #2b519a;
    transition: all 0.3s ease;
}
form .field input[type="submit"]:active{
    transform: scale(0.95);
}
form .signup-link{
    color: #262626;
    margin-top: 20px;
    text-align: center;
}

Conclusion

Please this is for instructional motive handiest, we aren't responsible for any illegal use of this lesson eg. Cyber Crime and others. comment if you have any questions or the way you sense about the academic. Thanks for reading