5 Easy Unbounce Codes to Upgrade Your Landing Page

Rabbit in a magicians hat - Graphic Design - 5 Easy Unbounce Codes to Upgrade Your Landing Page - Disruptive Advertising

At Disruptive Advertising, we love using Unbounce to create fabulous landing pages. The right landing page can make a huge difference to your conversion rate and Unbounce is a fantastic platform for creating, testing and managing your landing pages.

Recently, we’ve covered a lot of different ways to create better looking and converting landing pages, such as:

These are all well worth a read; but, if you’re ready to really get the most out of your landing page, here are 5 easy codes you can use to upgrade your landing page on Unbounce.

How to Add the Codes

Before we jump into the codes themselves, here’s how (and where) to add them. Once you’ve opened (or created) your landing page, you can access the Javascript manager by clicking on the “Javascripts” button in the bottom left-hand corner of the screen.

javascript_unbounce

Clicking on the “Javascripts” button pulls up the following script editor.

javascriptsedit_unbounce

From there, you should be able to add or edit any of the following codes.

1. Favicon

We’re all familiar with the favicon, although you might not have known what it’s called. The favicon is the little brand icon on the tab in your web browser that tells you what site that tab is showing.

For example, here is a snapshot of Disruptive’s favicon:

Screen Shot 2015-08-03 at 11.08.33 AM

A sharp-looking favicon is a good visual clue to your traffic that they are actually on your website. Here’s how to add it to your page.

  1. Click on “Javascripts” and then click “Add.”
  2. Paste this code:
    <link rel="icon" type="image/x-icon" href="http://www.google.com/s2/favicons?domain=www.yourwebsitehere.com" />
  3. Set the placement to “Head“.
  4. Name your script “Favicon” or whatever else suits your fancy and will jog your memory.
  5. Fill in your website domain where the script says www.yourwebsitehere.com. For example, if I was doing this for Disruptive Advertising, the final code would read:
    <link rel="icon" type="image/x-icon" href="http://www.google.com/s2/favicons?domain=www.disruptiveadvertising.com" />
  6. Save and publish!

The script will pull the favicon from your website (so you need have the appropriate favicon running on your actual website) and use it as the favicon for your landing page.

Voila! Your landing page looks like a respectable part of your regular site.

2. Smooth Scrolling

Ideally, paid traffic’s experience with your website should begin and end on your landing page. The more links you have on your landing page, the more opportunities you are giving your traffic to leave without converting.

That means some landing pages need to include a lot of content to help convince traffic to convert. You want to make your page as easy to navigate as possible, so it can sometimes be helpful to add a navigation bar (or a button, clickable text, etc.) with links that automatically smooth scroll a viewer down to the appropriate content.

Here’s how to add smooth scroll functionality to a navigation bar:

  1. Click on “Javascripts” and then click “Add”.
  2. Paste this code:
    <script type="text/javascript">
    
     lp.jQuery(function($) {
     
       // The speed of the scroll in milliseconds
       var speed = 1000;
     
       // Find links that are #anchors and scroll to them
       $('a[href^=#]').not('.lp-pom-form .lp-pom-button').unbind('click.smoothScroll').bind('click.smoothScroll', function(event) {
         event.preventDefault();
         $('html, body').animate({ scrollTop: $( $(this).attr('href') ).offset().top }, speed);
       });
     
     });
    
    </script>
  3. Set the placement to “Before Body End Tag“.
  4. Name your script “Smooth Scrolling”, “Frictionless Transitioning”, etc.
  5. Close the Javascript manager.
  6. In the main page Edit screen, find the navigation bar (button, clickable text, etc.) links you want to trigger the scroll and set the URL to the appropriate section ID tag, found on the bottom of the Unbounce properties tab (see image below.)tag
  7. Repeat for any other appropriate links, buttons, clickable text, etc.
  8. Save and publish!

3. The Scrolling Header

A scrolling header is a nice, subtle way to keep your branding elements in front of your paid traffic. Even if they don’t convert, they’ll at least remember your name!

Additionally, this is a great way to keep a call-to-action button or phone number in front of your audience regardless of where they are on your page. This also works great in combination with the smooth scrolling navigation bar we just discussed.

If you need an example of what a scrolling header looks like, just look at the black bar at the top of our site that keeps following you around as you read through this article. Our header always lets you know who we are and gives you quick access to the most important and relevant parts of our site.

