A clean and professional responsive signup form UI is an essential part of any website that requires user accounts. This design is built with HTML and CSS only, focusing on simplicity, responsiveness and modern aesthetics.
It features a two-column layout — one for the brand introduction and one for the registration form — making it perfect for personal projects, business websites or SaaS applications.
HTML Structure
The Responsive signup form UI is divided into two main sections inside a central container:
<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-wrapper">
<div class="logo">
<img src="/public/assets/dummy_logo.png" alt="Smart UI Studio">
</div>
<span>CodeWebStack</span>
</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>- First Section (Left Side)
- Displays a welcome message to greet users.
- Includes the logo of the platform wrapped in a circular background for branding.
- Provides a short about text where you can introduce your platform.
- Contains quick links like Privacy Policy and About Us, aligned neatly at the bottom.
- Uses a gradient background with decorative wave SVGs to create a dynamic look.
- Second Section (Right Side)
- Houses the signup form with input fields for email, password and confirm password.
- Includes a checkbox agreement for terms and conditions.
- Provides two buttons → “Sign up” for creating a new account and “Sign in” for existing users.
- Maintains a clean and minimal white background to focus attention on the form.
Styling & Visual Design with CSS
This responsive signup form design follows a modern, minimal UI trend with careful use of color, typography and spacing:
@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(/public/assets/desktop_wave.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{
background:white;
padding:5px;
width:50px;
height:50px;
margin:auto;
border-radius: 50%;
margin-bottom: 10px;
}
.logo img {
width: 100%;
height: 100%;
}
.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(/public/assets/mobile_wave.svg);
left: 0;
width: 100%;
height: 60px;
top: 100%;
margin-top: -1px;
}
.secondary-section {
padding-bottom: 30px;
}
}- Typography → Uses the “Fredoka” font for a friendly, rounded look.
- Color Palette → A professional mix of white and blue, with gradient effects in the buttons and backgrounds for depth.
- Buttons → Two styles:
- Primary Sign-up button with a gradient background and white text.
- Secondary Sign-in button with an outlined border style for contrast.
- Inputs → Underlined input fields for a sleek, flat look with subtle placeholders.
- Responsive Design → On mobile devices, the layout switches to a stacked column format, hiding extra texts for clarity and adding a mobile-friendly wave background.
This responsive signup form UI provides:
- A dual-purpose layout → one side for branding and another for the form.
- Responsive design that adapts seamlessly to desktops, tablets and smartphones.
- Clean form fields for email, password and confirm password inputs.
- User agreement checkbox for terms and conditions.
- Clear CTA buttons with visual distinction for sign-up and sign-in actions.
- A modern brand-first layout that builds trust while guiding the user.
Use Cases
This UI is suitable for:
- Portfolio websites → When showcasing creative projects with user accounts.
- Corporate sites → For client login and registration.
- SaaS dashboards → A stylish entry point for customers.
- Community platforms → To encourage sign-ups with a professional touch.
Final Thoughts
This two-section responsive signup form combines modern UI design with functional elements that can be integrated into any website or web app. With HTML and CSS only, you achieve a layout that is simple, effective and visually appealing.
For a production-ready system, you can extend it with JavaScript validation and backend integration (PHP, Node.js or WordPress custom system), but as a UI design, this layout is already polished and ready to use.
