Tips & Scripts

A collection of time-saving tips, scripts, and hacks to supercharge your Unbounce Classic Landing Pages, Popups, and Sticky Bars.

176 Topics
3,052 Replies

176 Topics

TingConversion Intelligence Specialist @ Unbounce

posted in Tips & Scripts

Unbounce Classic Builder Tutorial

Hey all! Here’s a video walkthrough of the Unbounce CLASSIC builder. It has a table of contents, and it's a great place to start if you're new to Unbounce.This is a must read for building mobile pages in the CLASSIC builder!

2 years ago

JessFormer Community Manager @ Unbounce

posted in Tips & Scripts

RobFormer Unbouncer

posted in Tips & Scripts

[How to] Add an Image/Testimonial Carousel in Unbounce Using A Box Widget

Big and bulky image sliders that draw a lot of attention tend to actually hurt conversion rates (Item number 1 in this article) and aren’t something we generally recommend for landing pages. But that’s not going to dissuade you is it? 😏 We were prepared for that… Introducing Box Widget Carousels in Unbounce 📈 Maybe you want to cycle through some testimonials below the fold to make the page cleaner? Or perhaps you’d like to have a rotating sub headline to free up some space while still saying what you want to? There are a few small and effective ways to utilize the cycling of elements on a page that come to mind. Please though I beg you, don’t make this the focal point. This is one of those things that would be good to test before adopting. 💯 Below you’ll find some code that will allow you to place items in a box on your Unbounce page and have them automatically cycle with a fade effect, showing one at a time. You can see this in action (built in Unbounce) h

242

1 month ago

gr8hoops21

posted in Tips & Scripts

Passing variable from unbounce landing page to iframe popup?

I have an unbounce landing page that I am trying to pass a variable that is stored in SessionStorage to the native unbounce popup. Since the popup shows as an iFrame, I am trying to use postMessage in JavaScript to send that variable but it doesn’t seem to be working for me. Has anyone successfully managed to do this?To clarify, I have seen a bunch of stuff sending variables from the popup to the parent page but not the other way around. Any help would be much appreciated!Thank you!

2 months ago

Mark_WainwrightStaff Developer @ Unbounce

posted in Tips & Scripts

Adding custom validation to form fields

If you want to add more specific form validation rules, you can do that using custom JavaScript! How to Install in Unbounce Click Here for Instructions 🚨 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. Part 1: Define a validation rule Copy the following script and paste it into the Javascripts section of the builder: <script> window.ub.form.customValidators.myCustomRule = { isValid: function(value) { return value === 'I accept'; }, message: 'Your entry is invalid', }; </script> Replace myCustomRule with a unique ID (name) for the rule. You’ll need this later. Replace isValid with a function that takes the value

112

3 months ago

Anna_ZTechnical Support Specialist @ Unbounce

posted in Tips & Scripts

Google Ads Phone Conversion Tracking with Number Replacement

This is a guide on how to set up Google Ads phone call tracking for Unbounce pages in Classic Builder. Step 1: Create a button Create a phone number button with the following click action and label settings:Note: set the Border option to None so that the phone button appears like text if preferred.Select it as a conversion goal if you would like to track it as a conversion in Unbounce: Step 2: Install Google scriptsMake sure that the Google Ads main and conversion snippets are installed on each variant and not in the Script Manager. This is due to the following limitations:To replace a phone number, we will need a button ID, which is specific to each button on each variant. The script that replaces phone numbers has to be installed on the variant. It's not possible to have main snippet in Script Manager and the conversion snippet on the variant because of the order in which Unbounce loads scripts: https://documentation.unbounce.com/hc/en-us/articles/360028392612-Does-Order-Matter-When-

3 months ago

synca

asked in Tips & Scripts

Favicon not working?

Hello - our favicon works on some pages but not others, despite the code showing up on both pages.Working: https://go.greencast.ca/turf-application-guide/Not working: https://go.greencast.ca/posterity/<link rel="icon" type="image/x-icon" href="https://www.greencast.ca/favicon.ico">Any help would be much appreciated!

3 months ago

cdillingham

posted in Tips & Scripts

🚀 How to Block Free Email Domains on Your Landing Pages with SmartBuilder — Even When They Said It's Impossible!

Hey Unbounce Community! 🚀I recently faced a challenge where I needed to block submissions from free email domains on my landing pages built with SmartBuilder. The Unbounce tech team said it was not possible... But guess what? I've crafted a script that works like a charm, and today, I’m here to share it with all of you! 🧠 The ProblemWe often need to ensure that leads coming through our landing pages are more likely B2B, and one way to do that is by preventing users from signing up using free email domains (like Gmail, Yahoo, etc.). 🚀 The SolutionBelow is a script that allows you to block specified email domains and give visual feedback to users attempting to use them. <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function() { const blockedDomains = ['me.com', 'mac.com', 'icloud.com', 'gmail.com', 'googlemail.com', 'hotmail.com', 'live.com', 'msn.com', 'outlook.com', 'yahoo.com', 'ymail.com', 'aol.com']; const emailInput = docume

3 months ago

VicFormer Unbouncer

asked in Tips & Scripts

[Tips & Scripts] Flexible Form Fields

A feature we get asked for a lot is the ability to create forms in more flexible and creative ways, like multi-column forms, horizontal forms, different sizes for input fields etc. This solution tackles all of the above by allowing you to place the form fields anywhere you want on the page and choosing the width of each field individually. The only limit is your imagination! Check out the final product built in Unbounce here: http://unbouncepages.com/split-form-fields/ How to Install in Unbounce Click Here for Instructions 🚨 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. Scripts Needed Grab the javascript needed here: https://gist.github.com/victorze

