Form Page Design Inspiration & Critique

Form Page Design Inspiration And Critique

Published: 14 April 2017

Author: Axel Antas-Bergkvist

A great form page is a crucial part of the conversion funnel, but they still tend to be overlooked. When that happens a bottleneck is created in one of the most critical steps of the funnel; imagine your grocery store not having a cash desk, implying that you should leave your cart on the ground and leave the same way you entered.

My own opinions are included to help kickstart your own thinking, use them as a starting point for your thought-process and expand on them as much as you can. The more questions you’ve asked and answered the bigger the chance of the redesign being successful.

When you feel that you’ve answered enough questions and covered as many best-practices as possible, go ahead and execute. But don’t let it end there: opinions, theoretical questions/answers and best-practices are merely a first step for optimization, not the end-game.

I am aware that my opinions are usually not shared with my target demographic, the questions/answers in my mind don’t cover all aspects and that best-practices can be wrong for my clients industry or wrong altogether. Therefore I test, and you should too, (with a tool like google optimize or Optimizely for example) every thesis that I can’t confirm or deny with other sets of data.

Below you will find a collection of form page design inspiration that will help guide you on your way to a fully optimized funnel.

Invision

https://projects.invisionapp.com/d/signup

invision form page
+ Powerful Use of Social Proof
+ Very clean, limited distractions
+ Repeated meaning of headline
– Use of placeholders
– Located at a different page, redirect time.

stripe ATLAS

https://stripe.com/atlas

stripe atlas frontpage
Stripe form page
+ Use of Modal, faster signup time.
+ Explanatory
– Use of placeholders
– Non-consistent use of CTA color

Munndy

https://munndy.com/signup

Munndy frontpage
munndy form page
+ Distraction free
+ No placeholders
+ Consistent branding
– No Social proof?
– Is credit card required?
– Button color, is it contrasting enough?

Autopilot

https://autopilothq.com/free-trial.html

autopilot form page
+ Great use of social proof
+ Trendy layout
– Use of placeholders and no labels
– Many form fields, multistep?

Hivy

https://hivyapp.com/

hivy frontpage
hivy form page - step 2
Hivy form page - step 3
+ Engaging & immediate
+ Distraction free
– finding a time/checking calendar might cause friction.

Wistia

https://wistia.com/account/signup

wistia frontpage
wistiaform
+ Big, beautiful form fields
+ Engaging dropdown questions
+ Distraction free above the fold
+ Important information below the fold
– No label & use of placeholder
– Located at a different page, redirect time.
– Multi-column form fields.

Humi

https://www.humi.ca/

humi front page
humi form page step 3
humi form page step 3
+ Engaging first step
+ Great use of multi-step forms
+ Distraction free
– Use of placeholders

Algolia

https://www.algolia.com/users/sign_up

Algolia form page
+ Use of Social Proof
+ Use of Social Auto-fill
+ Explains what you get in detail
– Cluttered
– Lots of potential distractions
– Located at a different page, redirect time.

Trulia

https://www.trulia.com/sell/?ts=trulia&tscamp=global_nav_sell

Trulia form page
+ Distraction Free
+ Clear messaging
+ Great Call to Action
– No label & use of placeholder
– Located at a different page, redirect time.

Zendesk

https://www.zendesk.com/register/#getstarted

zendesk front
zendesk
+ Use of social auto-fill
+ Clean, distraction free
– No label & use of placeholder
– Located at a different page, redirect time.

I’m guessing that the data tells Zendesk that the signups that come from social auto-fill are more engaged/likely to complete the signup and therefore they are highlighted instead of the ”next” button, which would be the standard choice for highlighting.

Starry

https://starry.com/

starry front page
starry form page
+ Use of Modal, faster signup time.
+ Distraction free
– No label & use of placeholder
– Non-consistent use of CTA color

Shopify

https://www.shopify.com/

shopify front page
Shopify form page
+ Use of Modal, faster signup time.
+ Excellent solution for form labels
+ Completely distraction free
– What are the terms?

Scaphold

https://scaphold.io/

Scaphold frontpage
Schaphold form page
+ Use of Modal, faster signup time.
+ Use of social auto-fill
– Cluttered, spaceless
– Use of placeholders and no labels
– Lots of Visual distractions

Mixpanel

https://mixpanel.com/solutions/saas

mixpanel frontpage
mixpanel2
+ Use of Modal, faster signup time.
+ Distraction free
+ No placeholders

– No Social proof?
– What will happen next?
– Why indicate required?
– Sign up for what?

legalnature

https://www.legalnature.com

legalnature frontpage
legalnature form page - step 2
+ Distraction free
+ Use of Icons
+ Contrasting button
– Is it a trial? Do I have to pay?
– Use of placeholders

mailcube

http://mailcube.com/

mailcube frontpage
mailcube2
+ Distraction free
+ Clean design
+ Consistent branding
+ Distraction free above the fold
– Send message?
– Use of placeholder and no label

Canva

https://www.canva.com/

Canva form page
+ Good preview of the tool
+ Cool interactivity
+ Use of social proof
– Visually straining
– Lots of distractions

Headway

https://headwayapp.co/

headway form page - step 2
Headway form page step 1
+ Consistent branding
+ Distraction free
– Multi-column forms
– Use of placeholders and no labels
– What will happen next?

Bonsai

https://app.hellobonsai.com/u

bonsai
bonsai form page
+ Consistent branding
+ Use of social proof
+ Reinforcing display of USP’s
– Use of placeholders and no labels
– Lots of distractions

Canny

https://canny.io/register

canny frontpage
Canny form page - step 2
+ Clean design
+ Use of social auto-fill
– Use of placeholders and no labels
– Social media exits

Buffer

https://buffer.com/

buffer frontpage
Buffer form page - step 2
+ Use of modal, faster signup time
+ Use of social auto-fill
– Use of placeholders and no labels
– Cluttered
– Spacing feels a bit off

1Password

https://1password.com/

1password frontpage
1password form page - step 2
1password form page - step 3
+ Engaging
+ Distraction free
– Non-contrasting button

Dela på facebook
Facebook
Dela på twitter
Twitter
Dela på linkedin
LinkedIn