How to Create a Modern Registration Form Using HTML and CSS

Hello everyone! I am Shaurya, and welcome back to my blog. In today’s post, we’re going to create a modern, fully functional registration form using just HTML and CSS. I will break down every part of the project so that beginners and intermediate developers can easily understand it and even customize it for their own projects.

I have also made a detailed video tutorial on this project and a playlist on HTML & CSS on my YouTube channel. You can check it out for more practical examples. You can download a cheat sheet for reference.

I have added the github repositoy link too. If you want you can visit the github repo.

Let’s dive into this project step by step.

What is a Registration Form?

A registration form is a web form that allows users to sign up on a website or application. It usually collects basic information like:

Full Name
Username
Email Address
Phone Number
Password

Some registration forms also include terms and conditions checkboxes, password confirmation fields, and login links for existing users.

The main goal of a registration form is to collect user information in a structured and secure way.

In this project, we’ll build a visually appealing registration form that is responsive and modern, using HTML and CSS only, without any JavaScript for validation (although you can always add that later).

Project Structure

Before we start coding, let’s look at the project structure:

/registration-form
│── index.html       # The main HTML file for the form
│── style.css        # CSS file for styling

This structure is simple, which makes it perfect for beginners. You can also expand it later by adding JavaScript validation, server-side integration, or even connecting it to PHP/MySQL.

HTML: Building the Form

We start with HTML, the backbone of our project. Here’s the structure of our form:

<form class="registration-form">
    <h2>Create Account</h2>

    <!-- Full Name -->
    <div class="input-group">
        <label for="name">Full Name</label>
        <input type="text" id="name" placeholder="Enter your full name" required>
    </div>

    <!-- Username -->
    <div class="input-group">
        <label for="Username">Username</label>
        <input type="text" id="Username" placeholder="Enter your Username" required>
    </div>

    <!-- Email -->
    <div class="input-group">
        <label for="email">Email</label>
        <input type="email" id="email" placeholder="Enter your email" required>
    </div>

    <!-- Phone Number -->
    <div class="input-group">
        <label for="phone">Phone Number</label>
        <input type="tel" id="phone" placeholder="Enter your phone number" required>
    </div>

    <!-- Password -->
    <div class="input-group">
        <label for="password">Password</label>
        <input type="password" id="password" placeholder="Enter your password" required>
    </div>

    <!-- Confirm Password -->
    <div class="input-group">
        <label for="confirm-password">Confirm Password</label>
        <input type="password" id="confirm-password" placeholder="Confirm your password" required>
    </div>

    <!-- Terms and Conditions -->
    <div class="input-group">
        <label>
            <input type="checkbox" id="terms" required>
            I agree to the <a href="#">Terms & Conditions</a>
        </label>
    </div>

    <!-- Submit Button -->
    <button type="submit">Register</button>

    <!-- Login Link -->
    <p class="login-link">Already have an account? <a href="#">Login</a></p>
</form>

Explanation of HTML Code

Form Tag
We use the <form> element with a class registration-form. This class will be used in CSS to style the form. The form will collect user input fields.
Heading
<h2>Create Account</h2> is the title of the form. A heading is important to indicate the purpose of the form.
Input Fields
Each input field is wrapped inside a <div> with the class input-group. This makes it easy to style both the label and input together.

Full Name & Username: Text fields for basic user info.
Email: Input type email ensures proper email format.
Phone Number: Input type tel allows numeric phone input.
Password & Confirm Password: Input type password hides user input for security.

Terms and Conditions
A checkbox ensures the user agrees to the terms before registering.
Submit Button
<button type="submit">Register</button> triggers the form submission.
Login Link
A small text with a link that redirects existing users to the login page.

CSS: Styling the Form

CSS is what makes this form modern, visually appealing, and responsive. Let’s break down the CSS:

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* Reset styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

We use Google Fonts: Poppins and Roboto for clean, modern typography.
box-sizing: border-box ensures padding and borders don’t affect element size.

Body Styling

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #6a11cb, #2575fc);
}

display: flex and justify-content/align-items: center centers the form both vertically and horizontally.
The gradient background gives the page a modern feel.

Container Styling

.container {
    background-color: #fff;
    border-radius: 12px;
    padding: 40px;
    width: 100%;
    max-width: 600px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

The container is white to contrast with the background.
Rounded corners and shadow add depth.
max-width ensures it looks good on large screens while remaining responsive.

Input Fields

.input-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.input-group label {
    margin-bottom: 5px;
    font-weight: 500;
    color: #555;
}

.input-group input {
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
}

.input-group input:focus {
    border-color: #2575fc;
    box-shadow: 0 0 8px rgba(37, 117, 252, 0.4);
    outline: none;
}

Inputs are large and comfortable for typing.
Focus effect adds interactivity, making the form feel alive.

Submit Button

button {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

button:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

The gradient button is visually consistent with the background.
Hover effect lifts the button slightly for a 3D feel.

Login Link

.login-link {
    text-align: center;
    margin-top: 15px;
    color: #555;
}

.login-link a {
    color: #2575fc;
    text-decoration: none;
    font-weight: 500;
}

.login-link a:hover {
    text-decoration: underline;
}

Makes it clear that existing users can navigate to login.
Subtle hover effect improves usability.

Responsive Design

@media (max-width: 500px) {
    .container {
        padding: 30px 20px;
    }
}

Ensures the form looks good on mobile devices.
Reduces padding without breaking layout.

Key Features of This Project

Modern Design: Clean layout, gradient backgrounds, and smooth hover effects.
Responsive: Works well on desktop, tablet, and mobile.
Accessibility: Labels for all inputs improve usability and accessibility.
Easy to Customize: Fonts, colors, and layout can be changed easily.
Ready for Backend: Can be connected to PHP/MySQL, Node.js, or any server-side framework.

How Beginners Can Learn From This Project

This project is perfect for beginners to learn:

How to structure a form in HTML.
How to use CSS Flexbox to center elements.
How to create responsive designs with media queries.
How to use Google Fonts for modern typography.
How to style input fields, buttons, and links in a professional way.

Enhancements You Can Add

Once you’re comfortable with the basics, you can take this project further by adding:

JavaScript Validation
Check if passwords match, validate email format, or enforce strong passwords.
Backend Integration
Use PHP/MySQL or Node.js to save user data in a database.
Password Strength Indicator
Show visual feedback for password strength.
Show/Hide Password Toggle
Add a small icon to toggle password visibility.
Animations
Smooth transitions when hovering, focusing, or submitting the form.

Conclusion

Creating a modern registration form using HTML and CSS is a great way to practice web design and enhance your front-end skills. This project covers layout, typography, colors, responsive design, and interactivity.

By following this blog, you’ve learned:

How to structure HTML forms.
How to style them using CSS.
How to make forms responsive and modern.
How to make the form visually appealing with gradients, shadows, and hover effects.

This is an essential project for any web developer because forms are everywhere—signup pages, login pages, contact forms, checkout forms, and more.

If you enjoyed this tutorial, check out my HTML & CSS playlist where I teach more practical projects, and don’t forget to visit my Youtube channel, Developer Shaurya and download a free cheat sheet.

Start building, keep experimenting, and soon you’ll be able to create complex web forms and UI designs like a pro!

Next Steps for Readers:

Try changing colors, fonts, or layout.
Add more fields like date of birth, gender, or address.
Practice connecting it to a database backend.

Checkout My YouTube Channel

Read my other Blogs