Create a Confetti Explosion Thank You Page For Your Contact Form

In a recent client project, where I also created the skewed testimonials carousel, I created a contact form using Gravity Forms. This form allows potential clients to contact the owner, book personal training sessions in, and more. To add a special touch, I implemented a little feature that redirects users to a ‘thank you’ page with an exciting confetti explosion 🎉 when the form is submitted.

I’ll be using the awesome canvas confetti library from Kiril Vatev which makes it a breeze to achieve this confetti explosion effect. You can view the demo here.

Vamos!

1. Install the Canvas Confetti Library

I’ll be basing this ‘confetti explosion’ tutorial on the original method I used to create this functionality, specifically with WordPress and its approach. However, you can easily adapt it to other CMS platforms or programming languages as needed.

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

You can install this confetti JavaScript library using NPM, but for the sake of simplicity in this tutorial, I’ll add it via a CDN directly into my WordPress functions.php file, installing it only on the ‘Thank You’ page.

In addition to the confetti script, I have also created and added in a thank-you.js file to my theme > js directory.

function feh_enqueue_thank_you_script() {
   if (is_page('thank-you')) { 
      wp_enqueue_script('canvas-confetti', 'https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js', null, null, true);
      wp_enqueue_script('thank-you', get_template_directory_uri() . '/js/thank-you.js', array('canvas-confetti'), null, true);
   }
}
add_action('wp_enqueue_scripts', 'feh_enqueue_thank_you_script');

2. Add in the Canvas Confetti Code

Next is to open our thank-you.js file and add the magic.

window.onload = function() {
   // Run confetti when the page loads
   setTimeout(function() {
      confetti({
         particleCount: 100,
         spread: 170,
         origin: { y: 0.6 },
         colors: ['#de466c', '#222e44']
      });
   }, 500); 
};

2.1. Let’s Break Down Our Little thank-you.js Script

The code is designed to run a confetti animation 0.5 seconds (500 milliseconds) after the page has fully loaded. The confetti consists of 100 particles, spreads out over a wide angle (170 degrees), originates from slightly above the middle of the screen, and is coloured pink and navy blue.

3. Create a Confetti Explosion Conclusion

This tutorial has walked you through the process of adding a quirky confetti explosion effect to a WordPress site using the Canvas Confetti library. By incorporating this visual feature on a ‘Thank You’ page, you can create a memorable experience for your users after they submit a form. While this example uses Gravity Forms and WordPress, the same approach can easily be adapted to other CMS platforms or custom-built websites. The combination of a simple script and a well-timed animation can significantly enhance user engagement, adding a fun and celebratory touch to your site. Happy coding!