How to Add Confetti Falling Animation to Bricks Builder Form

Have you seen the stuff falling down animation when we upvote ideas on Bricks Builder Idea Page? Their website using javascript library called Confetti Js. Lets try to do the same thing on our form element submission.

First thing is, we enqueue the Confetti js file using this code below:

function enqueue_form_lib_js() {
  if ( ! bricks_is_builder_main() ) {
      wp_enqueue_script('mangwp-confetti', 'https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js', array(), '', true);
  }
}
add_action('wp_enqueue_scripts','enqueue_form_lib_js');

Its better to download the js locally than load it from external sources. Next step is to initialize the Confetti js after successfully form submission using this code below:

function custom_load_js()
{
?>
  <script>
document.addEventListener('bricks/form/success', function(event) {
  // Access the element ID
  const elementId = event.detail.elementId;
  // Access the form data
  const formData = event.detail.formData;
  // Access the raw response from AJAX
  const res = event.detail.res;
  if (elementId === 'cawbqg') {
    // Call the basic function to trigger confetti
    makeItRain();
  }
});
function makeItRain() {
  var end = Date.now() + (2 * 1000);
// go Buckeyes!
var colors = ['#bb0000', '#ffffff'];
function frame() {
  confetti({
    particleCount: 2,
    angle: 60,
    spread: 100,
    origin: { x: 0 },
    colors: colors
  });
  confetti({
    particleCount: 2,
    angle: 120,
    spread: 100,
    origin: { x: 1 },
    colors: colors
  });

  if (Date.now() < end) {
    requestAnimationFrame(frame);
  }

};
  frame();
}
function randomInRange(min, max) {
  return Math.random() * (max - min) + min;
}
</script>
<?php
}
add_action('wp_footer', 'custom_load_js', 99);

Change “cawbqg” to the actual form id. And but of course, you can customize the confetti option to suit what you need. Go ahead to their website to see documentation and more example.