Tips &amp; 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

4 months ago

Md_Mahinur_Khan

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

3 months ago

JessFormer Community Manager @ Unbounce

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

Mark_WainwrightStaff Developer @ Unbounce

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

5 months ago

Johnny_OpaoFormer Unbouncer

[Tips & Scripts] Creating a Fixed Header/Footer (aka Sticky Header)

Update:We have now officially launched Sticky Bars natively within the Unbounce Builder! Click here to start using Sticky Bars on all your Unbounce landing pages! 🙂 Hey Everyone!Just wanted to share a solution to those looking for a fixed header menu. This type of fixed header stretches from side to side but keeps the content/menu elements centered within your page.Check out this example page, built in Unbounce:http://unbouncepages.com/supercoolfixedheader/How to Install in UnbounceClick 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.InstructionsFirst drop a ‘box’ widget near the top of your page section. Give it the appropriate height and dr

156

NoahFormer Unbouncer

[Tips & Scripts] Mobile Hamburger Navigation Menu

Building on the Sticky Navigation Bar Community Post, this tutorial shows you an easy way to take your navigation bar in Unbounce and make it mobile friendly. The benefit of doing this is to give your users a way to quickly navigate your mobile landing page while allowing them to jump to the form at any time. See this effect in action here (view on mobile): http://landingpage.noahmatsell.ca/mobile-menu/ 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. ⚠️ Before We Begin… If you don’t have your navigation bar set up yet, start here. Download the Scripts Grab the latest menu_box.css a

NoahFormer Unbouncer

