Confetti Effect when Submitting a Divi Form Builder Form

                        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.js"></script>
                    

                        <script>
document.addEventListener('DOMContentLoaded', function() {
    // Adding the 'confetti-button' class to a specific submit button
    var submitButton = document.querySelector('.divi-form-submit'); //set your selector here
    if (submitButton) {
        submitButton.classList.add('confetti-button'); //confetti-button class being added to the element above

        // Attaching the confetti effect to the button with the 'confetti-button' class
        submitButton.addEventListener('click', function(e) {
            if (!e.target.matches('.confetti-button')) return; // Check if the clicked element has the class

            // Calculate the button's position for the confetti effect
            const rect = submitButton.getBoundingClientRect();
            const x = (rect.left + rect.right) / 2;
            const y = (rect.top + rect.bottom) / 2;

            // Configure confetti settings
            const confettiSettings = {
                particleCount: 100, // Number of particles generated
                spread: 70, // How far do the particles spread from the origin
                origin: { x: x / window.innerWidth, y: y / window.innerHeight } // The center point of where the particles originate from
            };

            // Trigger the confetti effect
            confetti(confettiSettings);
        });
    }
});
</script>