Home
Tanvir Hasan Bappy (Tanvir)
AutoFill Pro - Smart Form Automation

AutoFill Pro - Smart Form Automation

This tailwind example is contributed by Tanvir Hasan Bappy (Tanvir), on 01-Feb-2026. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is Front page

Landing Page

Author Tanvir Hasan Bappy (Tanvir)

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AutoFill Pro - Smart Form Automation</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background: #0f172a;
            overflow-x: hidden;
        }
        
        .font-display {
            font-family: 'Space Grotesk', sans-serif;
        }
        
        /* Animated background */
        .bg-mesh {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: 
                radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.15) 0px, transparent 50%),
                radial-gradient(at 100% 0%, rgba(168, 85, 247, 0.15) 0px, transparent 50%),
                radial-gradient(at 100% 100%, rgba(236, 72, 153, 0.15) 0px, transparent 50%),
                radial-gradient(at 0% 100%, rgba(34, 211, 238, 0.15) 0px, transparent 50%);
            animation: pulse 10s ease-in-out infinite;
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.1); opacity: 0.8; }
        }
        
        /* Floating particles */
        .particle {
            position: fixed;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 50%;
            pointer-events: none;
            animation: float 20s infinite linear;
        }
        
        @keyframes float {
            from { transform: translateY(100vh) rotate(0deg); }
            to { transform: translateY(-100px) rotate(360deg); }
        }
        
        /* Glassmorphism */
        .glass {
            background: rgba(30, 41, 59, 0.7);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        /* Input animations */
        .input-group {
            position: relative;
            transition: all 0.3s ease;
        }
        
        .input-field {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            background: rgba(15, 23, 42, 0.6);
        }
        
        .input-field:focus {
            transform: translateY(-2px);
            box-shadow: 0 10px 40px -10px rgba(99, 102, 241, 0.3);
        }
        
        .input-field.filled {
            border-color: #10b981;
            background: rgba(16, 185, 129, 0.05);
        }
        
        .input-field.filling {
            animation: fillPulse 0.5s ease;
        }
        
        @keyframes fillPulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.02); border-color: #6366f1; }
            100% { transform: scale(1); }
        }
        
        /* Progress bar */
        .progress-container {
            position: relative;
            overflow: hidden;
        }
        
        .progress-fill {
            background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
            background-size: 200% 100%;
            animation: gradient 2s linear infinite;
            transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        @keyframes gradient {
            0% { background-position: 0% 50%; }
            100% { background-position: 200% 50%; }
        }
        
        /* Button effects */
        .btn-magic {
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .btn-magic::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }
        
        .btn-magic:active::before {
            width: 300px;
            height: 300px;
        }
        
        .btn-magic:hover {
            transform: translateY(-2px);
            box-shadow: 0 20px 40px -10px rgba(99, 102, 241, 0.5);
        }
        
        /* Typing cursor effect */
        .typing-cursor::after {
            content: '|';
            animation: blink 1s infinite;
            color: #6366f1;
            margin-left: 2px;
        }
        
        @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0; }
        }
        
        /* Success checkmark */
        .checkmark {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: block;
            stroke-width: 2;
            stroke: #fff;
            stroke-miterlimit: 10;
            box-shadow: inset 0px 0px 0px #10b981;
            animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
        }
        
        .checkmark__circle {
            stroke-dasharray: 166;
            stroke-dashoffset: 166;
            stroke-width: 2;
            stroke-miterlimit: 10;
            stroke: #10b981;
            fill: none;
            animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
        }
        
        .checkmark__check {
            transform-origin: 50% 50%;
            stroke-dasharray: 48;
            stroke-dashoffset: 48;
            animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
        }
        
        @keyframes stroke {
            100% { stroke-dashoffset: 0; }
        }
        
        /* Toast notification */
        .toast {
            transform: translateX(400px);
            transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }
        
        .toast.show {
            transform: translateX(0);
        }
        
        /* Select styling */
        select {
            appearance: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
            background-position: right 0.5rem center;
            background-repeat: no-repeat;
            background-size: 1.5em 1.5em;
        }
        
        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: rgba(15, 23, 42, 0.3);
        }
        ::-webkit-scrollbar-thumb {
            background: rgba(99, 102, 241, 0.5);
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: rgba(99, 102, 241, 0.8);
        }
    </style>
</head>
<body class="text-slate-200 min-h-screen flex items-center justify-center p-4">

<div class="bg-mesh"></div>
    <div id="particles"></div>

<div class="w-full max-w-4xl relative z-10">
        
        
        <div class="text-center mb-8 space-y-2">
            <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass text-sm text-indigo-300 mb-4 border border-indigo-500/20">
                <i class="fas fa-wand-magic-sparkles animate-pulse"></i>
                <span>Smart Form Automation</span>
            </div>
            <h1 class="font-display text-5xl md:text-6xl font-bold bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
                AutoFill Pro
            </h1>
            <p class="text-slate-400 text-lg">Experience the magic of intelligent form completion</p>
        </div>

