The Ultimate List of Unbounce Tips, Scripts & Hacks


#1

We’ve put together a list of time saving tips, nifty scripts and all-around crafty hacks that allow you to do even more with Unbounce. Some of these tips have been created by our team, but the majority have been submitted by members of our very own community.


Table of Contents


:no_entry: Disclaimer: Read This First :no_entry:

Some of these tips go way beyond the scope of the Unbounce page builder and incorporate third-party elements such as HTML, Javascript and CSS.

Since these scripts are not built-in supported product features, Unbounce is unable to support or guarantee these codes in any way, shape or form. Also be aware that, while rare, the possibility exists for custom scripts to break or lose functionality as we update our app.

These tips are intended to serve as examples for developers looking to try new things with Unbounce. If you are uncomfortable with this, please seek the assistance of an experienced developer before moving forward. In other words, proceed at your own risk. :warning:

We also recommend leaving a comment on each tip that you implement, as it allows our product team to get better visibility into which codes/features are popular in the Community (which in turn gives us better visibility into which features we could build into the app).


Unbounce Builder: Tips, Scripts & Hacks

Looking for ways to push the Unbounce Page Builder even further? Use the tips & scripts below to supercharge your Unbounce Landing Pages and Popups & sticky bars.

:new_orange: = Added Recently
:chart_with_upwards_trend: = Trending
:fire: = Popular

Popupss

Landing Page (Beginner)

These tips are fairly easy to use and require minimal editing of html/javascript/css.

Landing Page (Advanced)

These tips generally require some advanced knowledge of html/javascript/css.


User Submitted Solutions


Testing & Optimization Tips

Conversion Rate Optimization

A/B Testing


Do you have any design, conversion or landing page tips? Or are you doing something super unique with Unbounce but don’t see it listed above?

Write up a tutorial and share it in the Unbounce Community!


[How to] Create Angled Page Sections (aka False Bottoms)
[How-to] Add an Animated Confetti Background on Form Submit 🎉 🎊
[Tips & Scripts] Creating a Fixed Header/Footer (aka Sticky Header)
[How to] Add A Sticky Video Widget
[How-to] Create a Click-Thru + Scroll Convertable
[Tips & Scripts] Sticky Navigation Bar For Desktop - The Code Behind Our Call-To-Action Conference Page
[How To] Trigger A Lightbox On Scroll
[How to] Conditionally Display Additional Form Fields Based On Dropdown Selection
[How to] Add Inline Form Error Messages
[How To] Use A Cookie To Check If The Form Has Been Submitted
[How To] Capture Date/Time In Hidden Form Field
[How-to] Implement a 'Content Unlock' widget in Unbounce (by using a Wordpress plugin)
[How To] Add A Multi-Step Form 2.0
[How-to] Add a Dynamic Character Counter to Your Form
[How To] Add A Countdown Timer In Unbounce
[How-to] Add a Favicon to an Unbounce Landing Page
[How-to] Tooltips on Hover Using Tippy.js
Hotjar experience on Unbounce pages?
[How to] Save Partial Form Responses from Abandoned Forms in Local Storage
[How To] Add PDFs To Your Landing Pages in Unbounce
[How-to] Hide Form After Submission for Marketo Forms in Unbounce
[How-to] Change the Input Type on a Mobile Form Field 📱🚀
Adding custom validation to form fields
How To: Add High-Resolution Retina Images to your Landing Page (for use with retina screens such as iPhone, iPad...)
[How To] Add A Shopify Checkout to Your Unbounce Landing Page
Building drop-down header menus tutorial
[How To] Create a 100% Width Google Map With Scroll Lock
[How-to] Create a Collapsible Page Section
[How to] Run Custom Code/Scripts on Form Submission
[How to] Add Perspective Effects to Page Elements
[Create] Conversational Forms in Unbounce
[How To] Add A LinkedIn AutoFill Button To Your Landing Page
[How To] Add A Countdown Timer To A Specific Date
[How-to] Pre-Fill MailChimp Merge Tags Into Unbounce Forms
#2

What a resource!  Bookmarked :slight_smile:
Thank you Justin and amazing what can be accomplished as a community.  
Cheers,
Joe


#3

Hey Justin, 

Excellent list and one that’s been much need. 

I just posted a new [How-to] that you might want to take a look at and possibly add to the list. 

Best,
Hristian


#4

Hey Justin

Wow - what a list ! That’s superb - I shall pass it to my lot to soak up over Easter. Thanks so much for compiling this!

All the best

Amit


#5

Justin,

What a list… This is a resource that a lot of people will be bookmarking (myself included). 

Joe


#6

Wow! Fantastic compilation of great tips! Bookmarked!

Some of these I have not seen before - and will definitely have to check out! Thank you, Justin!


#7

This is great Justin. Thanks for putting this together.

It’s going to help a lot with experiments :slight_smile:


#8

Bookmarked. You certainly made this super easy for everyone! Thanks Justin!


#9

Absolutely Awesome (AA for short moving forward!), will save a lot of time and effort for people trawling for answers. Bookmarked and hopefully, we can add even more to this as we go along :slight_smile:


#10

Update: 
How to add a Fading Fixed Header to your page (added 04/15/2016)


#11

Update: 
How to Enable Hyperspace Republishing (added 04/08/2016)


#12

Update: 
How to Send Leads from Unbounce to Google Sheets (added 04/21/2016)


#13

Great contribution Hristian!


#14

Update:
How to create a Custom 404 Page with Unbounce (added 05/04/2016)


#15

Update:
How to add a Count Up/Down Animation for showcasing stats (added 05/16/2016)


#16

Update:
How to create Flexible Form Fields in Unbounce (added 06/24/2016)


#17

Update:
How to Reduce The Jargon on your Landing Page with the Unbounce DejargonatorTM (added 07/05/2016)


#18

Update:
How to Dynamically Change Background Image With URL Parameters (added 07/05/2016)


#19

Update:
How to Pre-fill Mailchimp Merge Tags in Unbounce (PURLS) (added 07/27/2016)


#20

This is awsome, Justin!  Thank you :slight_smile: