1. Documentation
  2. Pro Tips and Scripts
  3. Forms & Fields

[Tips & Scripts] Form Field Focus and Glow

Follow
Avatar
christina spadavecchia
Last Updated

Focus glow highlights a form field the moment it becomes active, so visitors can see where to start typing. You can apply it two ways: focus the first field automatically when the page loads, or scroll to the form and focus it when a visitor clicks a call-to-action button, which is useful when the form sits below the fold.

This is not an official Unbounce feature. It relies on third-party code and has only been tested in limited cases, so Unbounce support cannot help if something goes wrong. If you are not comfortable with HTML, JavaScript, and CSS, consider consulting a developer.

Browser loading a blank white page at landingpage.noahmatsell.ca/focus-and-glow/

Step 1: Add the styles

Add a stylesheet to your page with the following. The focusGlow class is what gets applied to a field while it is active:

<style>
  .glow { text-shadow: 0 0 5px rgba(81, 203, 238, 1); }

  .focusGlow {
    box-shadow: 0 0 5px 1px rgba(81, 203, 238, 1) !important;
    border: 1px solid rgba(81, 203, 238, 1) !important;
    -webkit-animation: shadow 0.5s ease-in-out infinite !important;
    -moz-animation: shadow 0.5s ease-in-out infinite !important;
    animation: shadow 0.5s ease-in-out infinite !important;
  }

  @-webkit-keyframes shadow {
    0%   { box-shadow: 0 0 0 1px rgba(81, 203, 238, 1) !important; }
    50%  { box-shadow: 0 0 0 15px rgba(81, 203, 238, 1) !important; }
    100% { box-shadow: 0 0 0 1px rgba(81, 203, 238, 1) !important; }
  }

  @-moz-keyframes shadow {
    0%   { box-shadow: 0 0 0 1px rgba(81, 203, 238, 1) !important; }
    50%  { box-shadow: 0 0 0 15px rgba(81, 203, 238, 1) !important; }
    100% { box-shadow: 0 0 0 1px rgba(81, 203, 238, 1) !important; }
  }

  @keyframes shadow {
    0%   { box-shadow: 0 0 0 1px rgba(81, 203, 238, 1) !important; }
    50%  { box-shadow: 0 0 0 15px rgba(81, 203, 238, 1) !important; }
    100% { box-shadow: 0 0 0 1px rgba(81, 203, 238, 1) !important; }
  }
</style>

Step 2: Add the script

Add the following to your page's JavaScript. Two values at the top control the behavior:

  • focusOnLoad: leave as true to focus the first field on page load, or set to false to disable that.
  • scrollButton: the ID of the button that should scroll to and focus the form. Replace it with your button's ID, or use "a[href^=#]" to target all anchor buttons.
<script>
  var focusOnLoad = true; // Focus the first form field on page load. Set to false to disable.
  var scrollButton = "#lp-pom-button-25"; // Replace with your button's ID, or "a[href^=#]" for all buttons.

  $(':input, .lp-pom-form .lp-pom-button').focus(function () {
    $(this).addClass('focusGlow');
  });

  $(':input, .lp-pom-form .lp-pom-button').blur(function () {
    $(this).removeClass('focusGlow');
  });

  if (focusOnLoad) {
    $('input:not([type=hidden]):first').focus().addClass('focusGlow');
  }

  lp.jQuery(function ($) {
    var speed = 1000; // Scroll speed in milliseconds

    $(scrollButton)
      .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, function () {
          $('input:not([type=hidden]):first').focus().addClass('focusGlow').select();
        });
      });
  });
</script>

To find a button's ID, publish the page and inspect the element in your browser's developer tools; it follows the pattern lp-pom-button- with a number.

Related articles