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.
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).
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
- Disclaimer
- Unbounce Builder: Tips, Scripts & Hacks
- Popups
- Landing Page (Beginner)
- Landing Page (Advanced)
- User Submitted Solutions
- Testing & Optimization Tips
- Conversion Rate Optimization (CRO)
- A/B Testing
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.
Popups
Landing Page (Beginner)
These tips are fairly easy to use and require minimal editing of html/javascript/css.
- How to use our Supercharged Copy & Paste feature
- How to add a Favicon to your landing page
- How to add a Custom 404 Page to your domain
- Pre-Filing a Form with URL Parameters
- Pre-Fill Form Fields with Merge Tags from MailChimp
- How to create Multi-step Forms
- How to add a Calendar Date-Picker to your form
- How to add Hint (Placeholder) Text to your form
- How to Enable Hyperspace Republishing
- How to create a Custom 404 Page with Unbounce
- How to Choose the Image, Title & Description when posting Unbounce pages to Social Media
- How to Add an Image Gallery without any code!
- How to Create Angled Page Sections (aka False Bottoms)
- How to Add an Animated Confetti Background after Form Submit
- How to Create a Reading Progress Bar on Scroll
Landing Page (Advanced)
These tips generally require some advanced knowledge of html/javascript/css.
- How to add an Onload Animation to your landing page with CSS
- How to add On-Scroll Animations to your landing page
- How to Create a Fixed Header/Footer (aka Sticky Header)
- Sticky Nav Bar - The Code Behind our CTA Conf page (desktop)
- How to Add a Dynamic Character Counter to your Unbounce Form
- Sticky Nav Bar - Hamburger Menu (mobile)
- How to add a Smart ‘Back to Top’ Button to your landing page
- How to add Floating Inline Field Labels to your Form
- How to add Google Fonts to your landing page
- How to use Custom Fonts on your landing page
- How to use Unbounce to Build Facebook tabs
- How to add a Fading Fixed Header to your page
- How to Send Leads from Unbounce to Google Sheets
- How to add a Count Up/Down Animation for showcasing stats
- How to create Flexible Form Fields in Unbounce
- How to Pre-fill Mailchimp Merge Tags in Unbounce (PURLS)
- How to Dynamically Swap an Embedded Video with URL Parameters
- How to Implement Form field Masking in Unbounce
- How to Add Google Address Autocomplete to your landing page
- How to Send Leads to a Third Party Service with a Form Post
- How to Add Tooltips and Rollover Images
- How to add Dynamic Form Confirmation Using Browser Redirects
- How to Add a Sticky Video Widget
- How to Add Google Address Autocomplete to your Forms
- How to Create Horizontal Forms in Unbounce
- How to Dynamically Swap an Embedded Video with URL Parameters
- How to Auto-fill Form Fields in Unbounce using Local Storage
- How to Use Dynamic Text Replacement and Track Which Button Opens a Lightbox
- How to Add Collapsible Page Sections To Your Landing Page
- How to Conditionally Display Additional Form Fields Based On Dropdown Selections
- How to Add a Multi-Step Form in Unbounce - Version 2.0 (updated for 2017)
- How to Add A Carousel With A Box Widget
- How to Create a Nifty Typed Text Effect
- How to Save Partial Form Responses
- How to Run Custom Scripts on Form Submission
- How to Add Inline Error Messages
- How to Add Conversational Forms in your landing page
- How to Add A Fixed CTA On Your Landing Page
- How to Trigger A Lightbox On Scroll
- How to Add A LinkedIn Autofill To Your Landing Page
- How to Use Geotargeting to Display a Visitors Location on a Page
- How to Create a Click-Thru + Scroll Popup
- How to Implement a Content Unlock Widget (by using a Wordpress Widget)
- How to Capture Date/Time in Hidden Form Field
- How to Change the Input Type of a Form Field
User Submitted Solutions
- Pre-Fill Form Dropdown Menus with URL Parameters
- Set up Bing Conversion Tracking in Unbounce
- Create Custom Lead Notifications (without webhooks)
- How-to Add Buttery Smooth Scrolling to your landing page
- How to Separate Mobile and Desktop Scripts in Unbounce
- Pass Parameters from Constant Contact to Unbounce (via URL Parameters)
- Remove the resizing option in the bottom right corner of a multi line text field on a form
- Facebook Social Login: Fill form fields with details from Facebook
- Add a Link (hyperlink) to Text on the Form (for terms & conditions)
- Apply an a:hover style to a text element
- Add Google Maps to a 100% Width Page Section
- Use Custom Font sizes in the builder
- How to quickly re-size images to create image grids
- Render fonts in the builder
- 5 Easy Unbounce Codes to Upgrade Your Landing Page
- How to add Buy Buttons + Shopping Cart to Unbounce
- How to Implement Device-specific Content Optimization in Unbounce
- How To Add A Multi-Step Form (3.0)
- How To Add A Stripe Checkout On Your Unbounce Landing Pages
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!
