DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

The Crazy Egg Guide to Great Form UI and UX

by Carlos Augusto

Introduction

Forms. They may be boring, they may be underrated, and they may be overlooked. But make no mistake, forms are possibly the most important components on your business’ website.

Why? Because in order to sign up a new subscriber, to sell a product or service, or to simply initiate customer support or to get feedback, a form must be filled out.

Today I’ll go over the top UI (User Interface) and UX (User Experience) considerations to make sure more people successfully fill out your forms.

UI is focused on the design of every part of the form the user interacts with. How clear are your graphics? How legible is the text and copy on the form? How easy is it to click or tap on your submit button?

UX is focused on less tangible aspects of your form, such as how easy it is to scan through it with your eyes, how obvious it is what to do next, and how well the form functions on mobile. On a deeper level, UX is focused on the entire customer experience when dealing with your business. For example, if you publish a phone number to customer service, good UX will technically even go so far as to deal with how well your phone system works, too.

Finally, keep in mind that while all the suggestions here are general guidelines, there are exceptions to every rule.

Top Form UI and UX Considerations

Let’s go over the top UI + UX considerations that experts constantly highlight as very important for high quality forms. The form do’s and dont’s and form images in this section courtesy of Andrew Coyle.

Keep it one column

Forms should be one column, as multiple columns easily disrupt a user’s vertical momentum.

label input do dont

Top align labels

Users complete top aligned labeled forms at a much higher rate than left aligned labels. Top aligned labels also translate well on mobile. However, consider using left aligned labels for large data-set entry with variable optionality because they are easier to scan together, they reduce height, and prompt more consideration than top aligned labels.

label do dont

Group labels with their inputs

Present the label and input close together, and make sure there is enough height between the fields so users don’t get confused.

label do dont 1

Avoid all caps

All caps is more difficult to read and scan.

label do dont 2

Show all selection options if under 6

Placing options in a selector drop-down requires two clicks, and hides the options. Use an input selector if there are over 5 options. Incorporate contextual search within the drop-down if there are over 25 options.

what is your favorite animal bear

Resist using placeholder text as labels

It is tempting to optimize space by using placeholder text as labels. This causes many usability issues that have been summarized by Katie Sherwin of Nielsen Norman Group.

label do dont 3

Place checkboxes (and radios) underneath each other for scannability

Placing checkboxes underneath each other allows easy scanning.

what is your favorite animal bear 1

Make CTAs descriptive

A call to action should state the intent.

sign up submit

Specify errors inline

Show the user where the error occurred and provide a reason.

email error

Don’t hide basic helper text

Expose basic helper text wherever possible. For complex helper text, consider placing it next to the input during its focused state.

5 or more characters

Differentiate primary from secondary actions

There is a bigger philosophical debate regarding whether a secondary option should even be included.

do dont sign up

Use field length as an affordance

The length of the field affords the length the answer. Employ this for fields that have a defined character count like phone numbers, zip codes, etc.

do dont zip

Group related information

Users think in batches, and long forms can feel overwhelming. By creating logical groups the user will make sense of the form much faster.

info form do dont

How to Implement Form UI + UX in WordPress

Now that we’ve seen the top forms UI and UX considerations, how can we easily accomplish this without coding, just using WordPress? Well, the best overall solution I’ve come across that can get you there as quickly as possible is Ninja Forms.

Next, I’ll go over how to install Ninja Forms into your WordPress site and how to begin using it with these form UI & UX considerations in mind.

Step 1: Install Ninja Forms

Log into your WordPress admin and click on “Plugins” on the left menu nav, then click on “Add New” at the top of the screen.

add new plugins

Next, on the top right type “Ninja Forms” in the search box and you’ll see the search results appear automatically. Next to the big red Ninja Forms logo, click on “Install”, then “Activate”.

add plugins ninja forms

Step 2: Get Started

