Hello guys, If you want to create a simple-looking minimalistic sign up form design then you came to the right place. In this blog, you are going to learn how to create a sign up form from scratch.
But first, let’s understand how important are forms. So if I talk about the importance of forms in web design, then I would say they are very important. As we open hundreds of websites every day then you must be noticed that you see different types of forms like login forms, sign-up forms, registration forms, and many more, they all are different types of forms.
Forms are used for different purposes, for example, if you want to create an account then you will be redirected to a sign up form or if you have an eCommerce website and you want to add products to your website then you will do it using create product form.
So now that you understand how important forms are and how they are used for different purposes, we can continue to learn how to create them. So the sign up form we are going to create will be in HTML and CSS.
Yeah, you heard that right, this sign-up form we are going to make is completely in HTML and CSS. And I believe that after reading this complete guide you will be able to create a sign up form by yourself.
Sign Up form Design in HTML CSS
The signup form we are going to create will contain 4 input fields, 1 checkbox, and a button. So to start first you need to create a folder with any name you want, then create these two files inside the folder.
Index.html
style.css
First, start with the index.html file, open the file and paste the below-given code inside it. When you’re done, save the file
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>CodingClaw | Sign Up Form</title>
</head>
<body>
<div class="container">
<h1>Create an account</h1>
<form action="#">
<div class="input-box">
<label for="name">Your name</label>
<input type="text" name="name" placeholder="Enter your email" required>
</div>
<div class="input-box margin-top">
<label for="email">Your email</label>
<input type="email" name="email" placeholder="Enter your name" required>
</div>
<div class="input-box margin-top">
<label for="password">Password</label>
<input type="password" name="password" placeholder="Enter your password" required>
</div>
<div class="input-box margin-top">
<label for="confirm_password">Confirm Password</label>
<input type="password" name="confirm_password" placeholder="Confirm your password" required>
</div>
<div class="checkbox margin-top">
<input type="checkbox" name="checkbox">
<label for="checkbox">I accept the <a href="#">Terms and Conditions</a></label>
</div>
<button class="submit-btn margin-top" type="submit">Create an account</button>
<p class="login-text margin-top">Already have an acoount? <a href="#">Login here</a></p>
</form>
</div>
</body>
</html>Second, open the style.css file and paste the below-given CSS code inside it. After doing this save the file.
style.css
/* Provided By :- codingclaw.com */
/* font "Inter" , imported from google fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
text-decoration: none;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 0.6rem;
background: rgb(76, 64, 247);
}
.container {
background-color: #fff;
border-radius: 10px;
padding: 2rem;
width: 100%;
max-width: 30rem;
box-shadow: 7px 7px 20px rgb(58, 47, 220);
}
h1 {
font-size: 1.7rem;
font-weight: 600;
color: rgb(17, 24, 39);
}
form {
margin-top: 1.5rem;
}
.input-box {
display: flex;
flex-direction: column;
}
.input-box label {
color: rgb(17, 24, 39);
font-size: 1rem;
font-weight: 500;
margin-bottom: 0.5rem;
}
.input-box input {
padding: 0.7rem;
font-size: 1rem;
border: 1px solid rgb(209, 213, 219);
border-radius: 10px;
}
.input-box input::placeholder {
color: rgb(156, 163, 175);
}
.margin-top {
margin-top: 1.2rem;
}
.submit-btn {
font-size: 1rem;
font-weight: 500;
color: #fff;
text-align: center;
width: 100%;
padding: 1rem;
border: none;
border-radius: 10px;
background-color: rgb(76, 64, 247);
cursor: pointer;
}
.checkbox {
display: inline-flex;
}
.checkbox input {
accent-color: rgb(76, 64, 247);
width: 15px;
cursor: pointer;
}
.checkbox label {
margin-left: 0.8rem;
}
.checkbox label,
.login-text {
font-size: 1rem;
font-weight: 300;
}
.checkbox label a,
.login-text a {
font-weight: 500;
color: rgb(76, 64, 247);
}
Congratulations, you have successfully created your sign up form. Apart from this, you also get a basic idea of how to create a sign up form. Now whenever you are asked to create a form, you can do it easily. Also if you face any problem like your code doesn’t work or you get any error, you can ask me in the comments.