Boost User Engagement: Design a Responsive Signup Form with HTML CSS
A well-designed signup form is essential for enhancing user experience and boosting conversions on your website. This tutorial introduces a modern and interactive signup form crafted with HTML and CSS. The design is minimalistic yet visually appealing, ensuring users can easily navigate the form and register with your platform.
Also Read: Typing Text Effect using JavaScript | Without any Library
- Minimalist Design: The form’s layout is clean and distraction-free. It uses white space effectively to create a professional and user-friendly interface.
- Interactive Elements: Interactive icons and responsive labels ensure the form is intuitive. Labels dynamically reposition based on input focus, enhancing accessibility.
- Visual Feedback: Input fields highlight with a subtle border change and color feedback when focused, providing users with clear visual cues.
- Social Signup Options: The inclusion of Google and Microsoft login options makes the form versatile, offering users a faster way to sign up without manually entering details.
HTML Structure
The form is encapsulated in a form-wrapper div, which organizes static text, input fields, a checkbox and signup buttons into a neat layout.
- Header Section: The header includes a welcoming message, a sleek logo icon, and a brief description to encourage users to sign up. This sets the tone and purpose of the form.
- Input Fields: The form contains three input fields i.e. Email, Password and Confirm Password. Each field comes with an associated icon and dynamic label. Labels shrink and move when the input is focused, creating an engaging and functional user experience.
- Terms and Conditions Checkbox: This ensures legal compliance while allowing users to agree to the terms effortlessly. The checkbox is neatly aligned with a label containing a clickable link for easy access to the terms.
- Primary Button: The black "Sign Up" button is prominent and designed to grab attention while encouraging user action. It’s styled for optimal readability and usability.
- Social Signup Options: Users who prefer a quicker process can sign up via Google or Microsoft. These options are styled with vibrant colors representing each brand, using conic gradients to mimic their logos.
- Separator Line: The separator line enhances readability and divides the traditional signup process from the social signup options. It’s elegantly designed with a gradient effect for added visual interest.
- Footer Link: A simple login link at the bottom redirects returning users, ensuring seamless navigation across your platform.
<div class="form-wrapper">
<div class="static-text">
<span class="logo bi bi-command"></span>
<h2>Get Started Now!</h2>
<p>Set up your account and unlock endless possibilities.</p>
</div>
<form id="signup-form">
<div class="field-group">
<input type="text" id="email" placeholder="" autocomplete="off">
<label for="email">Email</label>
<span class="field-icon bi bi-envelope"></span>
</div>
<div class="field-group">
<input type="password" id="password" placeholder="">
<label for="password">Password</label>
<span class="field-icon bi bi-lock"></span>
</div>
<div class="field-group">
<input type="password" id="confirm-password" placeholder="">
<label for="confirm-password">Confirm Password</label>
<span class="field-icon bi bi-lock"></span>
</div>
<div class="agree-checkbox">
<input type="checkbox" id="terms-condition">
<label for="terms-condition">I agree to the <a href="#">Terms and Conditions</a></label>
</div>
<button>Sign up</button>
</form>
<span class="separator">or</span>
<div class="other-options">
<a href="#">
<span class="option-icon bi bi-google"></span>
Sign up with Google
</a>
<a href="#">
<span class="option-icon bi bi-microsoft"></span>
Sign up with Microsoft
</a>
</div>
<p class="login-link">Already have an Account ? <a href="#">Login</a></p>
</div>
CSS Styling
The CSS focuses on creating a clean, professional design using gradients, transitions and responsive design principles.
- Font Choice: The form uses the "Work Sans" font, chosen for its modern and legible style. The font complements the overall design aesthetic.
- Dynamic Effects: Focus effects on input fields and labels provide a dynamic experience. This ensures users remain engaged throughout the form-filling process.
- Gradient Icons: The social login icons are styled with intricate gradients, making them visually appealing and easily recognizable.
- Responsive Design: The form is responsive and adapts to different screen sizes, making it suitable for desktop and mobile users.
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
body {
display: flex;
align-items: center;
justify-content: center;
font-family: 'Work Sans';
background-color: #f5f7f9;
}
a {
text-decoration: none;
color: #293890;
}
.form-wrapper {
background-color: white;
box-shadow: 0px 0px 10px 0px #d8d8d8;
padding: 30px 15px 15px;
border-radius: 15px;
width: 450px;
}
.logo {
font-size: 30px;
display: block;
color: #383838;
margin-bottom: 10px;
}
.form-wrapper .static-text {
text-align: center;
margin-bottom: 40px;
}
.static-text p {
font-size: 14px;
margin-top: 10px;
}
.field-group {
margin: 20px 0;
position: relative;
}
.field-group input:focus {
outline: none;
border: 1px solid #396dd6;
}
.field-group input {
padding: 10px 35px 10px 12px;
font-size: 15px;
width: 100%;
border-radius: 5px;
border: 1px solid rgb(215, 215, 215);
}
.field-group input:focus~.field-icon,
.field-group input:focus+label {
color: #1f47b6;
}
.field-group input:focus+label,
.field-group input:not(:placeholder-shown)+label {
background-color: white;
padding: 0 7px;
left: 5px;
font-size: 13px;
top: 0;
font-weight: 500;
}
.field-group label {
position: absolute;
transition: top .4s, font-size .4s;
left: 12px;
font-size: 14px;
top: 50%;
color: #101010;
cursor: text;
transform: translateY(-50%);
}
.field-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
input[type=checkbox] {
vertical-align: middle;
}
.agree-checkbox {
font-size: 14px;
color: #262626;
}
.agree-checkbox label {
cursor: pointer;
}
#signup-form button {
width: 100%;
background-color: black;
line-height: 2.5;
color: white;
font-family: 'Work Sans';
font-size: 15px;
border-radius: 10px;
cursor: pointer;
margin-top: 30px;
border: none;
}
.separator {
display: flex;
align-items: center;
gap: 5px;
color: rgb(63, 63, 63);
margin: 30px 0;
}
.separator::before,
.separator::after {
content: '';
width: 100%;
height: .8px;
background: linear-gradient(145deg, #101010, transparent);
}
.separator::before {
background: linear-gradient(-145deg, #101010, transparent);
}
.other-options {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
width: 100%;
}
.other-options a {
color: black;
font-size: 14px;
padding: 10px;
border: 1px solid rgb(209, 209, 209);
border-radius: 5px;
flex: 1 0 auto;
text-align: center;
}
.other-options .option-icon {
margin: 0 2px;
cursor: pointer;
transition: .3s;
font-size: 20px;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.bi-google {
background: conic-gradient(from -45deg, #ea4335 110deg, #4285f4 90deg 180deg, #34a853 180deg 270deg, #fbbc05 270deg) 73% 55%/150% 150% no-repeat;
}
.bi-microsoft {
background: conic-gradient(from -90deg, #f44336 90deg, #4caf50 90deg 180deg, #2196f3 180deg 270deg, #ffc107 270deg) 50% 55%/100% 150% no-repeat;
}
.login-link {
text-align: center;
margin-top: 20px;
font-size: 15px;
}
This signup form is a great example of combining aesthetics with functionality. By incorporating clean design principles, interactivity and a user-centric approach, you can create forms that not only look good but also perform exceptionally. Use this form as a starting point to design engaging signup experiences for your platform.
Also Read: Ultimate Weather Web App using HTML CSS JavaScript | Fully Responsive