Now you’ll see “Ninja Forms” added to your WordPress main navigation on the left. Sweet! Click on that. Then click the blue “Add New” button (ignoring the contact form that is there by default).

ninja forms add new title

Next, click on “Blank Form” as that’ll be the easiest way to demonstrate how to get this going.

ninja forms blank form

Finally, when you see the blank screen which says “Add form fields”, click on the blue “+” button on the lower right to open the form fields picker.

ninja forms add form fields

Step 3: Start with First Name

Scroll down to the second group of form fields and click and drag “First Name” over to the main area.

add for fields first name

You should see the “First Name” block highlighted in blue as you drag it across, as shown below.

add form fields first name

When you let go of the mouse button, you’ll see your new form field appear on screen. If you mouse over the gear icon, you’ll see all your choices: “copy”, “delete”, and “settings”. Click the gear icon to open the settings panel.

create multi column form

Step 4: Adjust Settings

Now that we have out settings panel open, let’s make sure our label is placed above the form field. That will satisfy one of our UI / UX considerations above in two simple mouse clicks! (Note: there is also an option in the global Ninja Forms settings to set this as the default choice for all fields.)

label position above element

Next, let’s scroll down in the right panel, and we’ll see help text and description. Filling these out properly gets us lined up with two more of our UI + UX considerations above. The help text is the floating tooltip that appears when you mouse over a little question mark next to the form field. This should only be detailed help information. Again, never hide simple or basic help text inside a tooltip this way.

The next box, for description, is exactly that. A description that shows below the form field’s label, which thus acts as the simple / basic help text that you should show. So again, help text should be something more detailed. Description something basic and simple.

And now we have lined up with three of the UI + UX considerations described above almost instantly. This is why I chose Ninja Forms for this guide.

this is help text this is a description

And finally, scroll down some more on the right panel, and you’ll see placeholder text and default value. For a first name we wouldn’t want a default, but here we can add our placeholder, which is just “First Name” again. And now we have a cool grey text placeholder without violating the placeholder UX issue above.

placeholder first name

Step 5: Publish and Preview

Now, in the right panel, scroll all the way back up to the top and click “Done”. The right panel will disappear and you’ll see the full screen main area, with a publish button on the upper right. Click that, and then after publishing is done, click the “eye” button to the left, next to the “Advanced” link. This will open a preview window to your new form. (Note: the preview “eye” button won’t work until you publish first. Not sure if this is a feature or a bug…)

form fields test first name

And finally, you’ll open up to a preview of your form! Ignore all extra headings in the screenshot below. A lot of this stuff will disappear when you’re no longer logged into WordPress as admin and you preview the form from another web browser window. But what you can see below is how the help text I mentioned above is showing in the tooltip. The description is showing below the label. The label is above the form field.

And one more thing:

In the screenshot below I clicked out of the First Name field and the form correctly highlighted it red with a warning “this is a required field”. It did it inline as recommended above, so we’ve just ticked off another UI + UX consideration checklist just with the default behavior of Ninja Forms!

test preview please correct errors

So, all for free, and automatically, we’ve got:

  • Single column form
  • Label above form field
  • Helper text
  • Description
  • Placeholder text
  • Inline validation / error checking

As you continue to use Ninja Forms you’ll see many more options available. One example: choose the submit button from the form fields picker, and drag it to the main area. In the settings panel for it, you can quickly call the button “Sign up” instead of a generic label like “Submit”, and you’ve just ticked off another UI + UX suggestion: use clear and specific labels for your submit buttons 🙂

It may take a day or two to get used to Ninja Forms but it’s well worth it!

More WordPress Forms Suggestions

Below I’ll go over a couple of other very interesting services you can use with WordPress.

Typeform

Typeform is an excellent service that provides you with animated, friendly, conversational, interactive, and super engaging forms. If you invest several hours into learning the Typeform system, creating great forms with it, and embedding the forms on your website, you’ll definitely have a first-class looking form with virtually every UI and UX consideration handled perfectly, with even more features and surprises added on in many cases.