<div class="glass rounded-2xl p-6 mb-6 flex flex-wrap gap-4 justify-between items-center">
            <div class="flex items-center gap-4">
                <div class="flex items-center gap-2">
                    <span class="text-sm text-slate-400">Speed:</span>
                    <input type="range" id="speedControl" min="1" max="5" value="3" class="w-32 accent-indigo-500">
                    <span id="speedLabel" class="text-sm font-mono text-indigo-400">Normal</span>
                </div>
            </div>
            <div class="flex gap-3">
                <button onclick="clearForm()" class="px-4 py-2 rounded-lg border border-slate-600 hover:border-slate-400 text-slate-400 hover:text-white transition-all text-sm">
                    <i class="fas fa-trash-alt mr-2"></i>Clear
                </button>
                <button onclick="autoFill()" class="btn-magic px-6 py-2 rounded-lg bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium shadow-lg shadow-indigo-500/25">
                    <i class="fas fa-magic mr-2"></i>Auto Fill
                </button>
            </div>
        </div>

<div class="mb-6 progress-container h-2 bg-slate-800 rounded-full overflow-hidden">
            <div id="progressBar" class="progress-fill h-full w-0 rounded-full"></div>
        </div>

<div class="glass rounded-3xl p-8 md:p-10 shadow-2xl">
            <form id="autoForm" class="space-y-6" onsubmit="event.preventDefault(); submitForm();">
                
                
                <div class="space-y-4">
                    <div class="flex items-center gap-2 mb-4 text-indigo-300">
                        <i class="fas fa-user-circle"></i>
                        <h3 class="font-display font-semibold">Personal Information</h3>
                    </div>
                    
                    <div class="grid md:grid-cols-2 gap-6">
                        <div class="input-group">
                            <label class="block text-sm font-medium text-slate-400 mb-2">Full Name</label>
                            <div class="relative">
                                <input type="text" id="fullName" class="input-field w-full px-4 py-3 rounded-xl border border-slate-700 text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500" placeholder="John Doe">
                                <i class="fas fa-check-circle absolute right-3 top-1/2 -translate-y-1/2 text-emerald-500 opacity-0 transition-opacity check-icon"></i>
                            </div>
                        </div>
                        
                        <div class="input-group">
                            <label class="block text-sm font-medium text-slate-400 mb-2">Email Address</label>
                            <div class="relative">
                                <input type="email" id="email" class="input-field w-full px-4 py-3 rounded-xl border border-slate-700 text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500" placeholder="john@example.com">
                                <i class="fas fa-check-circle absolute right-3 top-1/2 -translate-y-1/2 text-emerald-500 opacity-0 transition-opacity check-icon"></i>
                            </div>
                        </div>
                    </div>

<div class="grid md:grid-cols-2 gap-6">
                        <div class="input-group">
                            <label class="block text-sm font-medium text-slate-400 mb-2">Phone Number</label>
                            <div class="relative">
                                <input type="tel" id="phone" class="input-field w-full px-4 py-3 rounded-xl border border-slate-700 text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500" placeholder="+1 (555) 123-4567">
                                <i class="fas fa-check-circle absolute right-3 top-1/2 -translate-y-1/2 text-emerald-500 opacity-0 transition-opacity check-icon"></i>
                            </div>
                        </div>
                        
                        <div class="input-group">
                            <label class="block text-sm font-medium text-slate-400 mb-2">Date of Birth</label>
                            <div class="relative">
                                <input type="date" id="dob" class="input-field w-full px-4 py-3 rounded-xl border border-slate-700 text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500">
                                <i class="fas fa-check-circle absolute right-3 top-1/2 -translate-y-1/2 text-emerald-500 opacity-0 transition-opacity check-icon"></i>
                            </div>
                        </div>
                    </div>
                </div>

<div class="space-y-4 pt-6 border-t border-slate-700/50">
                    <div class="flex items-center gap-2 mb-4 text-purple-300">
                        <i class="fas fa-map-marker-alt"></i>
                        <h3 class="font-display font-semibold">Address Details</h3>
                    </div>
                    
                    <div class="input-group">
                        <label class="block text-sm font-medium text-slate-400 mb-2">Street Address</label>
                        <div class="relative">
                            <input type="text" id="address" class="input-field w-full px-4 py-3 rounded-xl border border-slate-700 text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500" placeholder="123 Innovation Drive">
                            <i class="fas fa-check-circle absolute right-3 top-1/2 -translate-y-1/2 text-emerald-500 opacity-0 transition-opacity check-icon"></i>
                        </div>
                    </div>

