An ultimate guide to form design: How to design converting online forms

Aytekin Tank
May 1, 2019 · 24 min read
Image for post
Image for post

Main components of a form

1. Greet your respondents: Title and introduction

Image for post
Image for post

2. Place related headers and subheaders

Image for post
Image for post

3. Break questions with dividers

4. Decide whether you’ll use multi-page or single page form

5. Emphasize Calls-to-Actions (CTAs)

6. Identify your form fields

Image for post
Image for post

7. Never forget “Thanks” page

How to write so people will listen

8. Speak simply

Image for post
Image for post

9. Make it personal

10. Eliminate passive sentences

11. Cut as many words as possible

12. Use contracted versions of words

13. Cleave long sentences

14. Review the written content

The psychology of forms

15. Compare costs and benefits

16. Chunk text

Image for post
Image for post

17. Define formatting requirements

Hicks Law

18. Cut ruthlessly (again)

19. Reduce the need for typing

20. Shorten your form with conditional logic

Dual-Coding Theory

21. Visualize the information

Image for post
Image for post

22. Consider the colors

23. Make your form beautiful

Image for post
Image for post

The Endowed Progress Effect

Image for post
Image for post

24. Stagger questions from easy to hard

25. Illustrate the progress

Image for post
Image for post

Questions, answers and grouping

26. Brainstorm the questions

The science of fields

Image for post
Image for post

Now, ask yourself: do you really, really, REALLY need to ask that question?

27. Group the questions correctly

28. Define a logical question sequence

Image for post
Image for post
Image for post
Image for post

29. Decide on “compulsory vs. optional vs. ‘nice-to-have’”

30. Ask one thing at a time

Image for post
Image for post

31. Give shortcuts

Image for post
Image for post
Image for post
Image for post

Audience, purpose and context of a form

Image for post
Image for post

32. Know who are you talking to

Image for post
Image for post

Form visuals and structure

33. Align labels top-left

34. Avoid placing questions side-by-side.

35. Try one-thing-per-page

Image for post
Image for post

36. Use field length as an affordance

Image for post
Image for post

Errors and the path to completion in form design

Image for post
Image for post

37. Don’t rely on color alone

38. Specify errors inline

39. Use field validation

40. … but don’t be too strict

What is a payment form?

Image for post
Image for post

41. Limit the steps in payment

42. Use visual indicators of security

43. Clearly explain why you’re asking for sensitive information

44. Save the data

45. How to add a payment integration with JotForm

Image for post
Image for post

Step 4: Calculate coupons, taxes and shipping.

When you’ve finished the form…

46. Test your form before sharing


The Startup

Medium's largest active publication, followed by +681K people. Follow to join our community.

Sign up for Top Stories

By The Startup

A newsletter that delivers The Startup's most popular stories to your inbox once a month. Take a look

By signing up, you will create a Medium account if you don’t already have one.

Check your inbox
Click the link Medium sent to to verify your email address.

Aytekin Tank

Written by

Founder at www.JotForm.com || (contact: AytekinTank@JotForm.com)

The Startup

Medium's largest active publication, followed by +681K people. Follow to join our community.

Aytekin Tank

Written by

Founder at www.JotForm.com || (contact: AytekinTank@JotForm.com)

The Startup

Medium's largest active publication, followed by +681K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store