Home
nejaa badr
Registration Form

Registration Form

Color Updates:
- Changed gradient background to `from-indigo-800 to-blue-900`
- Updated text colors to `text-indigo-800` and `text-indigo-900`
- Changed button colors to match the new theme
- Updated focus rings to use indigo colors

Enhanced Styling:
- Added smooth transitions with `transition-all duration-300`
- Improved shadow with `shadow-2xl`
- Added hover scale effect on button
- Increased border radius to `rounded-xl`
- Added fade-in animation for the form

Improved Validation:
- Added visual feedback for invalid fields
- Added input event listeners to clear error states
- Added trim() to username and email validation
- Added form reset after successful submission

Accessibility Improvements:
- Maintained proper contrast ratios
- Kept focus states visible
- Added proper spacing for better readability
- Ensured all interactive elements are properly styled

Added Interactions:
- Smooth hover transitions
- Scale animation on button hover
- Immediate feedback on input
- Clear error messaging

This tailwind example is contributed by nejaa badr, on 30-Oct-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Form Login Form

Author nejaa badr

582

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registration Form</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gradient-to-r from-indigo-800 to-blue-900 flex items-center justify-center min-h-screen p-4">
    <div class="bg-white rounded-xl shadow-2xl p-8 max-w-md w-full animate-fade-in">
        <h2 class="text-2xl font-bold text-center text-indigo-800 mb-8">Create an Account</h2>
        <form id="registrationForm" class="space-y-6" novalidate>
            <div>
                <label for="username" class="block text-indigo-900 font-semibold mb-2">Username</label>
                <input 
                    type="text" 
                    id="username" 
                    class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-800 transition-all duration-300" 
                    placeholder="Enter your username" 
                    required
                >
                <p class="text-red-500 text-sm mt-2 hidden" id="usernameError">Username is required.</p>
            </div>

<div>
                <label for="email" class="block text-indigo-900 font-semibold mb-2">Email</label>
                <input 
                    type="email" 
                    id="email" 
                    class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-800 transition-all duration-300" 
                    placeholder="Enter your email" 
                    required
                >
                <p class="text-red-500 text-sm mt-2 hidden" id="emailError">Please enter a valid email.</p>
            </div>

<div>
                <label for="password" class="block text-indigo-900 font-semibold mb-2">Password</label>
                <input 
                    type="password" 
                    id="password" 
                    class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-800 transition-all duration-300" 
                    placeholder="Enter your password" 
                    required
                >
                <p class="text-red-500 text-sm mt-2 hidden" id="passwordError">Password is required.</p>
            </div>

<div>
                <label for="confirm-password" class="block text-indigo-900 font-semibold mb-2">Confirm Password</label>
                <input 
                    type="password" 
                    id="confirm-password" 
                    class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-800 transition-all duration-300" 
                    placeholder="Confirm your password" 
                    required
                >
                <p class="text-red-500 text-sm mt-2 hidden" id="confirmPasswordError">Passwords do not match.</p>
            </div>

<button 
                type="submit" 
                class="w-full bg-indigo-800 text-white py-3 rounded-lg font-semibold hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-indigo-800 focus:ring-offset-2 transition-all duration-300 transform hover:scale-[1.02]"
            >
                Register
            </button>
        </form>

<p class="text-center text-gray-600 mt-6">
            Already have an account? 
            <a href="https://tailwindflex.com/@nejaa-badr/login-form-12" class="text-indigo-800 font-semibold hover:text-blue-900 transition-colors duration-300">Sign In</a>
        </p>
    </div>

// Validate username
            const username = document.getElementById('username').value.trim();
            if (!username) {
                document.getElementById('usernameError').classList.remove('hidden');
                isValid = false;
            }

// Validate email
            const email = document.getElementById('email').value.trim();
            const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
            if (!email || !emailPattern.test(email)) {
                document.getElementById('emailError').classList.remove('hidden');
                isValid = false;
            }

// Validate password
            const password = document.getElementById('password').value;
            if (!password) {
                document.getElementById('passwordError').classList.remove('hidden');
                isValid = false;
            }

// Validate confirm password
            const confirmPassword = document.getElementById('confirm-password').value;
            if (password !== confirmPassword) {
                document.getElementById('confirmPasswordError').classList.remove('hidden');
                isValid = false;
            }

// Add visual feedback for invalid fields
            document.querySelectorAll('input').forEach(input => {
                if (!input.value) {
                    input.classList.add('border-red-500');
                } else {
                    input.classList.remove('border-red-500');
                }
            });

if (isValid) {
                // Submit the form if all validations pass
                alert('Form submitted successfully!');
                // Reset form and remove any error states
                document.getElementById('registrationForm').reset();
                document.querySelectorAll('input').forEach(input => {
                    input.classList.remove('border-red-500');
                });
            }
        });

// Remove error state on input
        document.querySelectorAll('input').forEach(input => {
            input.addEventListener('input', function() {
                this.classList.remove('border-red-500');
                const errorElement = document.getElementById(`${this.id}Error`);
                if (errorElement) {
                    errorElement.classList.add('hidden');
                }
            });
        });
    </script>
</body>
</html>

Related Examples