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

+ Very clean, limited distractions
+ Repeated meaning of headline
– Located at a different page, redirect time.
stripe ATLAS
https://stripe.com/atlas


+ Explanatory
Munndy
https://munndy.com/signup


+ No placeholders
+ Consistent branding
– Is credit card required?
– Button color, is it contrasting enough?
Autopilot
https://autopilothq.com/free-trial.html

+ Trendy layout
– Many form fields, multistep?
Hivy
https://hivyapp.com/



+ Distraction free
Wistia
https://wistia.com/account/signup


+ Engaging dropdown questions
+ Distraction free above the fold
+ Important information below the fold
– Located at a different page, redirect time.
– Multi-column form fields.
Humi
https://www.humi.ca/



+ Great use of multi-step forms
+ Distraction free
Algolia
https://www.algolia.com/users/sign_up

+ Use of Social Auto-fill
+ Explains what you get in detail
– Lots of potential distractions
– Located at a different page, redirect time.
Trulia
https://www.trulia.com/sell/?ts=trulia&tscamp=global_nav_sell

+ Clear messaging
+ Great Call to Action
– Located at a different page, redirect time.
Zendesk
https://www.zendesk.com/register/#getstarted


+ Clean, distraction free
– 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/


+ Distraction free
Shopify
https://www.shopify.com/


+ Completely distraction free
Scaphold
https://scaphold.io/


+ Use of social auto-fill
– Lots of Visual distractions
Mixpanel
https://mixpanel.com/solutions/saas


+ Distraction free
+ No placeholders
– Why indicate required?
– Sign up for what?
legalnature
https://www.legalnature.com


+ Use of Icons
+ Contrasting button
– Use of placeholders
mailcube
http://mailcube.com/


+ Clean design
+ Consistent branding
+ Distraction free above the fold
– Use of placeholder and no label
Canva
https://www.canva.com/

+ Cool interactivity
+ Use of social proof
– Lots of distractions
Headway
https://headwayapp.co/


+ Distraction free
– Use of placeholders and no labels
– What will happen next?
Bonsai
https://app.hellobonsai.com/u


+ Use of social proof
+ Reinforcing display of USP’s
– Lots of distractions
Canny
https://canny.io/register


+ Use of social auto-fill
– Social media exits
Buffer
https://buffer.com/


+ Use of social auto-fill
– Cluttered
– Spacing feels a bit off
1Password
https://1password.com/



+ Distraction free