Confetti Effect When Submitting a Divi Contact Form




Are you looking to add a captivating touch to celebrate every time a user submits your Divi Contact Form module? Well, we’ve got just the thing for you!

This Divi Code snippet elevates the user experience by introducing a confetti effect to the submission of your Divi Contact Form module. Upon clicking the submit button, some vibrant confetti particles burst onto the screen, crafting an exhilarating visual spectacle. This infusion of excitement and interaction enhances the form submission process on any website built with the Divi theme.

Snippets Demo

Demo of Confetti Effect when Submitting a Divi Contact 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 Javascript 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 Theme Options

// 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.

    // 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.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.

Related Snippets

Explore more from Divi Engine