To add a scrolling header to your landing page, follow these steps:

  1. Click on “Javascripts” and then click “Add”.
  2. Paste this code:
    <script type="text/javascript">
    
      // Fixed Header v1.1
    
      // Replace ID below with your own box ID
      var boxToAppend = '#lp-pom-box-88';
    
      var boxParent = $(boxToAppend).parent();
    
      $(boxToAppend).clone().appendTo(boxParent).css({"position":"fixed", "left":"0", "top":"0", "width":"100%", "z-index":"899"}).children().remove();
    
      $(boxToAppend).css({"position":"fixed", "left":"auto", "top":"0px", "width":"100%", "z-index":"999", "border-style":"none none none none", "border-width":"0px", "background":"none"});
    
    </script>
  3. Set the placement to “Before Body End Tag
  4. Name your script “Scrolling Header” or something else to help identify it.
  5. Close the Javascript manager.
  6. Now insert a box the size you want your header to be into your Unbounce page and put all of the content on top of it (logo, phone number, etc.) that you want to be displayed on the header. Your box will only be the width of the page, but the code will make it stretch the full width of the screen.scrollingheader
  7. Copy the ID tag of the box.
  8. Click on “Javascripts” and open the “Scrolling Header” (or otherwise named) script you just created.
  9. Replace #lp-pom-box-88 with the box ID tag you just copied.
  10. Save and publish!

4. Hint Text

Hint text is great way to add a little polish to your forms and reduce the size of a form with a lot of form fields. In essence, hint text puts the label for the form field inside of the actual field, where it’s visible until someone actually starts typing.

Screen Shot 2015-08-03 at 11.29.52 AM

It’s a sharp and efficient way to put together a form, so it’s well worth learning how to set up. Here’s how:

    1. Click on “Javascripts” and then click “Add”.
    2. Paste this code:
<script type="text/javascript">

  lp.jQuery(function($) {

    // Define your placeholder texts here, corresponding to Unbounce's field names
    var placeholders = {
      "name": "Name",
      "phone": "Phone",
      "email": "Email"
    };

    // Sets the HTML5 placeholders
    for(var id in placeholders){$("#"+id).attr("placeholder",placeholders[id])}

    // Polyfill to add support for browsers like IE<=9
    if(document.createElement("input").placeholder===undefined){$("html").attr("data-placeholder-focus","false");$.getScript("//jamesallardice.github.io/Placeholders.js/assets/js/placeholders.jquery.min.js",function(){$(function(){var e=window.module.lp.form.data.validationRules;var t=window.module.lp.form.data.validationMessages;lp.jQuery.validator.addMethod("notEqual",function(e,t,n){return this.optional(t)||$(t).attr("data-placeholder-active")!=="true"||e!==n},function(e,n){return t[$(n).attr("id")].required});for(var n in placeholders){if($("#"+n).length){if(typeof t[n].required!=="undefined"){e[n].notEqual=placeholders[n]}else{e[n]={}}}}})})}

  });
</script>
  1. Set the placement to “Before Body End Tag
  2. Name your script “Hint Text” or some other helpful name.
  3. Close the Javascript manager.
  4. Go to your form and jot down each Field Name ID and its corresponding title.
  5. Click on “Javascripts” and open the “Hint Text” (or otherwise named) script you just created.
  6. Replace ‘name’: ‘Name’, ‘phone’: ‘Phone’, and ’email’: ‘Email’, with the Field Name IDs and corresponding titles you jotted down. You can find the Field ID inside the form builder here:form
    
    // Define your placeholder texts here, corresponding to Unbounce's field names
    var placeholders = {
        'first_name': 'First Name',
        'last_name': 'Last Name',
    };
    

    Make sure you always have a comma after each Field Name ID line, including the last one! If you don’t, it’ll break the code and the hint text won’t show up.

  7. Close the Javascript manager.
  8. Go back to your form and make sure every label with the hint text has the “Hide label” box checked. This makes it so only the hint text shows up.
  9. Save and publish!

5. Lightbox

Last, but not least, we have the lightbox form. While lightboxes have gotten a lot of bad press, they also deliver great results. We’ve seen good results using them on landing pages for our clients, so I can personally vouch for their effectiveness.

Screen Shot 2015-08-03 at 11.35.22 AM

Adding them to your Unbounce landing page is well worth a try. It can boost your conversion rate and it looks pretty good, too.

