Premium Registration Form template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Premium Registration Experience</title>
    
 
</head>
<body class="premium-gradient min-h-screen flex items-center justify-center p-4 relative overflow-hidden">
    
    <div class="floating-orb"></div>
    <div class="floating-orb"></div>
    <div class="floating-orb"></div>
    <div class="floating-orb"></div>
    
    
    <div class="entrance-animation glass-morphism rounded-3xl p-10 w-full max-w-lg shadow-2xl relative">
        
        <div class="text-center mb-8">
            <div class="w-20 h-20 bg-gradient-to-br from-white/20 to-white/10 rounded-2xl flex items-center justify-center mx-auto mb-6 backdrop-blur-sm border border-white/20">
                <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path>
                </svg>
            </div>
            <h1 class="text-4xl font-bold text-white mb-3 bg-gradient-to-r from-white to-white/80 bg-clip-text">Create Account</h1>
            <p class="text-white/70 text-lg">Join us and start your journey today</p>
        </div>
        
        
        <div class="progress-steps">
            <div class="step active" data-step="1">
                <div class="step-circle">
                    <span class="text-white text-sm font-semibold">1</span>
                </div>
                <div class="step-label">Personal Info</div>
            </div>
            <div class="step" data-step="2">
                <div class="step-circle">
                    <span class="text-white text-sm font-semibold">2</span>
                </div>
                <div class="step-label">Account Setup</div>
            </div>
            <div class="step" data-step="3">
                <div class="step-circle">
                    <span class="text-white text-sm font-semibold">3</span>
                </div>
                <div class="step-label">Verification</div>
            </div>
        </div>
        
        
        <form id="registrationForm" class="space-y-6">
            
            <div id="step1" class="step-content">
                
                <div class="input-container">
                    <div class="relative">
                        <svg class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-white/60 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                        <input 
                            type="text" 
                            id="firstName" 
                            name="firstName"
                            class="premium-input ripple-effect"
                            placeholder=" "
                            required
                        >
                        <label class="floating-label" for="firstName">First Name</label>
                    </div>
                </div>
                
                
                <div class="input-container">
                    <div class="relative">
                        <svg class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-white/60 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                        <input 
                            type="text" 
                            id="lastName" 
                            name="lastName"
                            class="premium-input ripple-effect"
                            placeholder=" "
                            required
                        >
                        <label class="floating-label" for="lastName">Last Name</label>
                    </div>
                </div>
                
                
                <div class="input-container">
                    <div class="relative">
                        <svg class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-white/60 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path>
                        </svg>
                        <input 
                            type="email" 
                            id="email" 
                            name="email"
                            class="premium-input ripple-effect"
                            placeholder=" "
                            required
                        >
                        <label class="floating-label" for="email">Email Address</label>
                    </div>
                </div>
                
                
                <div class="input-container">
                    <div class="relative">
                        <svg class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-white/60 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                        </svg>
                        <input 
                            type="tel" 
                            id="phone" 
                            name="phone"
                            class="premium-input ripple-effect"
                            placeholder=" "
                            required
                        >
                        <label class="floating-label" for="phone">Phone Number</label>
                    </div>
                </div>
            </div>
            
            
            <div id="step2" class="step-content hidden">
                
                <div class="input-container">
                    <div class="relative">
                        <svg class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-white/60 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <input 
                            type="text" 
                            id="username" 
                            name="username"
                            class="premium-input ripple-effect"
                            placeholder=" "
                            required
                        >
                        <label class="floating-label" for="username">Username</label>
                    </div>
                </div>
                
                
                <div class="input-container">
                    <div class="relative">
                        <svg class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-white/60 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                        </svg>
                        <input 
                            type="password" 
                            id="password" 
                            name="password"
                            class="premium-input ripple-effect"
                            placeholder=" "
                            required
                        >
                        <label class="floating-label" for="password">Password</label>
                        <button type="button" id="togglePassword" class="absolute right-4 top-1/2 transform -translate-y-1/2 text-white/60 hover:text-white transition-colors z-10">
                            <svg id="eyeIcon" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                            </svg>
                        </button>
                    </div>
                    <div class="strength-meter">
                        <div id="strengthFill" class="strength-fill" style="width: 0%"></div>
                    </div>
                    <div id="strengthText" class="text-xs text-white/60 mt-1"></div>
                </div>
                
                
                <div class="input-container">
                    <div class="relative">
                        <svg class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-white/60 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <input 
                            type="password" 
                            id="confirmPassword" 
                            name="confirmPassword"
                            class="premium-input ripple-effect"
                            placeholder=" "
                            required
                        >
                        <label class="floating-label" for="confirmPassword">Confirm Password</label>
                    </div>
                </div>
            </div>
            
            
            <div id="step3" class="step-content hidden">
                
                <div class="terms-checkbox">
                    <div class="custom-checkbox" id="termsCheckbox">
                        <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
                        </svg>
                    </div>
                    <label class="text-white/80 text-sm leading-relaxed cursor-pointer" for="terms">
                        I agree to the <a href="#" class="text-white hover:underline font-medium">Terms of Service</a> and <a href="#" class="text-white hover:underline font-medium">Privacy Policy</a>
                    </label>
                    <input type="checkbox" id="terms" name="terms" class="sr-only" required>
                </div>
                
                
                <div class="terms-checkbox">
                    <div class="custom-checkbox" id="newsletterCheckbox">
                        <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
                        </svg>
                    </div>
                    <label class="text-white/80 text-sm leading-relaxed cursor-pointer" for="newsletter">
                        Subscribe to our newsletter for updates and exclusive offers
                    </label>
                    <input type="checkbox" id="newsletter" name="newsletter" class="sr-only">
                </div>
            </div>
            
            
            <div class="flex gap-4 mt-8">
                <button type="button" id="prevBtn" class="premium-button ripple-effect hidden flex-1">
                    <span>Previous</span>
                </button>
                <button type="button" id="nextBtn" class="premium-button ripple-effect flex-1">
                    <span id="nextBtnText">Next</span>
                    <div id="loadingDots" class="loading-dots hidden">
                        <div class="loading-dot"></div>
                        <div class="loading-dot"></div>
                        <div class="loading-dot"></div>
                    </div>
                </button>
            </div>
            
            
            <div class="relative my-8">
                <div class="absolute inset-0 flex items-center">
                    <div class="w-full border-t border-white/20"></div>
                </div>
                <div class="relative flex justify-center">
                    <span class="px-4 bg-transparent text-white/60 text-sm">Or sign up with</span>
                </div>
            </div>
            
            
            <div class="grid grid-cols-3 gap-4">
                <button type="button" class="social-button ripple-effect" data-provider="Google">
                    <svg class="w-5 h-5" viewBox="0 0 24 24">
                        <path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                        <path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                        <path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                        <path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
                    </svg>
                </button>
                <button type="button" class="social-button ripple-effect" data-provider="Apple">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
                    </svg>
                </button>
                <button type="button" class="social-button ripple-effect" data-provider="GitHub">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                    </svg>
                </button>
            </div>
            
            
            <div class="text-center mt-8">
                <p class="text-white/70">
                    Already have an account? 
                    <a href="#" class="text-white hover:underline font-semibold ml-1">Sign in here</a>
                </p>
            </div>
        </form>
    </div>
    
    
    <div id="successModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 opacity-0 pointer-events-none transition-all duration-500 z-50">
        <div class="glass-morphism rounded-2xl p-8 text-center max-w-sm w-full transform scale-75 transition-transform duration-500">
            <div class="success-checkmark">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
                </svg>
            </div>
            <h3 class="text-2xl font-bold text-white mb-2">Welcome Aboard!</h3>
            <p class="text-white/80">Your account has been created successfully. Please check your email for verification.</p>
        </div>
    </div>
    
    
    <div id="notification" class="notification">
        <div class="flex items-center">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <span id="notificationText"></span>
        </div>
    </div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
        
        * {
            font-family: 'Inter', sans-serif;
        }
        
        .premium-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
            background-size: 400% 400%;
            animation: gradientShift 15s ease infinite;
        }
        
        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .glass-morphism {
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
        }
        
        .floating-orb {
            position: absolute;
            border-radius: 50%;
            background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
            animation: floatOrb 8s ease-in-out infinite;
            filter: blur(1px);
        }
        
        .floating-orb:nth-child(1) {
            width: 80px;
            height: 80px;
            top: 10%;
            left: 10%;
            animation-delay: 0s;
        }
        
        .floating-orb:nth-child(2) {
            width: 120px;
            height: 120px;
            top: 20%;
            right: 10%;
            animation-delay: -2s;
        }
        
        .floating-orb:nth-child(3) {
            width: 60px;
            height: 60px;
            bottom: 30%;
            left: 15%;
            animation-delay: -4s;
        }
        
        .floating-orb:nth-child(4) {
            width: 100px;
            height: 100px;
            bottom: 10%;
            right: 20%;
            animation-delay: -6s;
        }
        
        @keyframes floatOrb {
            0%, 100% { 
                transform: translateY(0px) translateX(0px) rotate(0deg);
                opacity: 0.3;
            }
            25% { 
                transform: translateY(-30px) translateX(20px) rotate(90deg);
                opacity: 0.6;
            }
            50% { 
                transform: translateY(-15px) translateX(-20px) rotate(180deg);
                opacity: 0.4;
            }
            75% { 
                transform: translateY(-25px) translateX(15px) rotate(270deg);
                opacity: 0.5;
            }
        }
        
        .entrance-animation {
            animation: entranceSlide 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        @keyframes entranceSlide {
            0% {
                opacity: 0;
                transform: translateY(50px) scale(0.9);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        
        .input-container {
            position: relative;
            margin-bottom: 1.5rem;
        }
        
        .floating-label {
            position: absolute;
            left: 48px;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(255, 255, 255, 0.6);
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            pointer-events: none;
            font-size: 16px;
        }
        
        .premium-input {
            width: 100%;
            padding: 16px 16px 16px 48px;
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            color: white;
            font-size: 16px;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            outline: none;
        }
        
        .premium-input:focus,
        .premium-input:not(:placeholder-shown) {
            border-color: rgba(255, 255, 255, 0.4);
            background: rgba(255, 255, 255, 0.08);
            transform: translateY(-2px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1);
        }
        
        .premium-input:focus + .floating-label,
        .premium-input:not(:placeholder-shown) + .floating-label {
            top: -8px;
            left: 12px;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.9);
            background: linear-gradient(135deg, #667eea, #764ba2);
            padding: 2px 8px;
            border-radius: 4px;
            font-weight: 500;
        }
        
        .premium-input.valid {
            border-color: rgba(46, 213, 115, 0.6);
        }
        
        .premium-input.invalid {
            border-color: rgba(255, 71, 87, 0.6);
        }
        
        .premium-button {
            position: relative;
            width: 100%;
            padding: 16px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            color: white;
            font-weight: 600;
            font-size: 16px;
            cursor: pointer;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            outline: none;
        }
        
        .premium-button:before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        .premium-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
        }
        
        .premium-button:hover:before {
            left: 100%;
        }
        
        .premium-button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
        
        .social-button {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px 16px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            color: white;
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            overflow: hidden;
        }
        
        .social-button:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .ripple-effect {
            position: relative;
            overflow: hidden;
        }
        
        .ripple {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            transform: scale(0);
            animation: rippleAnimation 0.6s linear;
            pointer-events: none;
        }
        
        @keyframes rippleAnimation {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }
        
        .success-checkmark {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, #4facfe, #00f2fe);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            transform: scale(0);
            animation: checkmarkPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }
        
        @keyframes checkmarkPop {
            to {
                transform: scale(1);
            }
        }
        
        .loading-dots {
            display: inline-flex;
            gap: 4px;
        }
        
        .loading-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: currentColor;
            animation: loadingDots 1.4s ease-in-out infinite both;
        }
        
        .loading-dot:nth-child(1) { animation-delay: -0.32s; }
        .loading-dot:nth-child(2) { animation-delay: -0.16s; }
        .loading-dot:nth-child(3) { animation-delay: 0s; }
        
        @keyframes loadingDots {
            0%, 80%, 100% {
                transform: scale(0);
                opacity: 0.5;
            }
            40% {
                transform: scale(1);
                opacity: 1;
            }
        }
        
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 16px 24px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            color: white;
            transform: translateX(400px);
            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            z-index: 1000;
        }
        
        .notification.show {
            transform: translateX(0);
        }
        
        .strength-meter {
            height: 4px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 2px;
            margin-top: 8px;
            overflow: hidden;
        }
        
        .strength-fill {
            height: 100%;
            border-radius: 2px;
            transition: all 0.3s ease;
            background: linear-gradient(90deg, #ff4757, #ffa502, #2ed573);
        }
        
        .progress-steps {
            display: flex;
            justify-content: space-between;
            margin-bottom: 2rem;
        }
        
        .step {
            flex: 1;
            text-align: center;
            position: relative;
        }
        
        .step:not(:last-child):after {
            content: '';
            position: absolute;
            top: 15px;
            right: -50%;
            width: 100%;
            height: 2px;
            background: rgba(255, 255, 255, 0.2);
            z-index: 1;
        }
        
        .step.active:not(:last-child):after {
            background: linear-gradient(90deg, #4facfe, #00f2fe);
        }
        
        .step-circle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 8px;
            position: relative;
            z-index: 2;
            transition: all 0.3s ease;
        }
        
        .step.active .step-circle {
            background: linear-gradient(135deg, #4facfe, #00f2fe);
            transform: scale(1.1);
        }
        
        .step-label {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.6);
            transition: color 0.3s ease;
        }
        
        .step.active .step-label {
            color: white;
            font-weight: 600;
        }
        
        .terms-checkbox {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin: 1.5rem 0;
        }
        
        .custom-checkbox {
            position: relative;
            width: 20px;
            height: 20px;
            min-width: 20px;
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .custom-checkbox.checked {
            background: linear-gradient(135deg, #4facfe, #00f2fe);
            border-color: #4facfe;
        }
        
        .custom-checkbox svg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            transition: transform 0.2s ease;
        }
        
        .custom-checkbox.checked svg {
            transform: translate(-50%, -50%) scale(1);
        }

JavaScript

class PremiumRegistration {
            constructor() {
                this.currentStep = 1;
                this.totalSteps = 3;
                this.initializeElements();
                this.bindEvents();
                this.initializeAnimations();
            }
            
            initializeElements() {
                this.form = document.getElementById('registrationForm');
                this.prevBtn = document.getElementById('prevBtn');
                this.nextBtn = document.getElementById('nextBtn');
                this.nextBtnText = document.getElementById('nextBtnText');
                this.loadingDots = document.getElementById('loadingDots');
                this.strengthFill = document.getElementById('strengthFill');
                this.strengthText = document.getElementById('strengthText');
                this.successModal = document.getElementById('successModal');
                this.notification = document.getElementById('notification');
                this.notificationText = document.getElementById('notificationText');
                
                // Form inputs
                this.inputs = {
                    firstName: document.getElementById('firstName'),
                    lastName: document.getElementById('lastName'),
                    email: document.getElementById('email'),
                    phone: document.getElementById('phone'),
                    username: document.getElementById('username'),
                    password: document.getElementById('password'),
                    confirmPassword: document.getElementById('confirmPassword'),
                    terms: document.getElementById('terms'),
                    newsletter: document.getElementById('newsletter')
                };
            }
            
            bindEvents() {
                // Navigation buttons
                this.nextBtn.addEventListener('click', () => this.handleNext());
                this.prevBtn.addEventListener('click', () => this.handlePrevious());
                
                // Password toggle
                document.getElementById('togglePassword').addEventListener('click', () => this.togglePasswordVisibility());
                
                // Password strength
                this.inputs.password.addEventListener('input', (e) => this.updatePasswordStrength(e.target.value));
                
                // Password confirmation
                this.inputs.confirmPassword.addEventListener('input', () => this.validatePasswordMatch());
                
                // Custom checkboxes
                document.getElementById('termsCheckbox').addEventListener('click', () => this.toggleCheckbox('terms'));
                document.getElementById('newsletterCheckbox').addEventListener('click', () => this.toggleCheckbox('newsletter'));
                
                // Real-time validation
                Object.values(this.inputs).forEach(input => {
                    if (input.type !== 'checkbox') {
                        input.addEventListener('blur', () => this.validateField(input));
                        input.addEventListener('input', () => this.clearFieldError(input));
                    }
                });
                
                // Social registration
                document.querySelectorAll('.social-button').forEach(button => {
                    button.addEventListener('click', (e) => this.handleSocialRegistration(e));
                });
                
                // Ripple effects
                document.querySelectorAll('.ripple-effect').forEach(element => {
                    element.addEventListener('click', (e) => this.createRipple(e));
                });
            }
            
            initializeAnimations() {
                const elements = document.querySelectorAll('.input-container, .premium-button, .social-button');
                elements.forEach((el, index) => {
                    el.style.animationDelay = `${index * 0.1}s`;
                    el.classList.add('entrance-animation');
                });
            }
            
            async handleNext() {
                if (this.currentStep < this.totalSteps) {
                    if (await this.validateCurrentStep()) {
                        this.currentStep++;
                        this.updateStep();
                    }
                } else {
                    await this.handleSubmit();
                }
            }
            
            handlePrevious() {
                if (this.currentStep > 1) {
                    this.currentStep--;
                    this.updateStep();
                }
            }
            
            updateStep() {
                // Update progress indicators
                document.querySelectorAll('.step').forEach((step, index) => {
                    if (index + 1 <= this.currentStep) {
                        step.classList.add('active');
                    } else {
                        step.classList.remove('active');
                    }
                });
                
                // Show/hide step content
                document.querySelectorAll('.step-content').forEach((content, index) => {
                    if (index + 1 === this.currentStep) {
                        content.classList.remove('hidden');
                        content.style.animation = 'entranceSlide 0.6s ease-out';
                    } else {
                        content.classList.add('hidden');
                    }
                });
                
                // Update navigation buttons
                this.prevBtn.classList.toggle('hidden', this.currentStep === 1);
                this.nextBtnText.textContent = this.currentStep === this.totalSteps ? 'Create Account' : 'Next';
            }
            
            async validateCurrentStep() {
                const stepFields = this.getStepFields(this.currentStep);
                let isValid = true;
                
                for (const field of stepFields) {
                    if (!this.validateField(field)) {
                        isValid = false;
                    }
                }
                
                if (this.currentStep === 2) {
                    if (!this.validatePasswordMatch()) {
                        isValid = false;
                    }
                }
                
                if (this.currentStep === 3) {
                    if (!this.inputs.terms.checked) {
                        this.showNotification('Please accept the terms and conditions.', 'error');
                        isValid = false;
                    }
                }
                
                return isValid;
            }
            
            getStepFields(step) {
                const fieldMap = {
                    1: [this.inputs.firstName, this.inputs.lastName, this.inputs.email, this.inputs.phone],
                    2: [this.inputs.username, this.inputs.password, this.inputs.confirmPassword],
                    3: []
                };
                return fieldMap[step] || [];
            }
            
            validateField(field) {
                const value = field.value.trim();
                let isValid = true;
                let message = '';
                
                // Required field validation
                if (field.hasAttribute('required') && !value) {
                    isValid = false;
                    message = 'This field is required.';
                }
                
                // Specific field validations
                if (value && field.type === 'email' && !this.isValidEmail(value)) {
                    isValid = false;
                    message = 'Please enter a valid email address.';
                }
                
                if (value && field.id === 'phone' && !this.isValidPhone(value)) {
                    isValid = false;
                    message = 'Please enter a valid phone number.';
                }
                
                if (value && field.id === 'username' && value.length < 3) {
                    isValid = false;
                    message = 'Username must be at least 3 characters long.';
                }
                
                if (value && field.id === 'password' && value.length < 8) {
                    isValid = false;
                    message = 'Password must be at least 8 characters long.';
                }
                
                // Update field appearance
                if (isValid) {
                    field.classList.remove('invalid');
                    field.classList.add('valid');
                } else {
                    field.classList.remove('valid');
                    field.classList.add('invalid');
                    if (message) {
                        this.showNotification(message, 'error');
                    }
                }
                
                return isValid;
            }
            
            validatePasswordMatch() {
                const password = this.inputs.password.value;
                const confirmPassword = this.inputs.confirmPassword.value;
                const isMatch = password === confirmPassword && password.length > 0;
                
                if (confirmPassword && !isMatch) {
                    this.inputs.confirmPassword.classList.add('invalid');
                    this.inputs.confirmPassword.classList.remove('valid');
                    this.showNotification('Passwords do not match.', 'error');
                } else if (confirmPassword) {
                    this.inputs.confirmPassword.classList.remove('invalid');
                    this.inputs.confirmPassword.classList.add('valid');
                }
                
                return isMatch || !confirmPassword;
            }
            
            clearFieldError(field) {
                field.classList.remove('invalid');
            }
            
            isValidEmail(email) {
                return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
            }
            
            isValidPhone(phone) {
                return /^[\+]?[1-9][\d]{0,15}$/.test(phone.replace(/\s/g, ''));
            }
            
            updatePasswordStrength(password) {
                let strength = 0;
                let text = '';
                
                if (password.length >= 8) strength += 25;
                if (password.match(/[a-z]/)) strength += 25;
                if (password.match(/[A-Z]/)) strength += 25;
                if (password.match(/[0-9]/)) strength += 25;
                
                if (strength === 0) text = '';
                else if (strength <= 25) text = 'Weak';
                else if (strength <= 50) text = 'Fair';
                else if (strength <= 75) text = 'Good';
                else text = 'Strong';
                
                this.strengthFill.style.width = `${strength}%`;
                this.strengthText.textContent = text;
            }
            
            togglePasswordVisibility() {
                const passwordInput = this.inputs.password;
                const eyeIcon = document.getElementById('eyeIcon');
                const isPassword = passwordInput.type === 'password';
                
                passwordInput.type = isPassword ? 'text' : 'password';
                
                eyeIcon.innerHTML = isPassword ? 
                    `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21"></path>` :
                    `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>`;
            }
            
            toggleCheckbox(checkboxName) {
                const checkbox = this.inputs[checkboxName];
                const customCheckbox = document.getElementById(checkboxName + 'Checkbox');
                
                checkbox.checked = !checkbox.checked;
                customCheckbox.classList.toggle('checked', checkbox.checked);
            }
            
            async handleSubmit() {
                this.setLoadingState(true);
                
                try {
                    // Simulate API call
                    await this.simulateRegistration();
                    this.showSuccess();
                } catch (error) {
                    this.showNotification('Registration failed. Please try again.', 'error');
                } finally {
                    this.setLoadingState(false);
                }
            }
            
            simulateRegistration() {
                return new Promise((resolve) => {
                    setTimeout(resolve, 2500);
                });
            }
            
            setLoadingState(loading) {
                if (loading) {
                    this.nextBtnText.style.display = 'none';
                    this.loadingDots.classList.remove('hidden');
                    this.nextBtn.disabled = true;
                } else {
                    this.nextBtnText.style.display = 'inline';
                    this.loadingDots.classList.add('hidden');
                    this.nextBtn.disabled = false;
                }
            }
            
            showSuccess() {
                this.successModal.style.opacity = '1';
                this.successModal.style.pointerEvents = 'auto';
                this.successModal.querySelector('.glass-morphism').style.transform = 'scale(1)';
                
                setTimeout(() => {
                    this.hideSuccess();
                }, 4000);
            }
            
            hideSuccess() {
                this.successModal.style.opacity = '0';
                this.successModal.style.pointerEvents = 'none';
                this.successModal.querySelector('.glass-morphism').style.transform = 'scale(0.75)';
            }
            
            showNotification(message, type = 'info') {
                this.notificationText.textContent = message;
                this.notification.classList.add('show');
                
                setTimeout(() => {
                    this.notification.classList.remove('show');
                }, 4000);
            }
            
            handleSocialRegistration(e) {
                const provider = e.currentTarget.dataset.provider;
                this.showNotification(`Redirecting to ${provider} registration...`, 'info');
                
                setTimeout(() => {
                    this.showNotification(`${provider} registration would redirect in a real application.`, 'info');
                }, 1500);
            }
            
            createRipple(e) {
                const button = e.currentTarget;
                const rect = button.getBoundingClientRect();
                const size = Math.max(rect.width, rect.height);
                const x = e.clientX - rect.left - size / 2;
                const y = e.clientY - rect.top - size / 2;
                
                const ripple = document.createElement('div');
                ripple.classList.add('ripple');
                ripple.style.width = ripple.style.height = size + 'px';
                ripple.style.left = x + 'px';
                ripple.style.top = y + 'px';
                
                button.appendChild(ripple);
                
                setTimeout(() => {
                    ripple.remove();
                }, 600);
            }
        }
        
        // Initialize the premium registration experience
        document.addEventListener('DOMContentLoaded', () => {
            new PremiumRegistration();
        });

Premium Registration Form template Preview

Download Options