Registration / Sign-Up Form Template

Onboard new users smoothly with this clean and intuitive registration form.

This template provides a standard, user-friendly layout for creating a new account, with all the necessary fields and basic front-end validation.

Get Source Code Preview

About this Sign-Up Form

The sign-up process is typically a user's first real interaction with your application, so it needs to be seamless. This template is designed with best practices for a great user experience and security in mind. It includes fields for an email address, a unique username, a password, and a password confirmation field to prevent typos. The form also includes helpful links to the login page for existing users, as well as a "Terms of Service" agreement and "Privacy Policy" checkbox.

Features

Standard Registration Fields: Username, Email, and Password with confirmation.
HTML5 Validation: Uses the required attribute, type="email", and a pattern attribute on the password field to enforce basic complexity rules directly in the browser.
Accessibility & Security: Proper label elements are used for accessibility. Setting autocomplete to "new-password" helps password managers suggest strong, unique passwords.
User-Friendly Design: A clean layout with a clear call-to-action and links for existing users improves the user journey.

Ideal Use Cases

A dedicated "Register" or "Signup" page for any web application.
Onboarding for SaaS products, community forums, or online services.

Dependencies

None. This template uses only pure HTML and CSS.

Code

Here's the full code for the registration form template:

<div class="registration-form-container">
    <div class="registration-form-header">
        <h2>Create an Account</h2>
        <p>Join us and get started today!</p>
    </div>

<form id="registrationForm" action="#" method="post">
        <div class="form-group">
            <label for="reg-email">Email</label>
            <input type="email" id="reg-email" name="email" required autocomplete="email">
        </div>
        
        <div class="form-group">
            <label for="reg-username">Username</label>
            <input type="text" id="reg-username" name="username" required autocomplete="username">
        </div>

<div class="form-group">
            <label for="reg-password">Password</label>
            <input type="password" id="reg-password" name="password" required 
                   autocomplete="new-password" 
                   pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
                   title="Must contain at least one number, one uppercase and lowercase letter, and at least 8 or more characters">
            <p class="password-requirements">8+ characters, with uppercase, lowercase, and numbers.</p>
        </div>
        
        <div class="form-group">
            <label for="reg-password-confirm">Confirm Password</label>
            <input type="password" id="reg-password-confirm" name="password_confirm" required autocomplete="new-password">
        </div>

<div class="form-group-terms">
            <input type="checkbox" id="terms" name="terms" required>
            <label for="terms">I agree to the <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.</label>
        </div>

<button type="submit" class="submit-btn">Sign Up</button>
        
        <p class="login-link">
            Already have an account? <a href="#">Log in</a>
        </p>
    </form>
</div>

<script>
const registrationForm = document.getElementById('registrationForm');
const passwordInput = document.getElementById('reg-password');
const confirmPasswordInput = document.getElementById('reg-password-confirm');

registrationForm.addEventListener('submit', function(event) {
    if (passwordInput.value !== confirmPasswordInput.value) {
        // Passwords do not match
        confirmPasswordInput.setCustomValidity('Passwords do not match.');
        // Prevent form submission
        event.preventDefault();
    } else {
        // Passwords match, clear any previous validation message
        confirmPasswordInput.setCustomValidity('');
    }
});

// Also, clear the custom validity message when the user starts typing again
confirmPasswordInput.addEventListener('input', function() {
    confirmPasswordInput.setCustomValidity('');
});
</script>

View Output