Animate Form Field: each field appears once it is filled out

Description: each field appears once it is filled out
#1. You can use this code to Page Header Injection (page where you use Form Block)
<script>
document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        const form = document.querySelector('.react-form-contents');
        
        if(form) {
            const fields = form.querySelectorAll('.form-item');
            const submitButton = form.querySelector('.form-button-wrapper');
            
            const style = document.createElement('style');
            style.textContent = `
                .field-hidden {
                    opacity: 0;
                    transform: translateY(20px);
                    transition: all 0.5s ease-in-out;
                    pointer-events: none;
                }
                .field-visible {
                    opacity: 1;
                    transform: translateY(0);
                    transition: all 0.5s ease-in-out;
                    pointer-events: auto;
                }
            `;
            document.head.appendChild(style);
            
            fields.forEach((field, index) => {
                if(index === 0) {
                    field.classList.add('field-visible');
                } else {
                    field.classList.add('field-hidden');
                }
            });
            
            if(submitButton) {
                submitButton.classList.add('field-hidden');
            }
            
            function checkFieldCompletion(field) {
                const inputs = field.querySelectorAll('input[type="text"], input[type="email"]');
                
                if(field.classList.contains('name')) {
                    const firstName = field.querySelector('input[name="fname"]');
                    const lastName = field.querySelector('input[name="lname"]');
                    return firstName && lastName && firstName.value.trim() !== '' && lastName.value.trim() !== '';
                }
                
                if(field.classList.contains('email')) {
                    const emailInput = field.querySelector('input[type="email"]');
                    return emailInput && emailInput.value.trim() !== '' && emailInput.checkValidity();
                }
                
                if(field.classList.contains('text')) {
                    const textInput = field.querySelector('input[type="text"]');
                    return textInput && textInput.value.trim() !== '';
                }
                
                return false;
            }
            
            function showNextField(currentIndex) {
                if(currentIndex + 1 < fields.length) {
                    const nextField = fields[currentIndex + 1];
                    setTimeout(() => {
                        nextField.classList.remove('field-hidden');
                        nextField.classList.add('field-visible');
                    }, 200);
                } else if(submitButton) {
                    setTimeout(() => {
                        submitButton.classList.remove('field-hidden');
                        submitButton.classList.add('field-visible');
                    }, 200);
                }
            }
            
            function hideNextFields(currentIndex) {
                for(let i = currentIndex + 1; i < fields.length; i++) {
                    fields[i].classList.remove('field-visible');
                    fields[i].classList.add('field-hidden');
                }
                if(submitButton) {
                    submitButton.classList.remove('field-visible');
                    submitButton.classList.add('field-hidden');
                }
            }
            
            fields.forEach((field, index) => {
                const inputs = field.querySelectorAll('input[type="text"], input[type="email"]');
                
                inputs.forEach(input => {
                    input.addEventListener('input', function() {
                        const isCompleted = checkFieldCompletion(field);
                        
                        if(isCompleted) {
                            showNextField(index);
                        } else {
                            hideNextFields(index);
                        }
                    });
                    
                    input.addEventListener('blur', function() {
                        const isCompleted = checkFieldCompletion(field);
                        
                        if(isCompleted) {
                            showNextField(index);
                        } else {
                            hideNextFields(index);
                        }
                    });
                });
            });
        }
    }, 1000);
});
</script>