Introduction
Hello there, fabulous learners! Are you ready to embark on another exciting tutorial that might have some of you scratching your heads? Fear not, my dear friends, because you've stumbled upon this wonderful online guide, and I sincerely hope that everyone here is familiar with the enigmatic creature known as the "Facebook sign up form." For those who might not be acquainted, the Facebook sign up form is that elusive little box that pops up when you click on the magical "Create Account" link or button. But worry not, we're about to demystify its secrets and conquer it together! Here are the few delightful steps involved in crafting your very own Facebook sign up form. Let's dive in! 🚀Preview
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
Dear users, we want to emphasize that this instructional content is intended solely for educational purposes. We must stress that we bear no responsibility for any illegal or unethical use of the information provided in this lesson, such as engaging in cybercrime or any other unlawful activities. If you have any questions or concerns about the content presented in this tutorial, we highly encourage you to leave a comment. Your feedback and feelings about the educational material are essential to us. Thank you all for taking the time to read and understand this message. Let's continue learning responsibly and making the digital world a better place!Rate This Article
Thanks for reading: How To Make Beautiful Facebook Sign Up Form Remember to hit the comment button below if you really have any question or suggestion about this it.