Confetti Effect When Submitting a Divi Contact Form

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

                        <script>
// Event listener for when the DOM (Document Object Model) is fully loaded.
document.addEventListener('DOMContentLoaded', function() {

    // Selects the first submit button within the Divi Contact Form module.
    var submitButton = document.querySelector('.et_pb_contact_submit');

    // Checks if the submit button exists to prevent errors if the button is not found.
    if (submitButton) {
        // Adds a new class 'confetti-button' to the submit button for later reference.
        submitButton.classList.add('confetti-button');
    }

    // Selects the button with the class 'confetti-button'.
    const confettiButton = document.querySelector('.confetti-button');

    // Checks if the confetti button exists to avoid errors.
    if (confettiButton) {
        // Attaches an event listener for a 'click' event on the confetti button.
        confettiButton.addEventListener('click', function(event) {
            // Gets the position and dimensions of the confetti button.
            const rect = confettiButton.getBoundingClientRect();

            // Calculates the horizontal (x) and vertical (y) center points of the button.
            const x = (rect.left + rect.right) / 2;
            const y = (rect.top + rect.bottom) / 2;

            // Defines settings for the confetti effect.
            const confettiSettings = {
                particleCount: 100, // Number of confetti particles.
                spread: 70,        // Spread angle of the confetti.
                // Sets the origin point for the confetti effect based on button's position.
                origin: { x: x / window.innerWidth, y: y / window.innerHeight }
            };

            // Triggers the confetti effect with the defined settings.
            confetti(confettiSettings);
        });
    }
});
</script>