How to optimize forms on finance websites
There's only one place on a financial institution's website to which every new customer must go before converting: their signup form.
Therefore, if you are responsible for conversions on a finance website, you should avoid mistakes on your form at any cost.
Think about it. It's hard to get people there. You need to:
- Attract qualified traffic
- Convince them to stay and read what you have to say.
- Convince them to click to go to your form.
So it's essential to make the most out of the users who actually get there.
That's why we have written this article packed with tips on improving forms on finance websites and classic mistakes you should avoid. So let's get started!
Make it easier to fill out your form
Replace typing with clicking
One golden rule to creating high-conversion forms is always to remember that people suck at typing, especially on mobile. So, when you replace a field that requires typing with one that only requires clicking, you'll make it easier for users to fill out your form.
For example, take a look at Bankrate's mortgage calculator:
Users have to type exact numbers on all these fields. And if you think about it, this approach also requires a lot of clicks. After all, for every field, users have to:
- Click the field to highlight it.
- Type the number correctly.
- Click to leave the field or click to highlight the following field.
Now, take a look at how Lendingtree does it:
For all the fields above, users don't have to type anything. All they have to do is to scroll or click options. That makes it much easier to fill out Lendingtree's form while also removing the risk of errors caused by typos.
Auto-fill
Another way to reduce the need for typing is by using auto-fill features whenever possible.
Auto-fill is typically useful when you need users to fill out their addresses.
You have the option of using auto-fill solutions like Google's:
And if you don't want to or can't use Google, other services help you with auto-complete superpowers. This one, for example, will fill out City and State fields based on the user's Zip code.
Avoid drop-downs when possible
Drop-down fields are typically not the best option as they require a high number of minimum interactions to select a value:
- Tap
- Scroll
- Probably scroll more
- Tap
Some alternative options with lower friction are:
- List all options on the screen if it's not an extensive list.
- Sliders or increase/decrease fields.
- Simple text box (for birth dates, for example).
- One clarifying note: this one requires typing, which I just said isn't typically a great idea. But typing only numbers (for birth dates) is an easier task if we compare it to some terrible birth date fields on some websites.
Use single-column designs
Multiple researchers identified that users take less time to complete single-column forms. That happens because the information is quicker to understand this way, as eyes follow a natural downward path.
Don't use a “confirm password” field
Asking people to enter their password twice is annoying and will probably hurt your business.
If people make mistakes when typing their password, just let them use your password recovery system later. But even that “downside” might not happen.
Formisimo tested removing their “confirm password” field and saw a clear improvement in many metrics. And they didn't notice any change at all in the percentage of users requesting password resets.
Explain why you're asking for data that users might not be expecting
When users are asked something they weren't expecting, that friction might make them reconsider moving forward. To reduce such impact, make sure you explain why you need that information.
For example, Chime requires the phone number when you create your account, even on Desktop. That might be confusing for some reasons and might leave others thinking that they will start getting irritating calls if they give such information.
To deal with that friction, Chime explains that the phone number will be used to protect the account with two-factor authentication.
See what they did there? They answered an objection with an additional benefit - protection.
Increase the persuasion power of your form
It's not because users reached your form that they are ready to convert. Some might still need convincing before deciding to move forward. But luckily, there are some efficient tactics to help with that.
Remind users of the key benefits
Reminding users why they should fill out a form will increase their motivation, even if they already read that information on a previous page. And there's also the chance that some users are landing directly on your form. Presenting critical benefits on the form is especially effective with them.
Another option is to make a final push by giving visitors one “bonus” reason to sign up. Coinbase highlights a $200 bonus for new users:
Tackle objections
There might be one specific reason why users are unsure if they should fill out the form. For financial services, two common objections are:
- Will this impact my Credit Score?
- Do I need to add my Credit Card at some point?
Make sure that you know what your user's common objections are and tackle them directly and with high visibility in your forms.
A great place to do that is close to CTA, an area where many users will be looking to decide whether to move forward or not.
Show what other people think about you
Social proof is a powerful tool to make people believe that they are doing the right thing. After all, “If other people like me enjoy it, I will enjoy it too, right?”
That's what Wealthfront is betting on, as seen in the image above.
It's also worth noting that having other people say good things about you is way more persuasive than saying those same things yourself. So use the social proof you have wisely. Here are some options for you to consider:
- Do you have outstanding reviews on an App Store, Google Maps, or a Reviews aggregator?
- Have you won an award, or do you have other strong trust factors like the number of customers?
Oh, and you probably have a few nice testimonials, right? You can use them. But make sure to:
- Make them believable. If possible, present the customer's photo or a video. Just like you, your users tend to believe that a lot of the testimonials they read online are fake.
- Don't add long testimonial paragraphs. Just like you, most of your users won't bother to read them. Short, punchy phrases are way more effective.
Get your buttons right
The heart of any form is its CTA button. Its positioning, micro-copy, and functionality can heavily influence the form conversion rate. Here's how to get it all right:
Don't obsess about color
It's funny how some people spend a lot of time thinking and experimenting with CTA colors. For these cases, I'd only ask you this:
What was the last time you decided to buy something because the CTA was green and not red? (Or any other crazy color change you can think of.)
You shouldn't worry about the specific color you will use for the CTA. What really matters is the contrast. The more a CTA contrasts with the content around it, the easier it is for users to spot it. And that's what really matters.
On the Zopa form above, you can see that the CTA is very easy to spot, so users immediately know where they have to go to move forward.
Use the inactive state
Having a “inactive” state for CTAs can be very useful to guide users. Yet, most websites ignore it.
As you can see on the form above from Creditkarma, the CTA has a light grey color, hinting that it isn't "available" yet. Once users fill out all the required fields, the CTA will become green.
The advantages of doing this are:
- Users won't click the CTA before everything looks right, avoiding the frustration of getting an error.
- Once everything is filled out correctly, the animation that turns the CTA green will probably get the users’ attention, which helps them understand that this is where they should click next.
Make buttons big enough for users’ fingers
According to studies from the Nielsen Norman Group, any clickable element on a phone should have dimensions of at least 1cm × 1cm (0.4in x 0.4in).
Anything smaller than that will cause problems for some users.
And it's also important to keep clickable elements distant from each other, to make sure users won't accidentally click the wrong one.
Remember: our fingers are not as precise as our mouse cursors. Not to mention the contexts that could add more complexity on mobile, like users commuting or under high luminosity (reduced visibility).
The study from NN Group has identified that the size of the “X” button and its proximity to the “Follow” button causes difficulties for users.
Tackle abandonments
It's hard enough to convince people to start filling out a form. But that's not enough. Inevitably, a percentage of them won't finish filling it out. You must implement tactics to deal with this tough reality while reducing these abandonments as much as possible.
Ask for the email upfront
By quickly capturing the users’ emails (and some level of opt-in), you have the ability to re-connect with the ones who leave before finishing the form via retargeting and/or Email Marketing.
Maybe that's why the first field Chime shows is Email:
Let users save their progress
If you have a long form or one that requires information that users might not have at the moment, it's essential to let them save their progress to continue from where they left later.
Not to mention that by letting them “save their progress,” you can already establish a first level of relationship by capturing their email address.
American Family Insurance lets users save their progress and offer a secondary CTA to let them continue their process instead of starting from scratch:
Clearly identify optional fields
If users can immediately see that they don't have to fill out specific fields, their perceived effort will be lower, increasing the chance of them deciding to move forward. Wealthfront writes “(optional)” on each non-required field, which is typically easier for users to understand than the classic “*” approach for required fields.
Handle errors properly
It's critical to reduce the number of errors users will get in your form. And we have some ideas below to help you with that.
But it's impossible to avoid all errors. No matter what you do, people will still make some mistakes.
That's why you'll also find some recommendations on better handling the errors some users will get when interacting with your form.
Start by tracking your errors
You already know that you can't optimize what you can't measure. Yet, most Marketing teams don't have access to precise data on what errors their users are facing on forms and how often.
Actually, you can track even more things to get a deep understanding of what is happening on your form over time, like how much time people spend on each field or what's the last field they interact with before leaving the form.
Here are 2 tools that can help with all that:
Offer instant feedback
Aim always to inform immediately if they've done something wrong or right. Field by field. This will make it quicker and less stressful to fix errors.
Without instant feedback, you have to submit the whole form, wait for an error message, and go back to the problematic field.
With instant feedback, you are already on the field in case. Understanding the problem and fixing it will be way easier.
Here's how Stripe does it:
Compare the Stripe experience to the experience of filling out the form below on visa.com. I made a lot of mistakes on purpose. But still got no validation before clicking the CTA:
It's certainly stressful for a user to click the CTA and suddenly see a red sea of problems to fix, like the one below.
An especially great field for real-time feedback that most sites ignore is the password field.
You should show a list of your password requirements and immediately check the ones already being covered by users as they type.
That's way more helpful than the example above from Visa, where you'll only see if something is missing after you click the CTA. Besides, the error message is not super friendly:
Make error messages useful
They should be as helpful as possible. Do they describe what went wrong? Do they help a user fix it?
Take a look at the error message below from Wise.
It doesn't explain what could be wrong with the field. It's just “not a valid phone number.”
Chime does a better job with its error message by mentioning exactly what the field should look like.
Keep an eye out for common mistakes
Intuit identifies common mistakes when filling out emails, like misspelling "gmail.com".
What are the common mistakes your users make that you can proactively prevent or alert them?
Also consider:
- Blocking characters from fields where they could be harmful. The credit card field should accept only numbers, for example.
- On mobile, it helps to show the most relevant keyboard to the user. Below, you can see an example from Square. Notice the email-specific keyboard, with a more accessible "@" than the regular keyboard.
A final gift: download a checklist with ALL our recommendations
Phew! We've covered a lot in this post, and you might be asking yourself how to operationalize all the optimizations, right?
Don't worry! To help you share these tactics with your teammates and keep track of how your forms are doing, we've compiled a checklist with ALL our recommendations from this article.
Create a checklist file for each one of your forms to have a clear overview of everything you can do to improve them.
You can download the checklist for free here.