Here’s how:

  1. Click on “Javascripts” and then click “Add”.
  2. Paste this code:
    <script type="text/javascript">
    
        // Form Lightbox v1.2
    
        // set the ID of the box that contains your form
        var boxContainingForm = '#lp-pom-box-105';
    
        // set the ID of the button that will trigger the form lightbox
        var buttonToTriggerForm = '#lp-pom-button-102';
    
        document.write('<style type="text/css">'+boxContainingForm+"{display:none}</style>"),$(function(){function o(){1==lp.jQuery("form").valid()&&$.fancybox.close()}var n=$(boxContainingForm).width(),t=$(boxContainingForm).height(),a=$(boxContainingForm).css("border-top-width"),i=$(boxContainingForm).css("border-bottom-width"),r=$(boxContainingForm).css("border-left-width"),s=$(boxContainingForm).css("border-right-width"),e=$(boxContainingForm).css("border-top-left-radius"),b=parseFloat(a)+parseFloat(i),c=parseFloat(r)+parseFloat(s),l=parseFloat(e);n=parseFloat(n)+c,t=parseFloat(t)+b,l>0&&($("#fancybox-bg-w, #fancybox-bg-nw, #fancybox-bg-sw, #fancybox-bg-s, #fancybox-bg-se, #fancybox-bg-e, #fancybox-bg-ne, #fancybox-bg-n").css("display","none"),$("#fancybox-outer").css("background-color","transparent")),$(buttonToTriggerForm).attr("href",boxContainingForm),$(boxContainingForm).css({top:"0",left:"0"}),$(buttonToTriggerForm).fancybox({autoDimensions:!1,width:n,height:t,autoScale:!1,padding:0,margin:0,onStart:function(){$(boxContainingForm).css("display","table")},onComplete:function(){$(boxContainingForm).parent().css("display","table")},onClosed:function(){$(boxContainingForm).css("display","none")}}),$(boxContainingForm).addClass("lp-pom-root"),$(".lp-pom-form .lp-pom-button").click(function(){o()}),$(".lp-pom-form").keypress(function(n){13==n.which&&(n.preventDefault(),o())})});
    
    </script>
  3. Set the placement to “Head
  4. Name your script “Lightbox” or “Conversion Machine” or something else that works for you.
  5. Close the Javascript manager.
  6. Create a box and anchor all of the appropriate content to it (anchor it to the box). For example, you can put a form or extra content on top of the box. It doesn’t actually matter where you put the box on the page. The script will keep it hidden until someone clicks the button. When that happens, the script will trigger the lightbox and center it on the page.
  7. Jot down the box’s ID Number.
  8. Create a button on your page that you want to trigger the lightbox.
  9. Jot down the button’s ID Number.
  10. Click on “Javascripts” and open the “Lightbox”, etc. script you just created.
  11. Change the text after var boxContainingForm = ‘ from #lp-pom-box-105 to the box ID Number you jotted down in Step 7.
  12. Change the text after var buttonToTriggerForm = ‘ from #lp-pom-button-102 to the button ID Number you jotted down in Step 9. If you want to have multiple buttons on the page trigger the lightbox, just add all the button ID Numbers inside the apostrophes and separate them with commas. For example:
    
    // set the ID of the button that will trigger the form lightbox
    
    var buttonToTriggerForm = '#lp-pom-button-102,#lp-pom-button-103';
    
  13. Save and publish!

Conclusion

These 5 easy Unbounce landing page codes are great for improving your page’s conversion rate and user experience. They take a little extra effort to implement, but the results are well worth the work. For more ways to improve your landing pages, leave me a note in the comments or contact us!

Now it’s your turn. Are there any codes or other Unbounce landing page tricks you love to use?

The following two tabs change content below.

Sarah Rodriguez

Design Director
Sarah's our quiet, sassy CRO designer. Always well dressed and hardworking, she is one of our client's favorite people to work with. On the weekend she's baking macaroons or is getting fitted for custom opera gowns.

Latest posts by Sarah Rodriguez (see all)

8 Comments

  • Joe says:

    I had been looking for the “hint text” script everywhere! One thing I would mention is when I copy/paste the unbounce editor doesn’t like the ” ‘ that get copied in. They come in as non-ASCII or something. I did a quick replace of those and everything was golden.

    • Sarah Rodriguez says:

      I’m glad you found the hint text code you were looking for, and thanks for letting us know about the small bug with the quote symbols! I’m working with our developer to embed the codes in a way that they can be more easily pasted directly into the Unbounce editor.

  • jasom says:

    Hi Sarah, really appreciate for the code. But, I have one question for the lightbox form. How can I display the box when not click the button as well. (sort of have the form displayed on the page as well). thx!

  • Kristian says:

    Great stuff! 🙂 The scrolling header and hint text means more space for actual content in my case. I also really appreciate the scroll to form script. I do worry some that the scrolling header will slow down scrolling and/or perhaps get stuck in the wrong position, as I have tried this myself before. Mostly on pages filled with advertisements, and on my old mobile phone though 🙂

  • Andy says:

    Awesome. i’ve used these codes with great success. Kind of strange that unbounce lacks the features to add these in. I think the one you have missed is – How to add a slider to your page. That would be super beneficial! Thanks

  • ranjani says:

    I have used the code and it works.
    Once i submit my form details.
    My form confirmation dialog gets displayed in between the main page and the contact form..
    how should i resolve this

  • Zak says:

    The lightbox code doesn’t seem to be working. Any ideas on how to fix this?

  • James says:

    First and formost, thank you for sharing these. Very helpful and valuable. But why are you referring to fixed headers as scrolling headers? Nomenclature is very important in development (and life in general). I would think readers would get confused if you call it one thing, but it’s called something different in the actual code (as in this case).

Leave a Comment

Get More From Your Marketing Budget.




Free Consultation