A fundamental rule of landing page design is to try and keep your Call To Action (CTA) above the fold. This enables your visitors to quickly see where they need to interact with your page to be successful. This is easy with a standard “Click-Through” style landing page that just offers a big shiny button for the user to click. You simply ensure that you place it in the top portion of the page.
On a lead gen form, the CTA is at the bottom of the form (the submission button). So it’s quite common (especially if you have a relatively long form) to have the CTA fall below the fold.
The solution to this problem is to implement 2 design rules that focus user attention on the lead capture form area.
Your form button may be below the fold, but the top of it shouldn’t be. So make this stand out as much as the CTA would if it were visible.
Now that you’ve got their attention, you want to direct them downward. The purpose of this is to make them aware that the important stuff is directly below – and to instruct them to go take a look.
Here’s a great example from a site called Surety Bonds:
Click on the thumbnail for a full-size view.
Note the bold graphical form area header – coupled with a direction cue (arrow) to direct you to the CTA.
Click on the thumbnail for a full-size view.
And here’s a look at the complete lead generation form area. Notice how the header connects both stylistically with the form CTA, while directing your attention to it.
A simple and effective way to help your lead gen landing pages perform better.
There is a cool google labs tool that helps visualize the fold based on heatmaps of browser sizes of google users:
http://browsersize.googlelabs.com/
That’s a great tool Carter and illustrates the point nicely.
According to the tool – the CTA Area Header I referred to above will be above the fold for 50% of visitors, yet less than 9% will see the actual CTA itself.
By calling attention to the form area, they have increased the likelihood of visitors getting to the intended action.
[...] is impossible with long forms, so you have to employ visual cues to help point the way. Read “HOW TO: Keep Your CTA Above the Fold on a Lead Gen Landing Page” for more [...]
Great tips! Very useful information. Your blog is proving to be very useful. Thanks
I wonder what would happen if you did not have the CTA above the fold, but only one below? If you would get less, but more qualified leads, or if it would be a bad move overall?
That’s an idea for a test right there. :-)
Oli thanks for this post – it has helped me focus on how to optimise a site to increase leads. I am also thinking of running a few tests on calls to action to see if I can optimise them. Great blog :)