Confetti Effect when Submitting a Divi Form Builder Form



Form Builder


Ever want a super cool effect to celebrate the fact that a user submitted your Divi Form Builder form? Come on…you know you did!

This Divi Code snippet enhances the user experience by adding a confetti effect to a Divi Form Builder form’s submission. When the user clicks the submit button, some colorful confetti particles scatter across the screen, creating a celebratory visual effect. This adds an element of fun and engagement to the form submission process on a website built with the Divi theme.

Snippets Demo

Demo of Adding a Confetti Effect when Submitting a Divi Form Builder Form



This code loads the confetti.browser.js library.

Language: Javascript

Where to add: Divi Code Module

                        <script src="[email protected]/dist/confetti.browser.js"></script>

This code first adds a .confetti-button class to the submit button of the Divi Contact Form Module using jQuery and then listens for a click on the Submit Button. When a click is detected, it then uses the library we loaded to show the confetti when clicked.

Language: Javascript

Where to add: Divi Code Module

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 (!'.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.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

Related Snippets

No related snippets yet

Explore more from Divi Engine