A Form Confirmation Shown Off the Screen

Tap send, see the same form

On a phone, a contact or booking form can run several screens long. The visitor fills in every field, scrolls to the bottom and taps send.

Somewhere, a message says thank you, we will be in touch. It sits at the top of the form or the page, a few screens above where the visitor is looking.

What they see is the form, or the bottom of the page, or the form emptied of everything they typed. Nothing says it worked.

So they do what anyone would: send it again, phone to check, or close the page and try someone else.

Why the message lands out of sight

Forms are usually built and checked on a desktop screen, where the whole form fits in view and a message above it is impossible to miss.

Some send without reloading the page and write the message into the space above the form. On a phone the screen stays at the button, where the only change may be the fields clearing.

Others reload the page with the message at the top of the content. On a phone, a header photograph often takes up the entire first screen, leaving the message out of view.

Either way the confirmation exists. It just never meets the person it was written for.

What visitors do next

• Send it again, sometimes twice more.
• Phone the business to ask whether it arrived.
• Try another route, such as email or a Facebook message.
• Give up and contact someone else.
• Come back later from a computer and start over.

The fourth is the one nobody counts. Duplicates arrive in the inbox where they can be seen; a visitor who gave up leaves nothing behind, and the form looks as if it works.

Error messages hide in the same place

The same layout hides error messages. A visitor who misses a required field taps send, and the warning appears at the top of the form while they look at the button.

They tap again, nothing visible happens, and they decide the site is broken.

Errors belong beside the field that caused them, with the screen moving to the first one. Better still, each field can say what it needs before anyone gets it wrong.

A page of its own

The clearest fix is a separate confirmation page. After sending, the visitor goes to a new page that opens at the top and says in its first line that the message arrived.

A new page cannot be mistaken for the old one. It loads fresh, fits a phone, and leaves no form on screen to tempt a second send.

It also gives the business something to measure. Analytics can count visits to the confirmation page as a goal, which counts forms actually sent rather than visits to the contact page.

What the confirmation page should say

Start with the confirmation in plain words: thank you, your enquiry has been sent.

Then say what happens next and when: a reply within one working day, from which email address, and a reminder to check the spam folder if nothing arrives.

Where the form tool allows, repeat the key details sent, such as the dates asked about, so a mistake can be spotted. And give a phone number for anything urgent.

A worked example

A bed and breakfast in a former lighthouse keeper's house, on a rocky point a short drive from a ferry terminal, takes availability enquiries through a form at the bottom of its rooms page.

On a phone the form sat four screens down, beneath photographs of each room. After a guest tapped send, the page reloaded at the top, with a small green thank-you line hidden below the header photograph.

The owners noticed identical enquiries arriving minutes apart, sometimes three in a row, and calls from guests asking whether their request had gone through.

Each duplicate meant another reply to write, and once both owners answered the same guest separately and held two rooms for one stay. How many guests gave up without trying again, nobody could say.

The form now leads to a confirmation page that thanks the guest, repeats the dates requested, promises a reply by the next morning and gives the phone number. The duplicates have largely stopped.

When a separate page is not possible

Some form tools cannot send visitors to a new page. The next best fix replaces the form itself with the message, in the same spot, so the visitor sees it where they were looking.

The page can also scroll to the message after sending. Moving the keyboard focus there too, not just the screen, lets visitors using screen readers hear that it worked.

Whatever the method, disable the send button after the first tap and change its label to sending, so an impatient second tap does nothing.

Testing on a real phone

Fill in the form on a real phone, ideally one iPhone and one Android, and send it the way a visitor would, with a thumb, from the bottom of the page.

Look at the screen the moment it finishes. If you have to scroll to find out whether it worked, so does every visitor.

Then check the inbox and the spam folder. Test again whenever the page, the theme or the form tool changes.

The counter-case

A short form near the top of a page, with its message right beside the button, may already work on phones and need only the test.

A business whose enquiries come almost entirely from office computers, such as one selling to other businesses, has less at stake, though the test still takes only minutes.

And the odd duplicate has other causes, from a slow connection to an impatient double tap.

But wherever a form is long and its message appears out of view, a confirmation page, or a message brought to the visitor, is the fix.

The second after sending

1. Send your form from a real phone.
2. Note what is on screen right after.
3. Add a confirmation page that opens at the top.
4. Say what happens next and when.
5. Show errors beside the fields that caused them.
6. Disable the button after the first tap.
7. Count confirmations as a goal in Analytics.

Step two is the one that decides everything else. Whatever is on screen in the second after sending is all the visitor knows, and a confirmation they cannot see does not exist for them.

Letting people check what they are sending before the final tap is covered in orders that cannot be checked before sending.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.