Topics started by Noah

26 Topics

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

14
H
3 months ago
Noah
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

28
Anna_Z
Unbouncer
4 months ago
Noah
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
D
5 months ago
Noah
NoahFormer Unbouncer
posted in Tips & Scripts

[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

32
C
8 months ago
Noah
NoahFormer Unbouncer
posted in Tips & Scripts

[Tips and Scripts] Form Field Masking

One of the major challenges when collecting data on a landing page is the potential risk of data being submitted in inconsistent formats. It’s not uncommon for form fields to be filled out in a variety of different ways (think phone numbers without dashes). To complicate things further, if you’re integrating your form with external systems, this can lead to integration errors caused by bad lead data. Thankfully, we’ve got a solution for this. By using Form Field Masking, you can ensure your page visitors are submitting standardized, valid, and consistent data on your landing pages in a usable and straightforward way. And what’s more, this masking is completely customizable for any unique use-case. See the demo page built in Unbounce here: http://landingpage.noahmatsell.ca/form-field-masking/ ⚠️ Update: Some issues with Android devices have been found. See here: https://github.com/digitalBush/jquery.maskedinput/issues/382 How to Install in Unbounce Click Here for Instr

17
J
1 year ago
Noah
NoahFormer Unbouncer
posted in Tips & Scripts

[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
C
1 year ago
Noah
NoahFormer Unbouncer
posted in Tips & Scripts

[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

63
Waqas_Raja
1 year ago
Noah
NoahFormer Unbouncer
posted in Tips & Scripts

[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

67
L
1 year ago
Noah
NoahFormer Unbouncer
posted in Tips & Scripts

[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

30
M
1 year ago
Noah
NoahFormer Unbouncer
posted in Tips & Scripts

[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
I
1 year ago
Noah
NoahFormer Unbouncer
posted in Tips & Scripts

[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

0
Camille_Jacques
2 years ago
Noah
NoahFormer Unbouncer
posted in Tips & Scripts

[Tips & Scripts] Form Field Focus and Glow

Looking for a way to automatically direct your visitors to actionable content on your landing pages? Look no further! Below, we’re going to dive into how you can apply Focus & Glow to your form fields in your Unbounce landing pages! Focus & Glow is a feature imposed by most modern browsers that helps to visually show a visitor that they’ve clicked an actionable object. By implementing Focus & Glow, your visitors won’t have to click into any forms to start filling out their information, they can simply begin typing because their cursor will be automatically loaded into the form fields. This is a technique that is used by tech giants such as Google, Gmail, and many others. There are two ways of implementing this on your landing page Option #1. Enables you to add focus to your form field automatically on page load. Option #2. Allows you to seamlessly scroll to your form and add focus with the single click of a CTA button (if your form is below the fold). How to Install

0
Justin.Schmidt
2 years ago
Noah
NoahFormer Unbouncer
posted in Tips & Scripts

[How to] Create a Typed Text Effect In Unbounce

Have you ever been asked to make a landing page “pop”? Don’t you just love that? Well here’s a way you can really WOW some folks with this nifty new script! Introducing: Typed Text Effect in Unbounce Gone are the days of having to choose just one adjective, or just one feature to display on your landing page. Rejoice! You can check out the demo page built in Unbounce here: http://landingpage.noahmatsell.ca/typed-js/ 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. Optional: Download the .unbounce file Download the .unbounce template here. Download the latest version of the script https://gist.g

0
Florian_Maroto
2 years ago
Noah
NoahFormer Unbouncer
posted in Tips & Scripts

[How to] Add a Particles.js Background to your Page Section

Looking for a quick win to add some futuristic animation to your landing page? You’re in luck! We have ascended to new levels of background technology with what we are calling floaty particles. You can achieve this effect in just two easy steps! Big thanks to @aucaitlin for bringing this functionality up in the Community, without which this wouldn’t have been brought to our attention! 🎉 You can see this floaty in action (built in Unbounce) here: https://landingpage.noahmatsell.ca/particles/ 🚨 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 Heres a link to the script: https://gist.github.com/noahub/a81e35c65425a323323910

0
D
2 years ago
Noah
NoahFormer Unbouncer
posted in Tips & Scripts

[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

21
D
2 years ago
Noah
NoahFormer Unbouncer
posted in Tips & Scripts

[Tips & Scripts] Google Address Autocomplete

You know that wonderful feeling when the Internet does the work for you? Like when you’re typing in an address, and before you’ve even finished, the internet has basically read your mind and completed the whole address for you in a dropdown menu? Ah… so satisfying. That little piece of Internet magic is Google Address Autocomplete, and we’d like to show you how you can implement this in your Unbounce landing pages. Autocomplete is a feature of the Places library in the Google Maps JavaScript API. You can use autocomplete to give your landing page the type-ahead-search behavior of the Google Maps search field. When a user starts typing an address, autocomplete will fill in the rest. See Google Address Autocomplete in action! 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 featur

0
Matthew_Metros
3 years ago
Noah
NoahFormer Unbouncer
posted in Tips & Scripts

[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

0
P
3 years ago
Noah
NoahFormer Unbouncer
posted in Tips & Scripts

[How to] Add A Sticky Video Widget

When it comes to relaying a message quickly and effectively to your audience, video is king. This isn’t news to anyone, but what happens when you want to implement a video on your landing page and your users scroll away and miss all the best parts? Or perhaps you have an instructional video that your viewers need to follow as they scroll through your page. Well, here’s an early holiday gift from Unbounce! 🎁 💝 🎅 Introducing the Sticky Video Widget ▶️ 🚀 Now you can implement video on your landing page that will follow your user as they scroll through your content, Here’s Sticky Video Widget in action! Want to add this to your campaign? Below are some simple step-by-step instructions to include this juicy widget in your Unbounce landing page. 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 limi

0
SarbjitGrewal
3 years ago
Noah
NoahFormer Unbouncer
posted in Tips & Scripts

[Create] Conversational Forms in Unbounce

We’re constantly exploring new ways to optimize conversions with Unbounce, and sometimes that means making form completion less of a chore and more of a conversation. That said, we’re thrilled to introduce our newest addition to Tips and Scripts… Introducing Conversational Forms in Unbounce! 💬 🎉 Give your forms personality by turning them into conversations! Conversational forms make it easy for designers and developers to engage visitors in a more compelling and conversational way, without making the user feel like they’re speaking to a robot. You can see this in action (built in Unbounce) here: http://landingpage.noahmatsell.ca/texting-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 limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. S

0
T
4 years ago
Noah
NoahFormer Unbouncer
asked in Tips & Scripts

[How to] Create Angled Page Sections (aka False Bottoms)

One of our favourite highlights from @Oli_Gardner’s talk at CTAConf 2017 was his tidbit on asymmetrical design - but more specifically, false bottoms. Implementing angled page sections is is a subtle way to indicate that more content exists below the fold, and subconsciously prompts visitors to scroll down to find it. This isn’t a native Unbounce feature, but we’ve put together a quick CSS script that will allow you to achieve this effect in Unbounce quickly and easily. You can see this in action (built in Unbounce) here: http://landingpage.noahmatsell.ca/angled-page-section-demo/ 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 consu

0
Laserfocus
4 years ago
Noah
NoahFormer Unbouncer
posted in Tips & Scripts

[How To] Add A LinkedIn AutoFill Button To Your Landing Page

LinkedIn Autofill increases the volume and quality of conversions that come from your lead generation forms. With a single button placed on your desktop and mobile lead forms, website visitors can pre-populate these forms with public information from their LinkedIn profiles. It’s quick and easy to successfully add LinkedIn AutoFill to your landing pages. You can see this in action 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. Step 1. Use the following tool with your Unbounce form’s data to generate your own personalized Autofill plugin script: https://developer.linkedin.com/plugins/autofi

0
AlexandreB
4 years ago
Noah
NoahFormer Unbouncer
posted in Tips & Scripts

[How To] Add PDFs To Your Landing Pages in Unbounce

Here’s a quick tutorial that shows you a variety of ways to offer PDFs on your Unbounce landing page. 🎉 This could be beneficial if you’re offering something like an infographic, a whitepaper or a sales deck - without requiring your leads to download the file. Note: If you are looking to offer a file download after for submission, you may want to take a look at our instructions to do that here. For the most part, you’ll want to include these assets either in a lightbox (click-through) or on the form confirmation dialogue, and not on the main landing page itself. See the demo built in Unbounce here: http://landingpage.noahmatsell.ca/drive-pdf-embed/ 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 i

0
quickchan
4 years ago
Noah
NoahFormer Unbouncer
posted in Tips & Scripts

[How-to] Change the Input Type on a Mobile Form Field 📱🚀

The big benefit of setting your form’s input type is that, on mobile, the correct keyboard will display when your leads are filling out your form. This small change helps speed up the input process and reduces form friction on your pages. This script allows you to easily change your input types to any valid type – without breaking any of the form styling. Android Examples: You can see this in action (built in Unbounce) here: http://landingpage.noahmatsell.ca/input-types/ 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. 📱 You can see a fulll list of input types here: https://www.w

0
M
4 years ago
Noah
NoahFormer Unbouncer
posted in Tips & Scripts

[How to] Add Inline Form Error Messages

Few things kill conversions more than making it difficult or unpleasant for a user to complete a form. For this reason, we’re introducing a cleaner, less obtrusive experience for users to validate their forms with Inline Error Messages. With Inline Error Messages, you can automatically display errors inline, making it easier to find for users, and a much better experience on mobile. Best practices for form validation are as follows: Display at the right place: Next to the input in question Display at the right time of informing about problems/success Use the right colour: Red for problems green for success Use clear language: Have a conversation with the user     You can see this in action (built in Unbounce) here: http://landingpage.noahmatsell.ca/inline-error-message/ 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 appli

0
Rafael_Nogueira
4 years ago
Noah
NoahFormer Unbouncer
posted in News and Announcements

Update: Unbounce Page Lookup Chrome Extension v3

A snazzy new update is out for the Unbounce Page Lookup Chrome Extension If you’re not already familiar with the extension, here’s the gist: It allows you to detect any Unbounce page, Popup, or Sticky Bar & get quick access to details, stats, & debug information without leaving your page. An icon in the address bar will identify when you are viewing an Unbounce page, Popup, or Sticky Bar. If they belong to you, clicking on the icon will reveal details, stats, and debug information, as well as a direct link to the page overview and edit screens in Unbounce. Click to Download from Chrome Extensions

0
Levi_Edwards
5 years ago

Badge winners

Show all badges
Terms & ConditionsCookie settings