Are you interested in creating animated form effects but don’t have time to learn the ins and out of CSS transitions? Perhaps you are looking for a way to jazz up your WordPress form experience. If so, let me introduce you to WP Sunshine’s, Confetti plugin
Confetti is a jubilant little plugin that adds a festive confetti style animation anywhere on your site through the use of blocks and shortcodes. Confetti offers premium users utilizing Ninja Forms, access to this celebratory style animation to their WordPress form confirmation/success pages.
To find out how you can add Confetti using our WordPress form builder and give your subscribers a delightful surprise 🥳 keep reading.
Setting Up Confetti for WordPress
First, you will need to buy the premium version of the plugin.
You can do that by going to WP Shunshine’s website. Confetti premium includes WordPress form and plugin integrations as well as styling and placement features. They offer 3 different licenses types; single-site $19.00, up-to-5-site $49.00, and unlimited $79.00.
Next, install and activate the plugin ( WP Dashboard > Plugins > Add New > Upload Plugin > Choose File ).
Confetti Dashboard
WP Dashboard > Settings > Confetti is where you will access the plugin dashboard. The dashboard includes Settings, Addons, and License.
Style
Here is where you can pick which type of confetti animation you would like to appear on your WordPress confirmation/success page. Currently, there are six different types of animations to choose from which include:
- Basic Cannon
- Realistic Cannon
- Repeating Cannon
- Fireworks
- School Pride
- Falling
Display Settings
This is where you can customize the confetti colors, particles, launch angles, and more.
Adding Confetti to Your WordPress Form
To add the confetti effect to your WordPress forms confirmation/success page navigate to the Email & Actions of your form. You can get there by opening the form you wish to add the effect to and clicking Email & Actions from the form menu.
If you don’t see a Success Message action, you can add one by clicking the blue/+ icon at the bottom right and searching for Success Message. Enter the {confetti} merge tag anywhere in the message field of the Success Message action and publish your form.
The animation works when your user completes the form and is redirected to the Success Message. The CSS effect will trigger, providing your user with a surprise hit of dopamine rewarding them for their subscription efforts. You will know you have set up the animation correctly when you see confetti appear in the Success Message after submitting the form.
The {confetti} merge tag will only work in the Success Message at the time of this writing, so spare yourself the side-quest and don’t try adding the tag to other actions or hidden fields. It’s not gonna work.
Final Thoughts
I really like what the WP Sunshine team has created and I think it has a lot of potential. For those of us who don’t want to touch CSS animation with a ten-fit pole, I think this is a great pick-up. Derek Ashauer who is the Lead Developer with WP Sunshine is easy to work with and confidently answered all my questions.
Eventually, I would like to see the Confetti plugin come with the option to add animation to WordPress form buttons. Clicking your submit button and having a confetti animation automatically appear would be so much fun for users in my opinion. Additionally, it may even encourage additional form completion, who knows 🥳?
Besides Ninja Forms, Confetti includes integrations for Easy Digital Downloads as well as Woocommerce. Adding Confetti to your EDD purchase receipt and Woocmmerce order buttons is an easy way to create a memorable shopping experience that you are sure to get noticed for 🥳
