Tips & Scripts

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

170 Topics
3,028 Replies

170 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!

1 year ago

JessFormer Community Manager @ Unbounce

posted in Tips & Scripts

The Master List of Unbounce Tips, Scripts & Hacks

⛔️ 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, n

2 years 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

15 hours ago

Anna_ZTechnical Support Specialist @ Unbounce

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

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

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

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

2 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

4 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

4 months ago

Devam

asked in Tips & Scripts

[How-To] Collapsible Section/Accordion FAQ 2023

Hello everyone!I was struggling with this as well initially and read through an older thread trying to figure it out. The thread was pretty much dead, so I gave up and went my own way. Here is the code and instructions if anyone else needs it:Here's a step-by-step guide: Access Your Unbounce Page: Log in to your Unbounce account and open the landing page where you want to add the accordion FAQ. Insert a Custom HTML Widget: In the Unbounce editor, drag a Custom HTML widget onto your page and area where you want the FAQ section. Click on the widget to edit it.(It should pop open automatically) Add the HTML and CSS for the Accordion: You'll need to write some HTML and CSS to create the accordion effect. Here's a basic example: HTML:Replace the “Question 1” etc text with a question, and the “Answer 1” with the answer. Continue for more questions/answers.<div class="accordion"> <div class="accordion-item"> <button id="accordion-button-1" aria-expanded="false">

4 months ago

ifreezebmx

asked in Tips & Scripts

Changing the URL name for different sections

Hello everybody, I just finished building my landing page, and I was wondering how to set custom links for my page.For example: When a user clicks on “about us” the link would say bnbbud.com/aboutus. For example, When a user clicks on “benefits,” the link would say bnbbud.com/benefits.Right now, the page is just https://bnbbud.com, but I'd like it to change for each different section I’ve created.

4 months ago

AnthonyF35

asked in Tips & Scripts

How to send leads to an external CRM via the Unbounce API?

Hello,I want to send leads from a landing page to a partner's CRM using the Unbounce API.They don't know how to receive leads via a webhook.Could you tell me if any of you have already done this and how?Thanks

4 months ago

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

5 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

6 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