Fire Confetti🎉 When Submitting a Form

Please note that this is now available as a plugin for easier installation. While you can use this document as a reference, the recommended method to add this functionality is through the plugin installation wizard. Learn more about plugins here. 

Have you ever wanted to really celebrate a user submitting a form in your app? Well, now you can.

Step 1

In settings, add the following code to the header of your app. 

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js"></script>

Step 2

In the JavaScript tab of your page that contains the form component add the following code. 

var count = 200;
var defaults = {
    origin: {
        y: 0.7
    }
};

function fire(particleRatio, opts) {
    confetti(Object.assign({}, defaults, opts, {
        particleCount: Math.floor(count * particleRatio)
    }));
}

TB.render('component_3', function(data) {
    data.ele.find('.btn-success').on('click', function() {
        fire(0.25, {
            spread: 26,
            startVelocity: 55,
        });
        fire(0.2, {
            spread: 60,
        });
        fire(0.35, {
            spread: 100,
            decay: 0.91,
            scalar: 0.8
        });
        fire(0.1, {
            spread: 120,
            startVelocity: 25,
            decay: 0.92,
            scalar: 1.2
        });
        fire(0.1, {
            spread: 120,
            startVelocity: 45,
        });
    });
});

Remember to change the component ID within the code to the ID of your form. In this example, I would need to change mine to component_8.

Original Community Post:

Fire confetti when submitting a form....because why not?! 🎉 - Community Discussions / Tips and Tricks - Tadabase Community