Create a User-Friendly and Responsive Sign Up Form using HTML & CSS
In today's digital age, the sign-up form is a crucial component of any website that requires user registration. A well-designed sign up form not only enhances user experience but also increases the chances of user retention and engagement. In this post, we'll explore how to create a visually appealing and user-friendly sign-up form using HTML and CSS. We'll walk you through the various sections of the form.
Also Read: Image Folding Effect on Hover Using HTML and CSS only
This design provides a modern, clean look that enhances user experience and can be easily adapted for various websites. Let's break down the key components and styling techniques used in this project.
HTML Structure
The HTML structure for our sign-up form is divided into two main sections within a div with the class form-wrapper. This container holds the primary-section and the secondary-section.
<div class="main-container">
<div class="form-wrapper">
<div class="primary-section">
<div class="about-section">
<p class="greet">Welcome to</p>
<div class="logo">
<img src="https://i.ibb.co/rdycPgx/logo.jpg" alt="Smart UI Studio">
<p>Smart UI Studio</p>
</div>
<p class="about">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia blanditiis assumenda
vitae adipisci placeat, iusto est nam repellendus at eum.
</p>
<div class="pages-link"><a href="#">Privacy Policy</a>|<a href="#">About Us</a></div>
</div>
</div>
<div class="secondary-section">
<h2>Create Your Account</h2>
<form>
<div class="input-field">
<label for="email">Email</label>
<input type="email" id="email" placeholder="Enter your email address" required autocomplete="off">
</div>
<div class="input-field">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Create new password">
</div>
<div class="input-field">
<label for="confirm-pass">Confirm Password</label>
<input type="password" id="confirm-pass" placeholder="Re-enter your password">
</div>
<div class="agree-sec">
<input type="checkbox" id="terms">
<label for="terms">I agree to the <a href="#" target="_blank">Terms and Conditions</a></label>
</div>
<div class="button-sec">
<button class="signup-btn">Sign up</button><button class="signin-btn">Sign in</button>
</div>
</form>
</div>
</div>
</div>Primary Section
- Greeting and Logo: This section includes a welcoming message and a logo image with a short description of the site or application.
- About Text: A brief description or mission statement that provides context for new users.
- Links: Quick links to the Privacy Policy and About Us page, encouraging users to learn more about your site or app.
Secondary Section
- Form Header: A heading that clearly indicates the purpose of the section—creating a new account.
- Input Fields: Fields for email, password and password confirmation, each with associated labels to guide users through the registration process.
- Terms and Conditions: A checkbox for users to agree to the terms and conditions, with a link to the full document.
- Buttons: Separate buttons for signing up and signing in, providing users with clear options for action.
CSS Styling
The CSS styles enhance the form's appearance and ensure it is responsive across various devices. Here are some key aspects of the styling.
@import url(https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500&display=swap);
.main-container{
min-height: 100vh;
min-width: 320px;
display: flex;
align-items: center;
justify-content: center;
}
a {
text-decoration: none;
color: rgb(2, 80, 176);
font-weight: 500;
}
a:hover {
text-decoration: underline;
}
.form-wrapper {
display: flex;
gap: 60px;
height: 480px;
max-width: 800px;
overflow: hidden;
margin: auto 10px;
border-radius: 10px;
font-family: 'Fredoka';
background-color: white;
}
.primary-section {
color: #fff;
position: relative;
padding: 20px 0 20px 20px;
background: linear-gradient(#002571, #0075d5);
}
.primary-section::after {
content: url(https://svgshare.com/i/17Ux.svg);
position: absolute;
top: 0;
left: 100%;
width: 60px;
height: 100%;
}
.about-section {
text-align: center;
display: grid;
height: 100%;
align-items: center;
}
.greet {
font-size: 18px;
letter-spacing: .5px;
font-weight: 500;
}
.logo img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-bottom: 10px;
}
.about {
font-size: 12px;
color: #d8d8d8;
line-height: 1.4;
font-weight: 300;
margin-top: 20px;
align-self: flex-start;
}
.pages-link {
align-self: flex-end;
font-size: 13px;
color: #d8d8d8;
}
.pages-link a {
color: #d8d8d8;
margin: 0 8px;
font-weight: 400;
}
.secondary-section {
background-color: #fff;
flex: 1 0 50%;
padding: 20px;
display: grid;
align-items: center;
}
.secondary-section h2 {
text-align: center;
}
.input-field {
display: grid;
margin-top: 25px;
gap: 10px;
}
.input-field label {
letter-spacing: .2px;
font-weight: 500;
color: #3e3e3e;
font-size: 15px;
}
.input-field input {
border: none;
outline: none;
font-size: 16px;
padding: 0 5px 2px 2px;
border-bottom: 1px solid #0075d5;
}
.input-field input::placeholder {
font-size: 13px;
}
.agree-sec {
font-size: 14px;
color: #1c1c1c;
margin: 8px 0 35px 0;
}
.agree-sec label {
cursor: pointer;
}
.agree-sec input[type="checkbox"] {
vertical-align: middle;
cursor: pointer;
}
.button-sec {
display: flex;
gap: 20px;
}
.signup-btn,
.signin-btn {
flex-grow: 1;
cursor: pointer;
font-size: 15px;
line-height: 30px;
font-family: 'Fredoka';
font-weight: 500;
border-radius: 12px;
background-color: transparent;
}
.signup-btn {
color: white;
border: none;
background: linear-gradient(0deg, #3281f7, #015691);
}
.signin-btn {
border: 1px solid #015691;
color: #015691;
}
@media screen and (max-width:768px) {
.form-wrapper {
flex-direction: column;
max-width: 400px;
width: 100%;
height: auto;
}
.primary-section {
padding: 20px 10px;
}
.about,
.greet,
.pages-link {
display: none;
}
.primary-section::after {
content: url(https://svgshare.com/i/17UV.svg);
left: 0;
width: 100%;
height: 60px;
top: 100%;
margin-top: -1px;
}
.secondary-section {
padding-bottom: 30px;
}
}- Form Wrapper: A flex container with a maximum width to ensure it doesn't stretch too wide on large screens. Rounded corners and a white background create a card-like appearance.
- Primary Section: A gradient background transitioning from dark to light blue, giving a professional look. A pseudo-element ::after adds a decorative wave image to enhance visual appeal.
- Responsive Design: Adjustments for smaller screens, such as stacking the sections vertically and modifying the layout of the wave image to fit mobile devices.
By combining thoughtful layout, appealing design, and responsive behavior, this sign-up form provides a great user experience while maintaining a professional appearance.
Also Read: Ultimate Weather Web App using HTML CSS JavaScript | Fully Responsive
Whether you're building a new website or updating an existing one, a well-designed sign-up form can significantly impact user engagement and satisfaction. Experiment with different styles and functionalities to create a form that best suits your needs.
