Skip to main content

tips-scripts-banner


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 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.




Adding Basic Form Focus on page load


Scripts Needed


Grab the latest Javascript here:

https://gist.github.com/noahub/e7f12d4c78a3a35bb2727c079d178cb8


Instructions


Step 1.


Copy and paste the focus_and_glow.js Javascript code in the Javascript section with placement ‘Before Body End Tag’.


Step 2.


Copy and paste the focus_and_glow.css CSS code in the Stylesheets section of your landing page.


Step 3 for Part One (on page load):



  • Ensure the variable focusOnLoad is set to true.

  • To turn off the focus on page load, set the variable focusOnLoad to false.


Step 3 for Part Two (on button click):



  • Ensure the variable focusOnLoad is set to false.

  • Replace the ID for the variable scrollButton with the ID of your CTA button.

    -Make sure your CTA button has an anchor link to your form (by setting the click URL to the form ID).


Testing


Now let’s test this puppy out! Like any other feature that you implement onto your page, you’ll want to see what effect it has on your conversion rates. We recommend running an A/B test and segmenting a small portion of traffic towards the page, just to be safe. Documentation on A/B testing can be found here.


Conclusion


Now that we’ve given you the tools, you’re officially one step closer to being a marketing extraordinaire (if you weren’t already). Once you’ve implemented this feature on your own pages, let us know what kind of impact this has on your conversions, or if you have any suggestions related to the Focus & Glow feature, we want to hear ‘em!






Can’t see the instructions? Log-in or Join the Community to get access immediately. 🚀




Want to take your Unbounce landing pages + Convertables™️ to the next level?

:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

Love, Love Love this one! This is the exact same behaviour that Google search + apps all have. It’s very subtle, but it’s great from a usability perspective.

I really appreciate your putting together this script for us. I’ve thought about this before and now I have a way to put it into play.


My question is “Will this actually increase conversions.” I think it will depend on the type of landing page, and what’s being exchanged for their opt-in information.


If anyone’s used this script and can share their results, I’d love to see that.

Hi! I tried this and it is not working on my page. 😔

It looks really weird with radio buttons. How do I exclude radio buttons from the glow?


Edit: Replace line 6 with this and it will ignore radio buttons:


 $(':input, .lp-pom-form:not(.option) .lp-pom-button:not(.option)').focus(function(){

Reply


Terms & ConditionsCookie settings