I’ve taught you how to make a custom signup form with HTML and CSS in this post. You may build a registration form that is both practical and visually appealing on your website by following the instructions explained in this article. You can use the included source code to construct your the included source code to create your custom registration forms and develop a unique look for your site. Have fun with your creations!
Registration forms are required for every website that requires user registration. In this post, we’ll teach you how to make a custom signup form with HTML and CSS. The layout has a Heading and text on the left to describe the state and a signup form with a “Start Free Trial” button on the right. You will have a Good Looking signup form that you can use on your website by the conclusion of this tutorial.
Designing the Signup Form:
To begin, we will create the layout of the registration form. We’ll use HTML to build the form’s structure and CSS to design it. In addition, we will make the design entirely responsive so that it appears fantastic on all screen sizes.
Adding the Heading and Text Area:
The registration form’s title and text box are critical components. They welcome visitors to your website and explain the purpose of the form. We will add the heading and text area to the design using HTML and CSS and teach you how to adjust them to match your branding.
Creating the Signup Form:
The most important aspect of the design is the registration form. It enables users to register and become members on your website. The form fields, including the name, email, and password fields, will be created using HTML and CSS. We will also show how to apply validation to form fields to ensure that users provide accurate information.
Adding the “Start Free Trial” Button:
The “Start Free Trial” button is an excellent approach to get users to register for your website. We’ll add the button to the design with HTML and CSS and teach you how to tweak it to match your branding.
Making the Design Responsive:
Lastly, the signup form design will be totally responsive. We’ll use media queries to adapt the form’s aesthetics for different screen widths. We will also demonstrate how to test the design on various devices to ensure that it looks well on all of them.
Source Code For Signup Form using HTML CSS – Free Source Code:
First, you must create two files: HTML and CSS. After you’ve created these files, simply copy and paste the following codes into your file. You can also download the Login Form’s source files and images. The link to the download is provided below.
Step One: create an HTML file called index.html and paste the following codes into it. Remember to save your work in a file with the extension ” .html ” or ” .htm “.
<!DOCTYPE html>
<html lang="en">
<!-- By Hassan Ali | Hassanrao.com -->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Signup Form | Hassanrao.com</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main class="container">
<section class="left">
<h1>Observing experts to become one</h1>
<p>
See how experienced developers solve problems in real-time. Watching
scripted tutorials is great, but understanding how developers think is
invaluable.
</p>
</section>
<section class="right">
<button class="btn btn-blue">
<span class="bold">Try it free 7 days</span> then $20/mo. thereafter
</button>
<form>
<input type="text" placeholder="First Name" />
<input type="text" placeholder="Last Name" />
<input type="text" placeholder="Email Address" />
<input type="text" placeholder="Password" />
<button class="btn btn-green">Claim your free trial</button>
<small>
By clicking the button, you are agreeing to our
<a href="#"> Terms and Services</a></small>
</form>
</section>
</main>
</body>
</html>
Step Two: create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember to save the file with the ” .css ” extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
body {
background: url("images/bg-intro-desktop.png") #ff7a7a no-repeat;
background-size: cover;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
height: 100vh;
width: 1100px;
margin: auto;
color: #fff;
padding: 0 30px;
}
.left {
width: 50%;
padding-right: 4rem;
}
.left h1 {
font-size: 2.8rem;
line-height: 1.2;
}
.left p {
font-size: .9rem;
padding-top: 2rem;
opacity: .9;
}
.right {
width: 50%;
}
form {
display: flex;
flex-direction: column;
background: #fff;
padding: 35px;
border-radius: 10px;
max-width: 420px;
}
input, button {
padding: 14px;
width: 100%;
border-radius: 10px;
}
button {
border: 0;
margin: 20px 0;
font-family: 'Poppins', sans-serif;
font-size: .9rem;
color: #fff;
word-spacing: 2px;
cursor: pointer;
}
.btn-blue {
background-color: hsl(248, 32%, 49%);
width: 420px;
}
span {
font-weight: 200;
}
.bold {
color: #fff;
font-weight: 700;
}
.btn-green {
background-color: #38cc8c;
text-transform: uppercase;
font-size: 1rem;
font-weight: 500;
}
.btn-green:hover{
background-color: #0ba864;
}
input {
margin-bottom: 20px;
border: 2px solid hsl(246, 25%, 77%);
font-size: .9rem;
font-weight: 600;
}
small {
color: hsl(246, 25%, 77%);
text-align: center;
}
.right a {
text-decoration: underline;
color: red;
font-weight: 700;
}
@media screen and (max-width: 900px) {
.container {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
padding: 2rem 0;
text-align: center;
}
.container section {
padding: 0;
margin: 0 auto;
width: 80%;
}
.btn-blue{
width: 100%;
}
h1 {
font-size: 2rem;
}
p {
text-align: center;
padding: 1rem;
}
}
Image Download
You’ve now created a Signup Form with HTML and CSS. Please obtain the source code files from the provided download button if your code doesn’t function or you’ve encountered any errors or problems. You can extract the.zip file that is downloaded for free.
View This Post On Hassanrao.com for free source Files download Link.
Top comments (0)