<div class="grid md:grid-cols-3 gap-6">
                        <div class="input-group">
                            <label class="block text-sm font-medium text-slate-400 mb-2">City</label>
                            <div class="relative">
                                <input type="text" id="city" class="input-field w-full px-4 py-3 rounded-xl border border-slate-700 text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500" placeholder="San Francisco">
                                <i class="fas fa-check-circle absolute right-3 top-1/2 -translate-y-1/2 text-emerald-500 opacity-0 transition-opacity check-icon"></i>
                            </div>
                        </div>
                        
                        <div class="input-group">
                            <label class="block text-sm font-medium text-slate-400 mb-2">State</label>
                            <div class="relative">
                                <select id="state" class="input-field w-full px-4 py-3 rounded-xl border border-slate-700 text-white focus:outline-none focus:border-indigo-500 appearance-none">
                                    <option value="">Select State</option>
                                    <option value="CA">California</option>
                                    <option value="NY">New York</option>
                                    <option value="TX">Texas</option>
                                    <option value="FL">Florida</option>
                                    <option value="WA">Washington</option>
                                </select>
                                <i class="fas fa-check-circle absolute right-8 top-1/2 -translate-y-1/2 text-emerald-500 opacity-0 transition-opacity check-icon"></i>
                            </div>
                        </div>
                        
                        <div class="input-group">
                            <label class="block text-sm font-medium text-slate-400 mb-2">ZIP Code</label>
                            <div class="relative">
                                <input type="text" id="zip" class="input-field w-full px-4 py-3 rounded-xl border border-slate-700 text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500" placeholder="94102">
                                <i class="fas fa-check-circle absolute right-3 top-1/2 -translate-y-1/2 text-emerald-500 opacity-0 transition-opacity check-icon"></i>
                            </div>
                        </div>
                    </div>
                </div>

<div class="space-y-4 pt-6 border-t border-slate-700/50">
                    <div class="flex items-center gap-2 mb-4 text-pink-300">
                        <i class="fas fa-briefcase"></i>
                        <h3 class="font-display font-semibold">Professional Info</h3>
                    </div>
                    
                    <div class="grid md:grid-cols-2 gap-6">
                        <div class="input-group">
                            <label class="block text-sm font-medium text-slate-400 mb-2">Company</label>
                            <div class="relative">
                                <input type="text" id="company" class="input-field w-full px-4 py-3 rounded-xl border border-slate-700 text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500" placeholder="Tech Corp Inc.">
                                <i class="fas fa-check-circle absolute right-3 top-1/2 -translate-y-1/2 text-emerald-500 opacity-0 transition-opacity check-icon"></i>
                            </div>
                        </div>
                        
                        <div class="input-group">
                            <label class="block text-sm font-medium text-slate-400 mb-2">Job Title</label>
                            <div class="relative">
                                <input type="text" id="jobTitle" class="input-field w-full px-4 py-3 rounded-xl border border-slate-700 text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500" placeholder="Senior Developer">
                                <i class="fas fa-check-circle absolute right-3 top-1/2 -translate-y-1/2 text-emerald-500 opacity-0 transition-opacity check-icon"></i>
                            </div>
                        </div>
                    </div>

<div class="pt-6">
                    <button type="submit" id="submitBtn" class="w-full py-4 rounded-xl bg-gradient-to-r from-emerald-600 to-teal-600 text-white font-semibold text-lg shadow-lg shadow-emerald-500/25 hover:shadow-emerald-500/40 transform hover:-translate-y-1 transition-all duration-300 flex items-center justify-center gap-2 group">
                        <span>Complete Registration</span>
                        <i class="fas fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
                    </button>
                </div>
            </form>
        </div>

<div class="mt-6 grid grid-cols-3 gap-4 text-center">
            <div class="glass rounded-xl p-4">
                <div class="text-2xl font-bold text-indigo-400 font-display" id="fieldCount">0/10</div>
                <div class="text-xs text-slate-500 uppercase tracking-wider mt-1">Fields Filled</div>
            </div>
            <div class="glass rounded-xl p-4">
                <div class="text-2xl font-bold text-purple-400 font-display" id="timeSaved">0s</div>
                <div class="text-xs text-slate-500 uppercase tracking-wider mt-1">Time Saved</div>
            </div>
            <div class="glass rounded-xl p-4">
                <div class="text-2xl font-bold text-pink-400 font-display" id="accuracyRate">100%</div>
                <div class="text-xs text-slate-500 uppercase tracking-wider mt-1">Accuracy</div>
            </div>
        </div>
    </div>

