Use the simple and effective tricks from this FREE e-Book and Optimize your conversions up-to 2x.

1. Forms | User Experience
Data Driven
Inbound Marketing
Company

2. Make it fun
Life is short. No one wants to fill out a form. Be conversational. Be funny. Gradually engage. Do the unexpected.

3. 1) Forms should be one column.Multiple columns disrupt a users vertical momentum.
Label
Input
Input
Input
Input
Label
Do Don’t
Label
Label
Input
Label
Input
Label
Input
Label
Input
Label

4. 2) Pre-fill/auto-detect as much as you can. Always help your respondent. If you already know
some information about him, pre-fill those fields or even don’t show them at all.
Name
Email
Don’t
Phone
Country
Name
Input
inboundmantra@gmail.com
+91-0909090090
India
Email
Do
Phone
Country
Source - uxplanet.org

5. 3) Use autofocus- Automatically activate the first field (or the needed one) in the form. In that
way you give a hint to a respondent where he should start and as a result, significantly boost
the whole process.
Name
Input
Input
Input
Input
Email
Don’t
Phone
Country
Name
| Input
Email
Do
Phone
Country
Input
Input
Input

6. 4) Use labels outside the fields. The main rule here is not to hide the labels while answering,
so the respondent will not loose the context.
Name
Email
Phone
Country
Don’t
Name
Input
Email
Do
Phone
Country
Input
Input
Input

7. 5) Align text to the left, and above the form field box. (Top align labels) Users complete top
aligned labeled forms at a much higher rate than left aligned labels.
Name Input
Email
Don’t
Phone
Country
Input
Input
Input
Name
Input
Email
Do
Phone
Country
Input
Input
Input
Source - uxmovement.com

8. 6) Title your form to motivate viewers.
Name
Input
Input
Input
Input
Email
Don’t
Phone
Country
Name
| Input
Email
Do
Phone
Country
Input
Input
Input
SIGN UP TO DOWNLOAD NOW

9. 7) Place checkboxes (and radios) underneath each other for scannability. Placing checkboxes
underneath each other allows easy scanning.
What does main source mean?
Do
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Don’t
What does main source mean?
Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum

10. 8) A call to action should state the intent.
Name
Input
Email
Do
Phone
Sign Up
Input
Input
Name
Input
Email
Don’t
Phone
Submit
Input
Input

11. 9) Ditch the * and denote optional fields
Name
| Input
Email
Do
Phone
Country - Optional
Input
Input
Input
SIGN UP TO DOWNLOAD NOW
Name*
| Input
Email*
Do
Phone*
Country
Input
Input
Input
SIGN UP TO DOWNLOAD NOW

12. 10) Divide fields into semantic groups.
If there are a lot of fields in your form, try
to divide them into semantic groups by
adding some additional spaces or section
titles between them. This approach gives a
respondent the feeling of gradual
answering and excludes such thoughts as
“Too many questions! I’ll leave this for
tomorrow…”.
Name
| Input
Date of Birth
Do
Email
Input
Password
Input
Phone
Input
Address
Input
City
Input
Country
Input
Personal
Account
Contact
Month Day Year
Name
| Input
Date of Birth
Do
Email
Input
Password
Input
Phone
Input
Address
Input
City
Input
Country
Input
Month Day Year

13. 11) Be clear in your error messages.
Name
Input
Email
Do
Phone
Sign Up
Inboundmantra@gmail.com
Input
Name
Input
Email
Don’t
Phone
Sign Up
Input
Input
There is already an account with this email
I error found

14. 12) Ask for a phone number if it's absolutely necessary. (Don’t specify that it’s optional).
Name
Input
Email
Don’t
Phone
Sign Up
Input
Input
Name
Input
Email
Don’t
Phone - Optional
Sign Up
Input
Input
Source - uxdesign.cc

15. 13) Differentiate primary from secondary actions
Name
Input
Input
Email
Do
Phone
Sign Up Sign in
Input
Name
Input
Input
Email
Don’t
Phone
Sign Up
Input
Sign InSign in

16. 14) Multi-step forms out-perform single-step forms
Submit details - get your free quote within 24 hrs!
Higher Education
Healthcare
Retail
Gallery
Municipalities
Manufacturing
Bank
Stadiums
Office Building
Religious Instit.
Restaurant
Not for Profit
Property Manag.
Education K-12
Museums
Other
Next
Email
Enter your email* My Job Title
-Please Select-

17. 15) Use conditional logic to shorten your forms - Conditional logic is where you only display a
question if a user has answered a previous question in a certain way.
WEBSITE DESIGN MOBILE APP DESIGN HTML EMAIL DESIGN
IOS(APPLE) ONLY ANDROID ONLY BOTH
WEB MAINTENANCE
NEXT
AND NEED DESIGNS FOR :
I AM ENQUIRING ABOUT (SELECT AN OPTION)

18. 16) When asking for addresses, use a postcode/zip code lookup to reduce field entry When
asking users to fill out their address, it’s best practice to just ask for a house number and
postcode/zip code, and then use a lookup service to suggest the full address.
Shipping Address
Shipping Address
Last Name
United States
Shipping Notifications
This is a business address
?
?
First Name
Company Name (optional)
Area Code Primary Phone
Street Address
Apt, Suite, Bldg, Gate Code. (optional)
City
Shipment notification emails are sent to the Billing Contact.
State 34593

19. 17) Selectable images are among the most engaging question type
To start, select which instruments you trade:
? ? ? ?Stocks Currencies
Select one or more options above to get startedStep 1 of 2
Commodities Indices

20. 18) Optimize the speed of your forms
19) Do not ask people to confirm their email or password twice
20) Do not place overly complicated legal messages near your buttons.
21) Upon submit, disable the submit button from being pressed again
22) Use the mobile device’s native features (camera, geolocation, date picker) to simplify
tasks

21. Thank You
Data Driven
Inbound Marketing
Company