A signup form is one of the most essential components of any modern website, web app or SaaS product. It’s the first interaction many users have with your platform, so having a clean, user-friendly design is crucial.
In this article, we’ll create a modern signup form UI using HTML and CSS, complete with floating labels, input icons, a terms-and-conditions checkbox and alternative social login options like Google and Microsoft.
This design is responsive, minimal and easy to integrate into any project — from portfolios and eCommerce sites to SaaS applications.
HTML Structure of Signup Form
The HTML markup is designed with accessibility and usability in mind. Key sections include:
<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>- Static Header Section → A logo, a motivational heading (“Get Started Now!”) and a short description.
- Input Fields → Email, password and confirm password fields with floating labels and field icons for better user experience.
- Terms & Conditions Checkbox → A simple way to ensure compliance before account creation.
- Submit Button → A bold “Sign Up” button that spans the full width for easy tapping on mobile.
- Alternative Signup Options → Buttons for Google and Microsoft login with brand-colored icons.
- Login Link → A footer message with a link for users who already have an account.
This structure makes the form easy to extend with more input fields or different social providers.
Styling with CSS
The CSS gives the form a modern card-like design with soft shadows and rounded corners. Highlights include:
@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: grid;
align-items: 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;
height: max-content;
margin: 30px auto;
}
.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;
}- Container Design → White background, subtle box-shadow and rounded edges for a professional look.
- Floating Labels → Labels move smoothly above the input fields when focused or filled, improving readability.
- Icon Integration → Bootstrap icons are positioned inside input fields for quick visual context.
- Checkbox Styling → Compact and aligned with the label for a clean layout.
- Separator Line → A stylish “or” divider with gradient lines to separate standard signup from social login.
- Social Buttons → Google and Microsoft buttons styled with subtle gradients that match their branding.
- Responsive Layout → The form scales nicely on smaller screens, ensuring accessibility on mobile devices.
Use Cases
This Signup Form UI can be applied to a variety of projects, including:
- Web Applications – SaaS tools, dashboards, CRMs and project management apps.
- E-Commerce Websites – User account creation before checkout or order tracking.
- Portfolios & Landing Pages – Collect user details for newsletters or gated content.
- Educational Platforms – Smooth registration process for students and educators.
Final Thoughts
A good signup form design not only looks appealing but also improves user trust and conversion rates. This Custom Signup Form with HTML & CSS offers an elegant structure with floating labels, icons and social login integration — everything you need to create a seamless onboarding experience.
Whether you’re building a startup platform, online store or web application, this form template gives you a professional and user-friendly registration system that can be easily customized and integrated into any project.