There is a free plan, but to get unlimited responses to your forms and access advanced features such as conditional logic (i.e. if someone clicks “male” then show options only for males), prices start at $360 yearly. (Note: Ninja Forms sells a conditional logic add-on for $49.)

There’s also a WordPress plugin to easily embed your Typeform forms into your WordPress site: https://wordpress.org/plugins/typeform.

WooCommerce Customization

For those who want to customize their WooCommerce checkout forms, themehigh has a plug-in for that.

You can easily add, edit and delete checkout fields and change the order fields are displayed in billing, shipping, additional and other custom sections.

Finally, you can also set conditions which allow you to dynamically display fields based on cart content or the value of other fields in the checkout form. (Get some of that conditional logic in your shopping cart!)

You can also customize your product pages by adding new input fields, text messages, instructions, price fields etc.

This allows you to offer additional inputs for customers such as a custom caption to be printed on a T-shirt. You can also allow the customer to input values which may affect the product price. For example, to dynamically calculate the price of a cable based on the length entered by the customer.

Advanced Form UI + UX Suggestions

Some of the following suggestions are more complicated and may require custom programming but are worth mentioning as well.

Offer signup and login via social, like  Facebook

Although not possible with Ninja Forms as far as we can tell, this plugin can help you connect Facebook and Google to your own WordPress site.

log in with facebook

Save form data progress

One of the best examples of good UX is to  remember all the data a user has input with your form in case something goes wrong. Nothing is worse than having to lose your work and start over! Ninja forms has a $29 add-on for this here.

Auto-focus the first field

When reaching a page with a form, it is often a good idea to automatically focus on the first field (as if the user clicked on it herself). Also, emphasize the first field with a border or background color. This require some custom javascript, but with Ninja Forms, you can give a form field a custom class name, right in the regular options panel for a field. With this custom name, javascript can auto-focus this field if you so desire.

sign up form basic

Password strength

Password strength widgets are cool! They also add a tiny bit of trustworthiness to your site, along with an SSL certificate. Here’s a WordPress plugin to add that to your WooCommerce store.

Extra credit: warn users that Caps Lock is ON. This feature may require a bit of custom javascript.

create a password

Never use a “Reset Form” button

Like mad blinking text, the “reset” button is a bad idea from the early days of the web that never seems to JUST DIE! Anyone who uses this evil button, therefore, should just die instead. Caveat: if anyone can think of a legitimate, useful reason to have a reset form button please comment below!

No reset form

Conclusion

Forms are often the most important part of an online business’ revenue. Subscribers to your email list signed up through a form. Purchasers of your products or services filled out a checkout form. Customers service is initiated through a feedback form.

Therefore, you must your forms’ UI (User Interface) by making them look clear, legible, easy to click on, with a design that’s easy on the eyes.

And don’t forget to perfect your forms’ UX (User Experience) by making sure common elements are grouped together, easy to scan through, labels are clearly marked, and other tips given in this guide.

These suggestions will ultimately increase your forms’ conversion rates which will directly affect your bottom line.

For some more form building tips, check out our post about small nuances of forms.

No Comments

DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

Carlos Augusto

I’m Carlos Augusto, a pioneer developer who spent 15 years sculpting Web 2.0 with companies like MySpace, Napster, and DIRECTV. So how can I help you? Well today I’m a digital marketing, SEO, copywriting, and cryptocurrency expert. After a free 30 minute consultation I guarantee we will discover immediately actionable ways to improve your business or your money back. Serious inquiries only please.

NO COMMENTS

Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.

SPEAK YOUR MIND

Your email address will not be published.

Show Me My Heatmap

@AndreaFine @CrazyEgg is an awesome tool! #semrushchat

Netvantage Marketing

@netvantage

What makes people leave your website?