Web Design Tutorials

How to Create a Sleek Sign-Up Form Using HTML and CSS

In this tutorial, we’ll walk you through the process of building a stylish sign-up form using only HTML and CSS. This form features integration with Google and Apple ID sign-ins, as well as custom icons to elevate the user experience. Follow along to create a responsive and visually appealing form for your website.

Key Features:

A clean, minimalistic design with smooth user experience.

Sign-up options via Google and Apple ID.

Input fields for username, password, and password confirmation.

Animated icons for a dynamic visual effect.

1. Setting Up the HTML Structure

Begin by organizing your project folder with the necessary files, including the HTML, CSS, and an image for the background. Open your project in VS Code to start writing the code.

HTML Markup:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign Up Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <form>
            <h2>Sign Up</h2>
            <!-- Social Sign-In Buttons -->
            <div class="social-login">
                <button type="button" class="google-btn">
                    <i class="icon-google"></i> Google Plus
                </button>
                <button type="button" class="apple-btn">
                    <i class="icon-apple"></i> Apple ID
                </button>
            </div>
            <!-- Input Fields -->
            <div class="form-input">
                <input type="text" placeholder="Username" required>
                <i class="icon-user"></i>
            </div>
            <div class="form-input">
                <input type="password" placeholder="Password" required>
                <i class="icon-lock"></i>
            </div>
            <div class="form-input">
                <input type="password" placeholder="Confirm Password" required>
                <i class="icon-lock"></i>
            </div>
            <!-- Submit Button -->
            <button type="submit" class="btn">Register Now</button>
            <!-- Login Link -->
            <div class="login-link">
                <p>Already have an account? <a href="#">Login</a></p>
            </div>
        </form>
    </div>
</body>
</html>

In this structure:

Social sign-in buttons use Google and Apple icons, giving users an alternative sign-up method.
There are input fields for username, password, and confirm password.
The form includes an animated icon inside each input field for a polished look.

2. Adding the CSS Styles

To make the form visually appealing, we use Google Fonts and customize the styling for inputs, buttons, and icons.

Basic CSS Setup:

body {
    font-family: 'Roboto', sans-serif;
    background: url('background.jpg') no-repeat center center fixed;
    background-size: cover;
}

.container {
    width: 400px;
    margin: 100px auto;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

form h2 {
    text-align: center;
    margin-bottom: 20px;
}

.social-login {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

button {
    width: 48%;
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.form-input {
    position: relative;
    margin-bottom: 20px;
}

.form-input input {
    width: 100%;
    padding: 10px;
    padding-left: 40px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.form-input i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
}

.btn {
    width: 100%;
    padding: 10px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.login-link {
    text-align: center;
    margin-top: 20px;
}

.login-link a {
    color: #007bff;
}

3. Adding Animated Icons

To enhance the form’s design, we use animated SVG icons for the input fields. Visit a site like Boxicons or Poblab Icons to grab the relevant SVG code for icons such as Google, Apple, and User.

Example of SVG Integration:

<i class="icon-google"></i> <!-- Example SVG for Google -->

Conclusion

This Sign-Up Form offers a modern, user-friendly design with social sign-ins, custom icons, and a responsive layout. It’s easy to create and customize for your website. By combining HTML, CSS, and external icon libraries, you’ve built a highly functional form without relying on external scripts.