Tips & Scripts

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

169 Topics
3,028 Replies

169 Topics

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

21 days 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-

22 days 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!

26 days 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

1 month 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

2 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

3 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/

3 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’

3 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 =

3 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

4 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

5 months ago

squishmytomato

asked in Tips & Scripts

NoahFormer Unbouncer

posted in Tips & Scripts

[How-to] Create a Collapsible Page Section

Landing pages are designed to provide just enough information to lead your audience to convert. However, there are times when your campaign has a lot of information that you need to include, this can lead to a very cluttered landing page very quickly. Clutter distracts from conversions, so we’re happy to announce that we’ve cooked up a brand new script to allow you to include all the necessary content in your landing page without looking like a content hoarder! Introducing: Collapsible Page Sections in Unbounce! You can see this in action (built in Unbounce) here: http://landingpage.noahmatsell.ca/collapsible-section/ Now, before you go on a Collapsible Page Section Crusade, we must mention that having too much content on your landing page can be a killer for conversions. Sure, bells and whistles are fun sometimes, but when you’re trying to lead your viewers to convert - you want to make sure it’s as straight-forward as possible. This Collapsible Page Section feature should be use

105

5 months ago

M-A Buiss

asked in Tips & Scripts

Conditionnal URL from form text

Hi everyone! I am trying to find a way to make a conditional URL link after a form submission based on a form field and at this point my very limited knowledge of javascript blocks me. What I am trying to achieve is that if a user inputs a specific word as an answer to a single line text field , it leads to URL #1, otherwise if its anything else than that specific word, it goes to URL #2.Lets say the word I am looking for is hello so whenever a user inputs hello (regardless of lower case/uppercase), he is redirected to a first URL after hitting the submit button and for any other answer, it leads to another webpage. Does anyone know of a script that would work for me?Hope my explanation is clear, thanks in advance for your help!

5 months ago

Gabriel_Mingorance

posted in Tips & Scripts

Render fonts in editor and build landing pages faster!

Hey all! Thought I would share a simple trick which will help all of you out there using custom fonts but who are struggling to type set them due to lack of font rendering in the editor. The Problem: @font-face kits and other fonts don’t always render in the editor making it extremely difficult and slow to type set your landing pages. The Solution: By using a css injection browser extension you can simply copy and paste the font kit css into it while using the editor and wah-lah your fonts are now rendering correctly provided you have added the font in the style attribute of your text. As I use chrome my extension plugin of choice is Styler as it saves the css for the domain so you can come back to the editor without loosing any css. I copy the font kit css for example: @font-face { font-family: ‘Acrom-Regular’;__ src: url('https://fontsite.com/yourfont.eot’) format(‘embedded-opentype’), url('https://fontsite.com/yourfont.otf’) format(‘opentype’), url('https://fo

5 months ago

Paul_UnbounceFormer Unbouncer

posted in Tips & Scripts

[How-to] Tooltips on Hover Using Tippy.js

Do you ever wish you knew more? Do you desire more information? If yes, you might need super stylish, slick, and informative Javascript tooltips. Using Tippy.js, hovering over any Unbounce page element just became an opportunity to tell your customers MORE. You can see this in action (built in Unbounce) here: http://unbouncepages.com/javascript-tooltips-on-hover/ 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. Step 1. Copy the latest scripts from https://gist.github.com/paulbounce/b16fc65b8e1fe65a450eca98a92f7bdc. unbounce_hover_tooltips_load should be placed in Javascripts with position set to H

6 months ago

PixFort

posted in Tips & Scripts

[Tips & Scripts] Buttery Smooth Scrolling

Here’s a script that allows you to apply a quick, beautiful smooth scrolling animation to any landing page using the SmoothScroll.js library. A great example of this can be found on: Marketer - Premium Marketing Unbounce Template (below). You can see the final product built in Unbounce here: http://unbouncepages.com/marketer-click-through/ ************************** WARNING: YOU ARE ENTERING DEVELOPER TERRITORY Please note: 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 Javascript, please consider consulting an experienced developer. ************************** Scripts Needed: Grab the latest javascript here (ÒSmoothScroll.min.jsÓ): https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.4/SmoothScroll.min.js Instructions: Step 1. Click on the

6 months ago

JessFormer Community Manager @ Unbounce

asked in Tips & Scripts

Multi-Field, Multi-Step Form 🔥

Every so often, the Unbounce Community is blessed by some absolute freakin’ ROCKSTARS like @Caroline. A few months back, she took it upon herself to share this boss workaround for a multi-step form and it blew our minds. This deserved to be a standalone post within our Tips and Scripts. Won’t you join me in celebrating the awesomeness that is Caroline?! It’s community members like her that make this such a badass online community! 🙌 Here is what we have been using for multi fields on multi steps. This as has worked well for us across many pages & clients. Here is an example of it in action: http://unbouncepages.com/multi-step-test/ Create form in one column the way you normally would, in the order you want the fields to appear. Add the following script (before body end tag), name it “Multi Step 1” <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script> function UnbounceMultiStep(form, option

100

6 months ago

sahibjot_singh

posted in Tips & Scripts

Unlocking Unbounce: Your Go-To Resource for Custom Solutions and Design Enhancements

Hello guys,I am sure there are many people who’ve been struggling to find their answers on various custom solutions that we couldn’t get in Unbounce but we certainly wanted to have in our landing pages.It could be simple animations or image sliders or using custom fonts in the Unbounce.Being a designer/developer and one of the oldest users of Unbounce, I had to face such issues as well and it was important for me to find the answers to those issues.I love Unbounce because of it’s simple UI and the flexibility of playing with the designs but still those missing functionalities sometimes haunts me because my designs are not complete without them.So I decided to find the solutions instead of just sitting and waiting for those features to be published in the builder.After all these years and finding solutions to many of those problems I decided to share it with the community so more people can benefit from it and find their answers instead of reinventing the wheel.So I’ve created a website

7 months ago

RobFormer Unbouncer

posted in Tips & Scripts

Dynamic Image Replacement Using URL Parameters

7 months ago

Md_Mahinur_Khan

posted in Tips & Scripts

Animated Hoverable Vertical Tabs - Unbounce Solution 🚀

Hey Guys,I have a solution with Animated Hoverable Vertical Tabs!!! 🎉See The Example Here:Here is the live link: http://unbouncepages.com/tabs_ub_solution_mahinur_grooic/Now Let’s make it successful for your project. Step 1: Drag the custom HTML module from the left panel of your Unbounce builder.Step 2: Copy this code and paste in your custom HTML module.Step 3: Modify the code as you need, and you are done!If you still have any questions or if you can’t setup with the code, you can contact me at mdmahinurkhan9@gmail.com I’ll help set this up for you! And if you need Unbounce Landing Page Design & Development services, you can hire our agency here: www.grooic.com 👩‍🚀 Disclaimer: I am not the original creator of the core script. I modified the code for the Unbounce environment. Here is the source where I found the core script.Like what you see?<a href="https://www.buymeacoffee.com/grooic" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.

8 months ago

laurahowardrwinvest

asked in Tips & Scripts

Bulk redirect selected pages in Unbounce

Is there a script which I can apply to the entire domain which will bulk redirect any unpublished pages to a specific url?I would if possible, need to exclude a select few urls which are already being redirected (we want to keep these redirects in place).Any suggestions welcome! Thanks

8 months ago

Page 1 / 7

Tips & Scripts

Badge winners

Sign up

Log in to the Unbounce Community

Scanning file for viruses.

This file cannot be downloaded