4 months ago

RobFormer Unbouncer

posted in Tips & Scripts

[How-to] Use Geotargeting to Display a Visitors Location on a Page

Want to take the personalization of a page to the next level? Maybe you want to display a visitor’s location on the page or pre-fill a city/ region form field. Now you can using a FREE IP lookup database called GEOLOCATION DB and all it takes is a simple AJAX call and some basic JS. Even better, it’s written for you! You can see this in action (built in Unbounce) here: http://unbouncepages.com/geoip-db-location-example/ This also works in both a pop up and a lightbox: http://unbouncepages.com/test-location-convertable/ How to Install in Unbounce Click Here for Instructions 🚨 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. UPDATE Step 0 Geolocation

5 months ago

NoahFormer Unbouncer

posted in Tips & Scripts

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

🔙 May 2019 Due to a recent update from our removal of Jquery dependancy, this script is no longer functioning reliably. I’ll leave the script and instructions on this page as it may function with some individual tweaking. However, in some cases this workaround may not work. -@jess 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. 🎉 Check out the effect (built in Unbounce) here: http://landingpage.noahmatsell.ca/confetti-confirmation/

5 months ago

REMIM

asked in Tips & Scripts

Email Validation Script Working on per-page basis but not when applied domain-wide

Hi there, following this community post from former unbounce staff I was able to add JS snippet to select landing pages to prevent form submissions with spam domains I’ve confirmed it works when applied on a per-page basis but when I put it in script manager to make it domain wide, it doesn’t work anymore unless the script is on that page already.here's what it looks like on a page <script> window.ub.form.customValidators.EmailDomainValidation = { isValid: function(value) { return /\@(?!(me|mac|qq|yandex|gamil|aol|tasla|msn|teleworm|business|getmail|mailinator|mailina|mail|hhh|domain|gmailr|bussiness|businessmail|jourrapide|armyspy|hldrive|gmailinator|eamail|tech|email|info|armyspy|manimailinator|mailin|memail|hhh|gamail|fuck|memail|email|asdfasd|out|efu|ko|domain)\.)/.test(value.toLowerCase()); }, message: 'Please enter a valid email address', };</script><script> window.ub.form.validationRules.work_email.EmailDomainValidation = true;</script>I’

6 months ago

ghalewrk00

asked in Tips & Scripts

Trying to Add Javascript to Filter Applicable City and Zip - No Javascript knowledge

Hello all. I am currently building a lead form that needs 3 new fields than usual. (I usually just duplicate old landing pages and utilize those already built lead forms). This one needs to have the new fields of State, City, and Zipcode. Due to our leads needing a location attached to them (we are an in-person education service), I thought the best course of action was to have the city and zips filter out based on the previous fields choice. I added the pre-made state field and the following script that ChatGPT helped me with: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script><script>var jq = jQuery.noConflict();jq(document).ready(function() { // Fetch cities based on selected state jq("#state").change(function() { var stateCode = jq(this).val(); if (stateCode) { jq.ajax({ url: "https://api.zippopotam.us/" + stateCode, type: "GET", success: function(data) { var cities =

6 months ago

NoahFormer Unbouncer

posted in Tips & Scripts

[How to] Run Custom Code/Scripts on Form Submission

Ever needed a reliable way to fire some JavaScript on form submission? This solution will be super handy for anybody looking to do things like: manipulating form data before it’s submitted or making custom API calls or XHR requests on form submission. Whatever custom JavaScript you may have, using this script is a reliable and easy way to ensure it is fired on form submission. Give’r a whirl! How to Install in Unbounce Click Here for Instructions 🚨 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. Documentation There are two options for when your code will run: beforeFormSubmit: Called after validation has passed, but before the lead has been recorded

7 months ago

RobFormer Unbouncer

posted in Tips & Scripts

[How to] Conditionally Display Additional Form Fields Based On Dropdown Selection

Want to avoid scaring someone off with too many form fields? Or maybe you want to collect an additional bit of information based on the context of a separate field (state/province based on the country selection, for example). Now you can with our latest addition to Tips and Scripts! Introducing: Conditional Dropdown Fields This script will allow you to add a drop down field that will conditionally show which field appears next based on what the user chooses. You can see this in action (built in Unbounce) here: http://unbouncepages.com/conditional-reveal/ And the State/Province example here: http://unbouncepages.com/stateprovince-conditional-form-field/ Instructions Click here to view the instructions 🚨 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

142

7 months ago

squishmytomato

asked in Tips & Scripts

Running 2 jQuery scripts on the same landing page

hey guys,excuse me if i sound really really clueless in this post - i’m not a developer and this is my first attempt at designing a website since 6th grade, so please bear with me.i am attempting to build a landing page with two different little widgets on it: an FAQ accordion widget (https://websales.gumroad.com/l/unbounce-accordion-faq)a carousel for testimonials my problem is - i cannot get both working at the same time. i did some quick google searching and realized it may be because i was trying to run two different versions of jQuery. so, i updated the javascript of the jQuery for the testimonial carousel to be the same version of jQuery as the accordion widget - still no luck.when i remove the FAQ accordion javascript - the testimonial widget works. when i remove the testimonial widget - the FAQ accordion works.is there a clean way to integrate both of these?here is the javascript code for the FAQ:<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></scri

7 months ago

Page 1 / 8

Tips & Scripts

Badge winners

Sign up

Log in to the Unbounce Community

Scanning file for viruses.

This file cannot be downloaded