Design Effective Forms Using the TextField

Several kinds of forms exist online: sign-up forms, order/checkout forms, and surveys. Regardless of the type of form you’ll need for your business, a bad UI can cost you returning customers. A staggering 88% of users won’t come back to a website if they had a negative user experience, so you’ll need to get it right on the first try.

While the majority of this content focuses on the single-line TextField component, you can apply these principles throughout your webforJ app to help prevent abandonment and make your forms stand out.

Provide text information

Besides the actual value end users enter inside the field, you have three distinct spots to add text to inform what’s needed:

• Labels are above the field and indicate what information is needed. This area is essential for screen readers to locate the field and determine what to enter.

• Placeholders only appear if the field is empty. Since this text can disappear, it shouldn’t be used as a label but should include a formatted example of the required info.

• Finally, there’s helper text for additional context. Treat this text like a sub header; it can indicate whether a field is optional or provide more specific requirements.

A combination of these text areas provides end users with the full context of the required information, an example, and any additional context:

textField.setLabel("First name");
textField.setPlaceholderText("John Doe");
textField.setHelperText("Include any suffixes (Jr., II, etc.)");

conseil

Regardless of where you’re information is, avoid using all uppercase text. This can be harder to read for smaller text, especially if multiple fields are present.

Sometimes, using less is more effective, so keep things simple

Time is a finite resource; on average, end users abandon forms within 1 minute and 43 seconds. Clear and concise information helps quicken the process, but as a developer, it’s your duty to provide enough context so that end users can complete forms on their first try. One way to provide more context clues without being verbose is by adding icons.

Add nested elements

An icon inside a field can let those skimming the form quickly associate what’s needed. If you have an icon in mind, you quickly add one as a prefix component in the webforJ field with a single line of code:

textField.setPrefixComponent(TablerIcon.create("user"));

For moments that require more capability, like a filter, consider replacing the Icon with an IconButton. Other components in the webforJ framework, like the DateField and PasswordField, offer even more default features to meet the needs of types of fields common on forms.

Provide meaningful error messages

It’s frustrating to complete a form with multiple fields and click the submit button only to see, "Oops, something went wrong." It’s even worse when the form fails to inform you where you went wrong. Avoid this pitfall by defining the validation needed for your fields.

Validations can range from character limits to uniquely defined criteria. Regardless, setting up criteria for a field allows you to notify end users in real time if their input is valid. You can even use the setErrorMessage() method to inform them exactly why their input is invalid. When setting custom error messages, aim for a friendly tone. End users may already feel frustrated when returning to the form, so the message should guide them, not blame them.

conseil

It’s equally important to reassure end users that you’ve received a form, so provide them with a response when they’ve successfully submitted a form. This can also reduce fraud if someone receives an email verification for an account they didn't sign up for.

Use multi-step forms

Did you know those using multi-step forms report a 17% higher satisfaction rate? Dividing larger forms into segments can reduce cognitive load, letting end users focus on a small portion of the form before moving on. This design approach can also gamify the form-filling process; adding a progress bar can help end users keep track of their progress.

Design for mobile users

It’s always important to know the audience you’re designing for. With over half of the global web traffic coming from mobile devices, plan to build your forms to be responsive on devices with smaller screen sizes and ones that rely on taps and swipes to navigate. Leave enough space between fields to reduce the number of accidental taps, and keep action items at the bottom of the screen for easier interaction.

Rely on what webforJ can do for you

For faster development, webforJ provides you with an initial style for your components that’s already responsive to different states, like when a field is focused, hovered over, or is invalid. The TextField component, and others in the webforJ framework, also come with event listeners to easily create responses in your app in a coding language you’re familiar with. Easily control the way the components look and how the components respond to different interactions.

What’s next?

Interested in creating a form in webforJ? Quickly create a new project using startforJ, and see for yourself how fast you can develop new forms. While the focus of this article was on the TextField, browse through the other webforJ components to see how you can build your next Java app.