[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

10 months ago

NoahFormer Unbouncer

[Tips & Scripts] On-Scroll Animations

This tutorial guides you through creating On-scroll Animations on your Unbounce landing pages. By using On-scroll Animations, you can specify when and where your content is revealed as a visitor scrolls down your landing page. If used correctly, On-scroll Animations can help you create landing pages that are delightful and engaging. 👁️ See this on a live Unbounce page here. 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 https://gist.github.com/noahub/88d39d0fb5947efdb25e Instructions Step 1. Copy the latest onscroll_animations.js script and paste it into the Java

107

NoahFormer Unbouncer

[How To] Add A Countdown Timer In Unbounce

Over the years, many customers have asked how to implement countdown timers in their Unbounce landing pages. And who can blame them? With a countdown timer you can create a sense of urgency with your campaign, which can drive your conversions way up. How To Add A Countdown Timer In Unbounce! 🕙 🎉 We’ve made this countdown timer simple to add, easy to style in Unbounce, and with the option to fix it in the corner as to not disrupt your page designs. You can see this in action (built in Unbounce) here: http://landingpage.noahmatsell.ca/countdown-timer/ 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 experi

3 years ago

NoahFormer Unbouncer

[How To] Add A Multi-Step Form 2.0

tips-scripts-banner1921×680 243 KB When you’re building your landing pages in Unbounce, you want the conversion process to be as simple as possible. Nothing too distracting, and you certainly don’t want to scare your audience away with long, time-consuming forms. We’ve built an easy solution for you because, hey, we’re marketers too! 942×610 603 KB Introducing Multi-Step Forms! 📈 🎉 No more scary, conversion killing forms! Follow the steps below to implement this handy script into your landing page and try it for yourself! And, as always, remember to A/B test, and keep us posted on your results! You can see this in action (built in Unbounce) here: landingpage.noahmatsell.ca http://landingpage.noahmatsell.ca/multistep-form/ 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 li

224

RobFormer Unbouncer

[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

9 months ago

NoahFormer Unbouncer

[How To] Add Tabbed Sections

tips-scripts-banner1921×680 283 KB There have been multiple requests in our Community to achieve this functionality, and thanks to a bit of code and a lot of trial & error - we’re stoked to announce the newest addition to Tips and Scripts Introducing: Tabbed Sections In Unbounce Landing Pages Tabbed content areas are a great way to pack sections of content into a neat, concise area with a nice user experience. You can see this in action (built in Unbounce) here: landingpage.noahmatsell.ca https://landingpage.noahmatsell.ca/tab-content/ Bear in mind, this functionality takes a bit of finesse, so if you’re brand new to using custom Javascript in your Unbounce landing pages - feel free to pop into the Community here if you need some troubleshooting. 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

NoahFormer Unbouncer

[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

9 months ago

NoahFormer Unbouncer

[Tips & Scripts] Count Up Animation

If you’ve been reading up on Oli Gardner’s recent ebook 23 Actionable Landing Page Design Principles That’ll Boost Conversions, you’ll notice that the second principle on the list is none other than motion. Unfortunately, it’s ridiculously easy to go overboard with motion on the web… so the trick is finding a happy medium that catches the eye of your potential lead without giving them nausea inducing motion sickness. We personally love this example from Optimizely which illustrates just how many optimized experiences their platform has powered. This solution shows you how to add a simple ‘Count Up/Down’ animation to your page. This is a quick and delightful way of calling attention to some of the more impressive stats on your landing page. See this effect in action on a live Unbounce page here: https://landingpage.noahmatsell.ca/count-up-animation How to Install in Unbounce Click Here for Instructions 🚨 This is not an official Unbounce feature. This functionality is base

JessFormer Community Manager @ Unbounce

[How to] Add a Calendar Date Picker To Your Form

If your lead gen form requires a date or set of dates, you might be interested in hooking up a “date picker” widget to make the interaction as easy as possible. While this is a feature we will one day incorporate into the core form builder in Unbounce, you can use the following set of steps to get it working today. 🚨 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. Click Here for Instructions Step 1: Add jQuery and jQuery UI Open up the “Javascripts” panel (click the Javascripts button in the bottom left of the editor) and paste in the following: <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquer

Multi-Field, Multi-Step Form 🔥

JessFormer Community Manager @ Unbounce

asked in Tips & Scripts

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

11 months ago

JessFormer Community Manager @ Unbounce

asked in Tips & Scripts

[How To] Require A Business Email In Your Unbounce Forms

tips-scripts-banner1921×680 243 KB From time to time, it’s a good option to prevent “free” or “personal” email address form submissions in your landing pages – this really depends on what kind of campaign you’re running. This has come up here in the community before (here, here, and here) so I thought it might be a good idea to create a single post with the most up-to-date solution for this. In this post shared by @Mark_Wainwright (one of Unbounce’s superstar software developers), he demonstrates how to add custom validation in Unbounce form fields. Here are the instructions to prevent free/personal email address form submissions in your Unbounce landing pages: Apply the rule to the form field Step 1. Copy the following script and paste it into the Javascripts section of the builder, placement: BEFORE BODY END TAG: <script> window.ub.form.customValidators.nonWebmailEmail = { isValid: function(value) { return /\@(?!(me|mac|icloud|gmail|googlemail|hotmail|live|msn|outlo

RobFormer Unbouncer

[How-to] Add Tooltips and Rollover Images in Unbounce

Show twice the amount of content in the same amount of space or give your page visitors a little hint and some extra incentive. This simple workaround involves a little bit of Javascript and CSS to achieve some potentially powerful results. Rollover images offer a way to improve the user experience on your page and make certain elements interactive. Want to have an image change when someone hovers over it? Or maybe you’d rather have some text appear instead? Now you can! With a few minor adjustments to this script you’ll also be able to create your own custom tooltips and hints on the page. See this effect in action on a live Unbounce page here: http://unbouncepages.com/rollover-image/ Instructions Click Here to Load the Instructions ⚠️ 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

JessFormer Community Manager @ Unbounce

How To Add A Favicon To Your Landing Page

One of the very first things I do when building any branded landing page is add an on-brand favicon. For those that don’t know, the favicon is the little brand icon on the tab in your web browser that tells you what site that tab is showing. It adds an extra layer of trust and keeps things on-brand at the browser level. This is a fairly simple thing to do using Unbounce, so we made a little how-to guide. 🙂 Instructions 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. Find the location of your favicon.ico file. Usually it sits in the root directory of your website, so http://website.com/favicon.ico. In our c

3 years ago

NoahFormer Unbouncer

[How-to] Add a Smart "Back to Top" Button

Here is an incredibly simple (and effective) way to get leads back up to your form no matter where on the page they are. The button fades as the user scrolls, then disappears when they’re back at the top using some simple javascript/css. You can see the final product built in Unbounce here: http://landingpage.noahmatsell.ca/fade-in-scroll-back-to-top-button/ ⚠️ 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 HTML, Javascript and CSS, please consider consulting an experienced developer. Instructions: Step 1. Create a new button on your landing page, make note of the button ID in the properties panel on the right hand side. Step 2. Paste the this CSS into your Stylesheets

NoahFormer Unbouncer

[How To] Add A Countdown Timer To A Specific Date

You may remember this from such Tips and Scripts articles as How To Add A Countdown Timer In Unbounce. However, that feature is better suited for short-term countdowns. With this post, it gives you the ability to implement a countdown that’s days, weeks, or months away. This is perfect if you’re creating a campaign for an event, or a limited time sign-up page. Countdown timers promote a sense of urgency, and effectively boost conversion rates in a variety of marketing campaigns. You can see this in action (built in Unbounce) here: http://landingpage.noahmatsell.ca/countdown-to-date/ 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 con

Joel_McDonaldTechnical Partner Program Manager @ Unbounce

[Tips & Scripts] Sticky Navigation Bar For Desktop - The Code Behind Our 2015 Call-To-Action Conference Page

Update: We have now officially launched Sticky Bars natively within the Unbounce Builder! Click here to start using Sticky Bars on all your Unbounce landing pages! 🙂 Have you seen the 2015 Unbounce CTAConf page?? What a beauty! Here in Customer Success, we decided to dig into that page a bit and show YOU how to recreate its sticky navigation header on your desktop page using two Tips & Scripts. This header will allow your visitors to blissfully jump from one page section to another, all while keeping the CTA button ready and waiting for that all precious ‘click’. 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 consul

4 years 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">

3 months ago

NoahFormer Unbouncer

[Tips & Scripts] Fading Fixed Header

This solution allows you to create a full-width header, have it fixed to the top of your page, and have it fade in and out when a user scrolls on your landing page. This is a great way to hold off on showing your header/navigation until you feel it is needed. This can help create a clean, uncluttered look for your pages. This solution builds on Johnny’s ‘Sticky Header’ Community post. 1) See the Fading Fixed Header effect in action here . 2) Download the .unbounce template here. 🚨 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 latest fading_fixed_header.css and fading_fixed_header.js files here: https://gist.github.com/noahub

4 years ago

RobFormer Unbouncer