Skip to main content

Tips & Scripts

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

  • 182 Topics
  • 3,075 Replies
182 Topics
Ting
Unbouncer
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!

1390
Ting
Unbouncer
2 years ago
Jess
Unbounce Community Team
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

97138
Mamun_Hossain
2 years ago
Rob
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

169987
Md_Mahinur_Khan
13 hours ago
Adam_Lundquist
Adam_Lundquist
asked in Tips & Scripts
An Autocomplete Drop Down

I have a list of counties and rather than having a prospect type in the whole county in a single line form field I want it to autocomplete as they type in - kind of like this https://www.awesomescreenshot.com/video/12349652?key=0cc64ddbab6d8d594105057af780f143. Is this possible in UnBounce? 

271
Md_Mahinur_Khan
19 days ago
E
Elan
posted in Tips & Scripts
Best GST Billing Software Provider in India

Trying to find the best desktop billing software on the market? The best billing software provider in India is Optech. Our billing software is used by more than 10,000 users. Modernize your office's outdated accounting system so that final counts are accomplished without any human error and monthly returns are more accurate. At optech, experienced and best customer support are available in our company. 

473
G
23 days ago
G
GatewayServies
asked in Tips & Scripts
Step by step instruction on how to remove the close 'x' on pop ups without adding any code to the host page

Hello - I need some help. I do not have access to the host pages - is there a way to remove the X on pop ups within unbounce? 

246
G
28 days ago
Rob
RobFormer Unbouncer
posted in Tips & Scripts
Dynamic Image Replacement Using URL Parameters

Similar to Dynamic Image Replacement, this script will allow you to also swap out different images on the page based on a URL parameter. The code is actually quite simple. By including a image’s source URL as a value of a specific URL parameter you can swap it out with a default image on the page (which has been added via the page builder). You can see this in action (built in Unbounce) here: http://unbouncepages.com/image-swap/ 🚨 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. Add the script from here: gist.github.com https://gist.github.com/RobertCam/a9f007882764f83f7d2198f77cf7bdd9 image-swap.html <script> (function(){ /

90638
Q
1 month ago
M
Michael_Dalde
posted in Tips & Scripts
Custom Drop Down Field Values

How do you customize the field value for a custom drop down? For example, what the user sees is “Middle School” but I need the value submitted to be “MS” to map to our LeadPosting Site

39121
K
1 month ago
Md_Mahinur_Khan
Md_Mahinur_Khan
posted in Tips & Scripts
Country Codes and Flags for Unbounce Phone Field 2.0

Hey Unbouncer! 🚀 We have a brand new, complete solution for adding Country Codes and Flags Dropdown to Unbounce!🆓 FREE Version:  💎 PRO Powerful Version:👉 https://www.grooic.com/cfu-unbounce 👀 Check Out the Live Preview Here:🌐 https://www.grooic.com/cfu-preview/  🤝 If you have any questions or need support, feel free to reach out to us on WhatsApp: 💬 +1 917 900 3111Thanks,

130
Md_Mahinur_Khan
1 month ago
B
Brook
asked in Tips & Scripts
How to add a 3rd party tag as an image background ad

We are trying to add an advertising tag as the full background to a sign in page (see attached Yahoo page with the Dodge Ram truck ad in the background).Here is the page > https://textfree.us/lp-tfw-signup2-background-ad-test1/We’ve added the tags in the Javascript section (header and before end, but it is only showing up in the upper right section of the page.Do anyone know how to add it so that it covers the whole page as the background? 

281
Md_Mahinur_Khan
1 month ago
C
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

2805
Hristian
1 month ago
J
jjacoby
asked in Tips & Scripts
Form Redirect Based on Multiple Dropdown Field Values

