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.
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.
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.
Avoid all caps
All caps is more difficult to read and scan.
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.
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.
Place checkboxes (and radios) underneath each other for scannability
Placing checkboxes underneath each other allows easy scanning.
Make CTAs descriptive
A call to action should state the intent.
Specify errors inline
Show the user where the error occurred and provide a reason.
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.
Differentiate primary from secondary actions
There is a bigger philosophical debate regarding whether a secondary option should even be included.
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.
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.
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. 
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”.
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).
Next, click on “Blank Form” as that’ll be the easiest way to demonstrate how to get this going.
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.
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.
You should see the “First Name” block highlighted in blue as you drag it across, as shown below.
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.
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.)
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.
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.
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…)
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!
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.
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.
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.
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!
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.