Building an email list<\/a> requires a high converting lead generation form. Without it you might receive a lot of traffic but only a trickle of email addresses.<\/p>\n Now, high-converting lead generation forms have a number of components, all of which must be present to make the form effective. If you miss one or more of these components, your form isn\u2019t optimized and you lose out on emails.<\/p>\n In this article we\u2019re going to look at the various key elements of high-conversion lead generation forms, and how each element contributes to improving conversion rates.<\/p>\n [tweet_box design=”box_04″]#amreading: The Anatomy of a High Converting Lead Generation Form on @CrazyEgg[\/tweet_box]<\/p>\n Sidebar, header, footer, popup: There are so many places your lead generation forms can go.<\/p>\n Conventional thinking is that they should be above the fold on your landing page. However, as we\u2019ve seen many times before, you must always test it on your page. Let\u2019s have a look at two very different strategies and see how they worked for their respective sites.<\/p>\n So here\u2019s the logic. Anything above the fold gets the most number of eyeballs. The percentage of people who drop off increases as they scroll down the page.<\/p>\n That means placing the form above the fold will maximize its exposure.<\/p>\n Entrepreneurs-journey.com is a good example of a form that is placed above the fold. It loads last when you land on the page, so you see the content first and then you see the form appear in the sub-header. The motion draws your attention to it.<\/p>\n Most landing pages follow the above-the-fold concept. If you\u2019ve ever downloaded an ebook from Unbounce or Kissmetrics, you\u2019ll see what I mean.<\/p>\n But just because it works for them, doesn\u2019t mean it will work for you. Sometimes the opposite works best\u2026<\/p>\n Do you remember age-old marketing concept called AIDA?<\/a><\/p>\n There\u2019s an epic scene from Glengarry Glen Ross<\/em> where Alec Baldwin explains the concept. It stands for Attention, Interest, Desire, Action, and it is based on the idea that, before making a decision to take an action, a visitor has to be directed through a series of steps that grabs their attention and piques their interest.<\/p>\n By that logic, it means getting visitors to take action on your lead generation forms should be the last step on your landing page. Sacrilege!<\/p>\n Let\u2019s see a real example of AIDA below.<\/p>\n FloridaTix sells tickets to Universal Studios in Orlando on their website. The landing page used to look like any regular ecommerce page. You had a brief description on one side and a lead generation form on the other, all above the fold, with more details below.<\/p>\n However, when they tested shifting the form below and pushing the details up, they found a 20% increase in form submissions!<\/p>\n In their case, prospects were more inclined to submit the form because they read through the details of the offer first.<\/p>\n Many long-form sales pages use this concept. They give you paragraph after paragraph of detail first before they show you the lead generation form.<\/p>\n If you find that your forms aren\u2019t converting above the fold, try the AIDA concept and test placing the form at the bottom of your page.<\/p>\n [tweet_box design=”box_07″]Remember, it’s not sacrilege to move your lead gen form below the fold. [\/tweet_box]<\/p>\n [tweet_dis]Design is more about making your form stand out than making it look pretty.[\/tweet_dis] Sure, it needs to be pleasing to the eye, but if visitors can\u2019t find the form at a glance, then you\u2019re just making them work for it and that causes friction.<\/p>\n Let\u2019s look at some common methods of designing forms.<\/p>\n Placing your form inside a container does two things. First, it catches the eye, especially if it\u2019s a different color from the rest of your page. Second, it implies that the elements inside the box are part of the same group, and separate from elements surrounding it.<\/p>\n This helps distinguish between form and non-form elements on the page.<\/p>\n QuickSprout.com is a perfect example of an encapsulated form.<\/p>\n Since the rest of the page is white, it\u2019s easy to see the lead generation form on the right side. You\u2019ll also notice a subtle shadow near the bottom corners, giving the box a little popping effect, like it\u2019s peeling off from the page. It\u2019s just another way of catching attention.<\/p>\n Directional cues also play a key role in improving conversion rates as it shows your website visitors where to focus next.<\/p>\n Like a traffic police directing cars, directional cues make sure your visitors are seeing the important elements of your page, in this case the lead generation form.<\/p>\n In the QuickSprout example, the header of the form points slightly towards the bottom where the form fields and CTA button are placed.<\/p>\n Here is another example of directional cues from The Art Institutes. The arrow placed at the top of the form directs attention towards the form fields and call to action below it.<\/p>\n Now that you\u2019ve got eyeballs on the lead generation form, it\u2019s time for some compelling copy. Capture visitors\u2019 interest with an interesting headline and maybe some images, before you go into the details of your offer.<\/p>\n We\u2019ve written enough about copywriting so let\u2019s go into some tips and tricks to make your copy more compelling.<\/p>\n Many people assume, incorrectly, that in order to grow your email list it is necessary to offer something really huge to subscribers. The reality is that your offer doesn\u2019t actually need to cost a lot. It just needs to be perceived as high-value.<\/p>\n Again, look at the copy on the QuickSprout form. Here\u2019s the title of the form: Free Course: “Double Your Traffic in 30 Days” + Secret Bonus. (Valued at $300)<\/em><\/strong><\/p>\n Of course, it doesn\u2019t actually cost $300 to make each copy. And, contrary to what the image implies, it doesn\u2019t actually come in CDs and books. It\u2019s a digital product that you can view online. But, by specifying a dollar value, it increases the perceived value of the product.<\/p>\n The use of the word \u2018FREE\u2019 multiple times in the copy is intentional too. By signing up, you\u2019re getting something that you\u2019d normally pay $300 for. That sounds like a pretty good deal!<\/p>\n [tweet_dis]It\u2019s not enough to give away something of high value if it doesn\u2019t solve a problem.[\/tweet_dis] At best your leads will be weak, and at worst you won\u2019t get any leads at all.<\/p>\n For example, if you gave away a free iPod, you\u2019d get anyone and everyone to subscribe. But are they really going to buy your products or services later? Probably not. They only came for the iPod.<\/p>\n On the other hand, if you give away something that solves a problem<\/a> your audience has, that\u2019s incredibly powerful. To those people, it\u2019s better than a free iPod.<\/p>\n Go back to the QuickSprout example. The form copy promises to double or triple website traffic. That\u2019s immensely more valuable than an iPod because it solves a real problem for marketers.<\/p>\n [tweet_box design=”box_07″]Your optin gift should have high perceived value BUT only to your best prospects.[\/tweet_box]<\/p>\n Form fields are the greatest source of friction in lead generation forms (obviously) but they are unavoidable.<\/p>\n Here\u2019s a genius idea. Create a browser plugin that stores values for common field names and inserts them into a form on click. I was actually working on something like this years ago while interning at Yahoo! Sadly it never saw the light of day.<\/p>\n Until we have one-click form fillers, we\u2019ll have to make do with some best practices to reduce friction as much as we can. Here are a couple of tips.<\/p>\n This seems obvious, but unfortunately it needs to be repeated.<\/p>\n When I was at the Unbounce conversion road trip this year, one of the presentations broke down the conversion rates of lead generation forms by number of fields. That forms with two fields converted the highest shouldn\u2019t be surprising. What was surprising was that there were forms out there with as many as 90 fields (not a typo)!<\/p>\n After analyzing over 40,000 landing pages, Dan Zarrella at HubSpot found that conversion rates improve when unnecessary fields are eliminated. This makes sense because shorter forms are easier to fill.<\/p>\n When creating your lead generation forms, think about what fields you really need. Obviously an email field is required, but beyond that, you need to be careful about what information you\u2019re asking for.<\/p>\n For example, studies<\/a> show that [tweet_dis]asking for phone numbers can cause a 5% dip in conversion rates.[\/tweet_dis] If a phone number is not absolutely crucial to your marketing strategy, you don\u2019t need to ask for it. The same goes for addresses, zip codes, your dog’s name, and other fields that plague long forms.<\/p>\n Sometimes, reducing the number of form fields can results in poor lead quality. For example, Iron Mountain, a B2B software company, discovered that just asking for a name and email address was not enough to qualify leads.<\/p>\n So instead of reducing the number of fields, they focused on improving the quality of leads<\/a> by validating each field and making the purpose of the form clear.<\/p>\n This strategy helped them improve the number of qualified leads by 140%.<\/a><\/p>\n [tweet_box design=”box_07″]Optimize for your conversion goal. Otherwise, the results won’t matter.[\/tweet_box]<\/p>\n Who needs one-click form fillers when we\u2019ve got zero-click form fillers! If you\u2019ve downloaded more than one ebook from Hubspot, you\u2019ve seen this in action.<\/p>\n Every time you download something, Hubspot\u2019s lead-generation forms recognize you, automatically fill out the information you gave them previously, and then add on a couple of extra fields to collect further information.<\/p>\n I\u2019ve downloaded so many resources from them that I\u2019ve exhausted every question they can ask me, so all I have to do is click the CTA!<\/p>\n The CTA is the final step in your form. It\u2019s the point of no return, and thus the point of hesitation for your visitors. Again, you want to make it compelling and pre-empt all lingering objections. There are a few things you can do.<\/p>\n Make sure your users can easily identify your CTA. You want it to stand out so that it attracts attention and encourages clicks. Have a look at an example from Performable.<\/p>\n Performable wanted to figure out whether changing the color of a CTA button would make a difference to conversion rate. Initially, they had a green button that was consistent with the green branding on their site. They decided to test this against a red button.<\/p>\n At the end of the test, they found that the red button outperformed the green button by 21%.<\/p>\n Now this doesn\u2019t mean red will always outperform green. It\u2019s about using contrasting colors<\/a> rather than colors that blend in. If your site already has a lot of red on it, try changing your CTA to a different color.<\/p>\n Go back to the QuickSprout example and look at the CTA again. You\u2019ll notice it\u2019s yellow, while the rest of the page has green, white and black.<\/p>\n Another thing you might have noticed in all the examples so far is that the CTA is always a button<\/a>, as opposed to a link. Again, this separates it from other elements on your page and makes it clear that people need to click on it.<\/p>\nPlacement<\/h2>\n
Above The Fold<\/h3>\n
![\"EJ](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/06\/ej-form.jpg\")
<\/a><\/p>\nBelow The Fold<\/h3>\n
![\"Florida](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/06\/Below-the-fold-EX4b.png\")
<\/a><\/p>\nDesign<\/h2>\n
Use Containers<\/h3>\n
![\"QS](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/06\/quicksprout-form.jpg\")
<\/a><\/p>\nUse Directional Cues<\/h3>\n
![\"Art](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/06\/art-institute-form.jpg\")
<\/a><\/p>\nCopy<\/h2>\n
Increase Perceived Value<\/h3>\n
Solve A Real Problem<\/h3>\n
Form Fields<\/h2>\n
Reduce The Number Of Fields<\/h3>\n
Validate And Verify The Form Data<\/h3>\n
![\"Iron](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/06\/iron-mountain-form.png\")
<\/a><\/p>\nPre-Fill Form Fields<\/h3>\n
Call To Action<\/h2>\n
Differentiate Your CTA<\/h3>\n
![\"Performable](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/06\/hubspot-form.png\")
<\/a><\/p>\nMake The Intention Of CTA Button Clear<\/h3>\n
![\"Formstack](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/06\/formstack-survey.jpg\")
<\/a><\/p>\n