<div id="toast" class="toast fixed top-6 right-6 glass rounded-xl p-4 flex items-center gap-3 shadow-2xl border border-emerald-500/20 z-50">
        <div class="w-10 h-10 rounded-full bg-emerald-500/20 flex items-center justify-center">
            <svg class="checkmark w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
                <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/>
                <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
            </svg>
        </div>
        <div>
            <h4 class="font-semibold text-emerald-400">Success!</h4>
            <p class="text-sm text-slate-400">Form completed automatically</p>
        </div>
    </div>

// Speed configurations
        const speeds = {
            1: { delay: 100, label: 'Fast' },
            2: { delay: 50, label: 'Normal' },
            3: { delay: 30, label: 'Slow' },
            4: { delay: 15, label: 'Dramatic' },
            5: { delay: 5, label: 'Instant' }
        };

let isFilling = false;

// Initialize particles
        function createParticles() {
            const container = document.getElementById('particles');
            for (let i = 0; i < 20; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.width = Math.random() * 100 + 'px';
                particle.style.height = particle.style.width;
                particle.style.left = Math.random() * 100 + '%';
                particle.style.animationDelay = Math.random() * 20 + 's';
                particle.style.animationDuration = (Math.random() * 20 + 20) + 's';
                container.appendChild(particle);
            }
        }

createParticles();

// Speed control
        document.getElementById('speedControl').addEventListener('input', (e) => {
            document.getElementById('speedLabel').textContent = speeds[e.target.value].label;
        });

// Typing effect function
        async function typeText(element, text, speed) {
            element.value = '';
            element.classList.add('filling');
            element.focus();
            
            const charDelay = speed === 5 ? 0 : speeds[speed].delay;
            
            for (let i = 0; i < text.length; i++) {
                if (speed === 5) {
                    element.value = text;
                } else {
                    element.value += text[i];
                    await sleep(charDelay);
                }
                
                // Update progress
                updateProgress();
            }
            
            element.classList.remove('filling');
            element.classList.add('filled');
            element.blur();
            
            // Show checkmark
            const checkIcon = element.parentElement.querySelector('.check-icon');
            if (checkIcon) checkIcon.style.opacity = '1';
            
            updateStats();
        }

function sleep(ms) {
            return new Promise(resolve => setTimeout(resolve, ms));
        }

async function autoFill() {
            if (isFilling) return;
            isFilling = true;
            
            const speed = parseInt(document.getElementById('speedControl').value);
            const fields = ['fullName', 'email', 'phone', 'dob', 'address', 'city', 'state', 'zip', 'company', 'jobTitle', 'bio'];
            
            // Reset form first
            clearForm(false);
            
            const startTime = Date.now();
            
            for (let i = 0; i < fields.length; i++) {
                const field = document.getElementById(fields[i]);
                const value = sampleData[fields[i]];
                
                if (field && value) {
                    // Scroll to field
                    field.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    
                    if (field.tagName === 'SELECT') {
                        field.value = value;
                        field.classList.add('filled');
                        const checkIcon = field.parentElement.querySelector('.check-icon');
                        if (checkIcon) checkIcon.style.opacity = '1';
                        updateProgress();
                        updateStats();
                        await sleep(300);
                    } else {
                        await typeText(field, value, speed);
                        await sleep(200);
                    }
                }
            }
            
            // Calculate time saved
            const timeSaved = Math.floor((Date.now() - startTime) / 1000);
            document.getElementById('timeSaved').textContent = timeSaved + 's';
            
            // Show success toast
            showToast();
            
            isFilling = false;
            
            // Flash success on submit button
            const submitBtn = document.getElementById('submitBtn');
            submitBtn.classList.add('ring-4', 'ring-emerald-500/50');
            setTimeout(() => submitBtn.classList.remove('ring-4', 'ring-emerald-500/50'), 1000);
        }

function updateProgress() {
            const inputs = document.querySelectorAll('.input-field');
            const filled = document.querySelectorAll('.input-field.filled');
            const percent = (filled.length / inputs.length) * 100;
            document.getElementById('progressBar').style.width = percent + '%';
        }

function showToast() {
            const toast = document.getElementById('toast');
            toast.classList.add('show');
            setTimeout(() => toast.classList.remove('show'), 3000);
        }

// Add input listeners for manual typing
        document.querySelectorAll('.input-field').forEach(input => {
            input.addEventListener('input', function() {
                if (this.value) {
                    this.classList.add('filled');
                    const checkIcon = this.parentElement.querySelector('.check-icon');
                    if (checkIcon) checkIcon.style.opacity = '1';
                } else {
                    this.classList.remove('filled');
                    const checkIcon = this.parentElement.querySelector('.check-icon');
                    if (checkIcon) checkIcon.style.opacity = '0';
                }
                updateProgress();
                updateStats();
            });
        });

// Initialize stats
        updateStats();
    </script>
</body>
</html>

Related Examples