I’m trying to redirect the user to different URLs based on the values in two different drop downs. I successfully coded the redirect of field values in one drop down but can’t figure it out with two. I started the redirects by building out the redirects of field_2 before realizing I needed another qualifying question so I added field_1.I changed the values in the example to be super broad and unidentifiable to my business.Basically, if someone says “No” to field_1 regardless of what’s in field_2, I want to send them to URL_4. The same goes for if someone says “Yes” to field_1 but “None of the above” to field_2. For everything else, someone must say “Yes” to field_1 with either option 1, 2, or 3.  Field Example: Field ID: field_1Values: YesNo Field ID: field_2Values: Option 1Option 2Option 3None of the above Here’s my original script for just the field_2 before I added the other question that worked. <script>$("#field_2").on('change', function() {  switch ($(this).val()) {    case

231
Md_Mahinur_Khan
1 month ago
L
LMH786
asked in Tips & Scripts
Custom HTML form – CSS not working

Hello, I’m putting together a landing page that has a Custom HTML form in it. When I add a Stylesheet in Unbounce and apply CSS code to the form’s elements, the form still looks the same.  I tested the code separately in Codepen, and it works.I have tried !important and targeting classes/IDs, and nothing works.I tried reaching out to Unbounce Support, and they directed me to reach out to the community instead. My questions are:– Why isn’t CSS working?– How can I work around it and style the HTML form? Thank you in advance for any help.

371
Md_Mahinur_Khan
2 months ago
MANPREET_SINGH
MANPREET_SINGH
posted in Tips & Scripts
Option to Set Radio/Checkboxes in Separate Columns for Desktop and Mobile?

I’d like to suggest adding an option to set radio buttons and checkboxes in separate columns for desktop and mobile layouts. Currently, if you adjust the layout to display in one column on mobile, it also affects the desktop layout, forcing it into a single column. To maintain different layouts, extra CSS is required, which adds unnecessary complexity. It would be great if there was a built-in way to handle this, allowing for set columns independently on desktop and mobile without additional CSS.

141
Md_Mahinur_Khan
3 months ago
Md_Mahinur_Khan
Md_Mahinur_Khan
posted in Tips & Scripts
Boom 💥 25+ High-Converting Unbounce CTA Button Kit 🚀🚀🚀

  About CTA Button KitBased on our daily CRO practices on landing pages and A/B testing formulas, we have created a high-converting CTA button kit for Unbounce. We know these types of buttons convert well based on our past CRO strategies and experiences, which is why we created this button kit. Now, it’s available for everyone. Anyone can use this high-converting button kit to improve user conversion.👉 GET THE ACCESS NOW  Usage:These effective buttons are quick and easy to use on any Unbounce page. Just download the button kit from our website, follow the instructions, and you’ll be ready to use them on your Unbounce page!Key Features:Achieve your CRO goals Fast & interactive animation Easily customizable All buttons are real-life tested High-converting button style Fully responsive Easy color & font management Button icons Full browser compatibility Well-documented code Custom CSS animation effects Email customer support Detailed documentation Much more…👉 GET THE ACCESS NOW 

1340
Md_Mahinur_Khan
3 months ago
Luis_Francisco
Unbouncer
Luis_FranciscoSenior Growth Development Manager @ Unbounce
posted in Tips & Scripts
[Create] Reading Progress Bar on Scroll

Concerned that your visitors won’t scroll your page to read every benefit and content you have to deliver? Are heatmaps keeping you awake at night? Want more than just bouncing arrows? There must be another way… Of course there is! Just add this tiny script to have a sleek reading progress bar on top of your page that gives your visitors nice visual feedback on the percentage scrolled of a page! You can see this in action (built in Unbounce) here: https://success.unbounce.com/progress-bar 🚨 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. Paste the following script into your javascript box: <script src="https://code.jquery.com/jquery-3.1.1.min.js

47717
Md_Mahinur_Khan
3 months ago
D
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">

19015
Md_Mahinur_Khan
4 months ago
V
vbouncing
asked in Tips & Scripts
Hiding popup when countdown ends

Hi everyone.I have a popup with a countdown, has anyone managed to create a script within unbounce that hides the Popup once the countdown ends?! 

261
Md_Mahinur_Khan
4 months ago
S
sameem
asked in Tips & Scripts
Need to pass only email id and form id in the thank you page url

Is there a script on to only show certain data from a form? Here is a link to the landing page.  https://tours.kashmirport.com/kashmir-tour-packages/The form at the bottom asks for name, phone number, email id and capturing phone number and utm paramters.  I’d like to pass formid and email address along with utm parameters.  Here is the url what viewer is getting post submission of the formhttps://tours.kashmirport.com/thankyou-for-visiting-kp/?utm_medium=cpc&utm_source=google&utm_campaign=Kashmir+-+offbeat+-+tour+-+packages&utm_agname=Kashmir+Tour+Packages&keyword=kashmir%20tour%20packagesBut i want user provided email id and form number will also be added with this URLIf i enable append form data into url then it embeds all form data but i dont want to show all forma data instead i want a java script which can pull only email id and form id.Any help would be greatly appreciated.  

291
Md_Mahinur_Khan
4 months ago
G
Gustavosaab
asked in Tips & Scripts
I wanna a carousel dynamic

Hi everyone! I need a help to add a dynamic carousel in my landing page:I want to add a animation like this:https://v4company.com/I would like the html or css code to incluse on my landing page 

1141
Md_Mahinur_Khan
5 months ago
A
AlastairB
asked in Tips & Scripts
Footer reveal on scroll

Hi there Unbouncers, I am building a lite version of my company website using Unbounce. With it not being a campaign page, it requires header and footer components with various links to aid navigation. I’ve been trying, unsuccessfully, to achieve a footer reveal/slide-out on-scroll effect similar to this:https://codepen.io/rileyjshaw/pen/kxMoRW I’m applying custom css to the footer and pre-footer sections on a stylesheet: <style>  /* Pre-footer section */  #lp-pom-block-156 {    position: relative;    z-index: 1;  }   /* Footer section */   #lp-pom-box-602 {    position: sticky;    bottom: 0;    z-index: 0;  } </style> I am struggling to get the footer section with its various logos and links to sit under the section blocks and their backgrounds. Is it even possible to set the z-index for a section block? Has anyone had any success with this type of effect on Unbounce pages? Any help would be greatly appreciated!!

1335
Md_Mahinur_Khan
5 months ago
A
AlastairB
asked in Tips & Scripts
Footer reveal/slide-out effect

Hi there Unbouncers, I am building a lite version of my company website using Unbounce. With it not being a campaign page, it requires header and footer components with various links to aid navigation. I’ve been trying, unsuccessfully, to achieve a footer reveal/slide-out on-scroll effect similar to this:https://codepen.io/rileyjshaw/pen/kxMoRW I’m applying custom css to the footer and pre-footer sections on a stylesheet: <style>  /* Pre-footer section */  #lp-pom-block-156 {    position: relative;    z-index: 1;  }   /* Footer section */   #lp-pom-box-602 {    position: sticky;    bottom: 0;    z-index: 0;  } </style> I am struggling to get the footer section with its various logos and links to sit under the section blocks and their backgrounds. Is it even possible to set the z-index for a section block? Has anyone had any success with this type of effect on Unbounce pages? Any help would be greatly appreciated!!

512
A
5 months ago
Md_Mahinur_Khan
Md_Mahinur_Khan
posted in Tips & Scripts
Phone Number Field With Country Code Dropdown List

Hey Guys, In the community, i see many guys are looking for Country code in the phone number field. I solved with dropdown list with all International Flags. Live link: http://unbouncepages.com/country_code_dropdown_list_in_phone_number/ Screenshot 2022-03-15 at 8.23.34 PM846×594 49.9 KBSee this what i did with Unbounce form. Now let me share the source code and documentation.See this video documentation.  or follow this guide. Step 1:Copy this code and put in your Unbounce JS, make sure you put to the HEAD  Step 2:Now copy this code and put in your Unbounce JS, Make sure you put to the Before Body End Tag  Step 3Now copy this code and put in your Unbounce CSS  Step 4IMPORTANT: Now update the phone number field ID. ID should be phone like this…  Screenshot 2022-03-15 at 8.46.23 PM668×674 25.3 KB  Step 5Now you’re all done!  If you have still any questions or if you can’t setup with the code, you can contact me at mdmahinurkhan9@gmail.com I’ll help you!  Thanks,Mahinur 

1201125
Md_Mahinur_Khan
5 months ago
C
calvinylin
asked in Tips & Scripts
How do I generate a random ID number onto each lead that signs up?

Our database does not generate a unique identifier for our leads so i wanted to create a random number generator on the Unbounce landing page side through each lead generation via lightbox form submission.  Is there a way to have each lead that comes through attach to a random uniquely generated list of numbers (and alphabeticals if that is possible, if not numbers is fine) through to the Leads listview page so I can see it as a column?  

1233
Md_Mahinur_Khan
5 months ago
C
christian.adminIQ
asked in Tips & Scripts
Button linear-gradient to right via CSS

Hello, is a “linear-gradient” to a button or/and a text via CSS possible?The following does not work yet - has anyone an idea?? <style>.lp-pom-button {    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);}</style> also to .lp-pom-text

1475
Md_Mahinur_Khan
5 months ago

Badge winners

Show all badges
Terms & ConditionsCookie settings