Create Better Forms For Your Landing Pages

Every landing page needs a form. Forms on landing pages can be used for collecting emails, receiving user queries, placing orders or making purchases. But one problem most people do when designing a Landing Page is with forms.

Sometimes the forms are too long or too short, and sometimes its placement is wrong completely and utterly wrong. In this article I will be showing you the bad examples and good examples of these real problems.

Placement

The placement can be tricky and can cost you tons of conversions. Designers do not pay attention to placement of main focus of the landing page. It doesn’t matter if your landing page is filled with joyful colors and animations visitors are not going to convert if you don’t ask and point them in right direction.

In example below the SVBTLE chose to add an extra step for their signups, It could’ve been much better if they started with a single email field here in this way SVBTLE could have eliminated the visitor’s fear of filling in the long forms. The signup button tells me that its going to be a long form proceed with caution. :/

Better approach by coinbase collecting the emails first. It gives coinbase an extra shot on converting the visitor even if a visitor abandon the next step atleast they have their email and can contact them with some offer or something in order to win him back. Thumbs Up to coinbase really great tactic.

Benchmark here made the placement mistake, Beautiful design but upon arriving on the page what do I need to do ? The sign in button is way up on right size the eyes move in zig zag pattern visitors struggle to find  action cues when they land  on a page without forms above the fold. The first instinct in this case is to scroll down not to fill the form.

Making Long Forms Short

People are still afraid from long forms even in 2017 with all those autofill features looking at long forms gives us anxiety. Here are some genius example of landing pages where designers used such a great trick that it’s impressive.

The trick is to make your forms inline.  Placing the fields inline it is just this simple this really does the trick, It does not hurt eyes neither its long because all the landing page form fields are in just one line like a single field. Fundera did it really good.

The thumbtack used this same trick and moved their two fields in one line to make the illusion of a single field, When a visitor arrives on this landing page he is going to see a single field the second field will only become visible once he has already started filling in the form.

Driving Attention

After you have made your landing page form short and found a perfect spot on your landing page to place the form the question still remains is it driving attention ? In these example lets see how these great landing pages achieve this and drives more attention toward forms.

To make landing page forms pop out designers have to use color very wisely. Flat design forms does not play very well with distinguishing  the forms from other elements of your landing page.

Conversion Lab Landing page doesit perfect by using darker background for form and light background for content. Also their forms pops up when clicked on landing page Call to action button which attracts total attention of the visitor.