MultiWEBPress
Wordpress & Shopify Experts

MultiWEBPress
Wordpress & Shopify Experts

How to create Facebook signup & Login form?

Hey there, today in this blog you’ll learn how to create a Login form & Signup form using pure HTML & CSS. This is for beginners who want to learn new stuff using HTML & CSS. Recently, I have shared a 3D Flip Button using HTML & CSS. Now it’s time to create an Animated Login form similar to a facebook signup form using Pure HTML & CSS.

A login form is used to access a restricted page by using authentication credentials which were created before login into any form. A login form contains fields such as username, email address and password. When the login form is submitted, its underlying cross verify to check whether it is authenticated or not. If your login id matches with the id you created before then it will be redirected to access the restricted page

On the preview images you can see on the right hand side a login form which contains a field. You can see the fields FIRST NAME, LAST NAME, EMAIL ADDRESS, PASSWORD & CONFIRM PASSWORD. There is also a checkbox which says Remember me. If you tick the checkbox this will save your details and for next time when you visit the site this will automatically fill up your details. Also a forgot password link text is there, this will be used when you forget your password. It allows you to generate new passwords to recover your account which you have created.

If you’re finding difficulty understanding what is written in this blog you can also watch video of this on my video channel. Just scroll down to check video tutorial.

Video tutorial of Facebook Login form (Signup & Login form)

You may also like:

If you like this Login form and want to use it in your project you can freely copy then paste it in your project without any restriction, And you can take these Facbook Signup form to the next level with your creativity.

Facebook Login form (Signup & Login form) [Source Codes]

To create this small task (Facebook Login form). You need to create two files. The two files are index.html and another one is a style.css file. Remember when you create an HTML file don’t forget to add a .html extension on HTML file and .css extension to your style file.

Let’s create a Cascading Style Sheet(CSS) file with the name of style.css and paste the below codes in your HTML file. Remember you’ve to create a file with a .css extension

CSS CODE

				
					@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;
}

Now create a Hypertext Markup Language(HTML) with the name of index.html and paste the below codes in your HTML file. Remember you’ve to create a file with a .html extension

HTML CODE

				
					<!DOCTYPE html>
<!-- Created By MultiWebPress -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Sign Up | MultiWebPress</title>
      <link rel="stylesheet" href="css/style.css">
   </head>
   <body>
         <div class="wrapper">
            <div class="title">
               Create an account
               <p>It's quick and easy</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>

After creating these two files & pasting codes, now run the files in your browser. You can run to any browser you have on your computer. (Google Chrome, Firefox, Internet explorer etc.)

That’s all, now you’ve successfully Facebook Login & Signup form using HTML & CSS.

If your code does have any bugs/errors/ or you’re facing any problems, then please comment down below or contact us from the contact us page.

Hope you enjoyed reading and watching the video. Please do like and subscribe to my youtube channel & follow me on Instagram.

Thanks in Advance!

Download Code Files

SHARE

WhatsApp
Facebook
Twitter
LinkedIn
Telegram

Leave a Comment

Your email address will not be published. Required fields are marked *

*
*

MOST POPULAR
SHARE
CATEGORY
Categories

ABOUT US

MultiWebPress is a full-service web development agency that creates custom websites and online stores using WordPress and Shopify. Our team of skilled developers and digital strategists offer personalized solutions, including ongoing maintenance and support, to help businesses succeed online.

QUICK LINK

FOLLOW US

Facebook-f Youtube Instagram Twitter

Copyright © 2023 MultiWebPress | All Rights Reserved