Form submission results page

About this pattern

This pattern helps users to understand what happens next when they have submitted a form.

There are three possible result when a form is submitted:

• successful
• not successful
• incomplete

Successful

If a user has submitted a form and the result is successful, use a notification panel to display a success message and provide additional supporting information underneath.

<div class="ds_notification-panel ds_notification-panel--success">
    <h1 class="ds_notification-panel__title">Thank you</h1>
    <div class="ds_notification-panel__content"><p>Your Saltire Scholarship Application form has been successfully submitted.</p></div>
</div>

<p>We have sent you a confirmation email. If not received, please check your spam emails also.</p>

<h2>What happens next</h2>

<p>You will receive an email about the decision on your application after 10 working days. You will also receive a confirmation in the post - please allow 1 week for delivery.</p>

Not successful

If a user has submitted a form and the result is not successful, describe to the user why their result is not successful.

Inset text can be useful to highlight the reason the result is not successful so it can be easily understood at a glance.

Users might be disappointed or unhappy that they have not been successful, so tone is very important on a ‘not successful’ page. You should work with a content designer to create appropriate content.

<h1>You will not be able to get Saltire Scholarship</h1>

<div class="ds_inset-text">
    <div class="ds_inset-text__text">
        <p>You can only receive the Saltire Scholarship if you filfil the <a href="#">eligibility criteria</a> and apply by Friday 28 May 2023 at midnight GMT.</p>
    </div>
</div>

<p>Based on what you have told us, you are not currently eligible and you will not be able to apply for the Saltire Scholarship.</p>

Incomplete

Sometimes the result of a form submission is not immediately known.

This could be because:

• the result of that submission will not be known for a period of time
• there are further actions the user needs to take, such as sending some physical documentation

Always let the user know what the next steps are.

If the user needs to wait to know what the result is, let them know how long they will need to wait and how they will find out the result.

If the user has to carry out some further activities, tell the user clearly what those activities are. For example, if a user needs to submit a physical document tell them what the document is, where they need to send it, and whether there is a date that it needs to be sent by.

<h1>We will be in touch soon</h1>

<p><strong>Thank you for providing your details.</strong></p>

<p>We will send you an email once your results are ready. This can take up to 15 minutes.</p>

When to use this pattern

You should use this pattern at the end of a form journey to tell users the result and what happens next, if anything.

Evidence

The pattern for form submission results has been used and has tested well on a Saltire Scholarship eligibility form and on Scottish Social Security benefit forms. Users found this pattern useful and clear after they submitted the forms.

Website analytics

The form submission result page should have a unique URL, separate from the form itself, so that conversion rates can be easily calculated. To understand user behaviour for any onward journeys, you can track:

• clicks on links on the page
• the click URL, the click text, or a data attribute for button clicks

The data attributes are added automatically by the Design System’s ‘tracking’ script.