Tilda Blog

3 Steps to Design an Effective Online Form

📝 Imagine that you have created and launched a landing page with a form and are now waiting for your first client order. Then you discover that when leads arrive, they are missing a phone number or it is incorrect. Here's how to fix this and help users fill out the form correctly.

Filling out a web form requires a lot of effort from the visitor. They need to quickly figure out what information to enter, how to format the data, what is mandatory, etc. Your goal is to make the process simple and clear—otherwise people won't waste their time or make mistakes. Here are 3 best practices to simplify the process:

1. Keep input field labels short and clear
"Name" is easier to read compared to "How do you want us to call you?" as requires less effort. Also, placeholders are a good way to show users what information they need to provide and ultimately speed up the process.

2. Make key input fields mandatory
Check the "Required field" box in the Content panel under the key fields to prevent visitors from submitting the form without the information you need. For example, make the Name, Phone Number, and Email Address fields mandatory, and leave the Special Requests field optional.

3. Use proper field types and input masks
Tilda provides automatic validation for most field types. In the Email Address field, the visitor can only enter a valid email—otherwise, if a word or set of numbers was entered, the form will not be sent.

If you want visitors to fill out less familiar fields without making mistakes, add a field mask. Mask helps users format the input data. It gives a clear hint on the data format, number of characters, and doesn't allow the field to be filled in incorrectly. Use the mask when a strict date format is required, such as year/month/day, or to make sure that the entered value contains a certain number of characters, such as ITIN or VAT.

To make a mask, add a "One line input field" to your form and fill out the "Mask" field, where the variable "9" indicates any digit, "a" is any letter, and "*" is any symbol. For example, a date mask would look like this: 99/99/9999.

Read more about creating a field mask 👉 https://help.tilda.cc/mask
Made on