Custom code to add confetti on submitting a form

Custom Coding
1

Just paste this code in your page settings → Custom code → Footer, replace the BLOCKID with your block name, save and preview. Submit your form and let the magic happen :tada:

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
<script>
window.addEventListener('submit-form-success-BLOCKID', (e) => {
    let count = 200;
    let defaults = {origin: { y: 0.7 }};
    function fire(particleRatio, opts) {
        confetti(Object.assign({}, defaults, opts, {
            particleCount: Math.floor(count * particleRatio)
        }));
    }
  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,
  });
});
</script>
5 Likes
2

Neat! Thank you

3

Will this code work with on a form block only or any block that has a button of “significance” warranting a confetti explosion :slight_smile: ?

4

Thanks for this!!

5

Also wondering this!

6

Tested this out, it works with any block aslong as you use the correct event listener!

for my use case it was: update-record-success-BLOCKID

Hope this helps anyone thinking the same thing!