Optimize your forms for a seamless user experience 

Form submission is what makes data on the web go round.

From email collection, contact information, managing your CRM, or writing this blog post.

It all has to do with Forms.

Decades have been spent from a UX perspective to master the collection of information. Do labels go on top of the field, inside, to the left of the input? Do we make borders around our inputs, change the background, put in a placeholder? What about breaking up the form up so the user doesn’t get overwhelmed with the number of fields? There are a dozen ways to display your form and increase usability, but what about on submit?

Form submission or as developers writing code to submit your form might call reference it as an, “onsubmit”.

Many sites from e-commerce to B2B to B2C are doing their best, however with competing priorities the task of form performance usually falls to the bottom of the list. Maybe that’s because they’re using an existing form plugin, or 3rd party service which isn’t flexible.

When We Are Volume is challenged with implementing a form that will perform, we ask what are our clients competitors doing, and what aren’t they doing it right?

What am I talking about?

Let’s say you get served with an ad on Instagram for the latest personal care product. You visit the site, and see the opportunity to enter your email to subscribe to the newsletter. Now I realize most of you, like myself aren’t chasing another email in our inbox but we want that 10% off coupon code. Knowing how you handle the presentation of the offer (you give me something, and i give you something in return) and extending that to how you handle the post submission experience is ever more important.

You are getting the consumer to build a relationship with the brand, encouraging consideration with the coupon and building trust to keep them subscribed to the emails that may follow.

Let’s look and the form experience with one simple example – we ask for the email address and other information, build anticipation for the discount email and one of several scenarios may happen if care isn’t given to the experience and business rules associated with data capture:

• Nothing… well it seems like nothing. We’re not sure… but after a few seconds the page refreshes and we might see a ‘Thank You’ message
• We click submit, no idea if anything is happening, so we click submit again… and without the proper controls we capture the lead information twice and the consumer is left in the dark
• A spinner comes up, a loader… something is happening great. Then we see a small message above or below the form thanking us for the submission. If we’re lucky we don’t miss it, because we still see the form, our info and the submit button.

The worst of the scenario is the consumer is not immediately gratified with the confirmation and discount code in their email. A big missed opportunity that can recapture consumer trust, even if the form experience had issues.

All the above and other scenarios can lead to confusion by the consumer. The visitor on your website that you want to turn into a consumer.

Do you want a user to be confused once they try to send you, their information? No, of course not.

Fortunately, this can all be solved by a few tweaks to your existing form experiences.

Let’s look at the ideal scenario and then we’ll break down what’s going on with the submission. (feel free to try the form below)

See the Pen ideal form submission by We Are Volume (@wav) on CodePen.

Form Submission Walk-through:

1. There is also a change to the cursor of ‘not-allowed’, indicating we cannot click the submit button until the form has been filled out.
2. After the user enters the email, the submit button has full opacity and the cursor has changed to a pointer (hand). This lets the user know the button is ready to be clicked.
3. Upon submission of the form, the cursor then changes to a wait/spinner state and the button and input is disabled (to prevent any re-submission of the form)
4. We’ve also changed the text within the button to indicate there is a submission as well.
5. Finally, the input and button disappear to display a confirmation message.

Of course, there are many variations and ways you can implement the above. However, this ensures you’re giving constant feedback to the user and visually ensuring they know what step there are in in the form submission.

If you are having challenges or want to to discuss how we can help supercharge for you data collection experiences, click below to get a conversation started.

Let’s talk