[How-to] Add an Animated Confetti Background on Form Submit 🎉 🎊

design
forms

#1

Let’s be honest. Each time you get a new lead notification email in your inbox, you probably feel like celebrating. And who wouldn’t? New leads means more potential business.

But sometimes we get so wrapped up in convincing people to sign-up that we forget about the post-click experience all together. The truth is, your new leads should be just as excited as you are. After all, they just signed up to receive something exciting from you… whether it be a special offer, newsletter, ebook, etc. To

Here’s a super simple way to inject a little ‘celebration’ into your post-click experience. :tada:

Check out the effect (built in Unbounce) here:
http://landingpage.noahmatsell.ca/confetti-confirmation/

confetti 7


How to Install in Unbounce

Click Here for Instructions

:rotating_light: WARNING: YOU ARE ENTERING DEVELOPER TERRITORY :rotating_light:
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.


Step 1.

Go grab the latest version of the javascript and CSS files here: https://gist.github.com/noahub/83733fae847d94e17e9835d5d4419109

Step 2.

Create your landing page form and style the form confirmation dialog to your liking.

Step 3.

  • Open the Javascripts console and click +Add New Javascript
  • Name your new script Confetti [JS]
  • Set the placement to Before Body End Tag
  • Paste the script 1-confetti.js into the editor and click Save Code

instruction gif

Step 4.

  • Open your Stylesheets console and click +Add New Stylesheet
  • Name your new stylesheet Confetti [CSS]
  • Make sure Soft Wrap is selected
  • Paste the CSS script 2-confetti.css into the editor and click Save Code

instructions 2

Step 5.

Save and Republish your landing page. Be sure to test out the published version of the page.

Step 6.

Celebrate. :champagne: :confetti_ball:


That’s it!

If you want to play around in the code a bit, you can tweak a few things such as the colours to make the confetti more on-brand.

If you end up using this on your next landing page, be sure to come back and share with the Community! :slight_smile:



Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks


The Ultimate List of Unbounce Tips, Scripts & Hacks
The Ultimate List of Unbounce Tips, Scripts & Hacks
#2

#3

I just tried this out. Soooo simple, but so freaking delightful.

Keep 'em coming @Noah ! :noah::tada:


#4

This is very cool.
Hey does the JS and CSS go into the form confirmation page or the main page. It’s not working for me for some reason. I put the all code on the main page.


#5

Sorry to hear @Ben_Carew. All of the code should go on the main page, and it’s important that the JS snippet is set to ‘Before Body End Tag’. If it is, feel free to dm me your page and I’ll take a look!


#6

Hi Noah - I just tried it on another machine and apparently it was a caching issue on the original machine - all good now - loving it!


#7

Hey @Noah this is awesome! Is there a way to make it rain confetti when a users clicks a button? i.e. to download a file or see a lightbox?


#8

@Noah is currently at a workshop with Google right now, so he might be able to reply back right away. Just wanted to give you a heads up @Zoe_Tattersall!


#9

Cheers! No rush, confetti is :tada:important:tada: … but it’s not going to hold up my page :joy::wink:


#10

Hey @Noah, just wondering if you saw my question above? :tada::slight_smile:


#11

OK I’ve got a form on my page now and soooo keen for confetti – but it’s not working for some reason.
This is the page I’ve set it up on – http://www.zoetattersall.com/

Please help! :slight_smile:


#12

Awesome script! Perfect for a Bday Promo LP I’m doing!! nice work!


#14

Same question as Zoe! I would like it for a specific lightbox button on my page. Any help?

I did try the above though but that didn’t work for my case.


#15

Is this only going to work with the form confirm dialogue? I typically use redirects so I can easily track results from Adwords/FB on a thank you page. Wonder if it is possible to somehow use it in that sequence.