Form submission results page

About this pattern

This pattern tells users the result of submitting a form and what happens next.

When to use this pattern

Use this pattern at the end of a transaction or application form. 

There are 3 possible results 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 more 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 submitted.</p></div>
</div>

<p>We've sent you a confirmation email. Check your spam inbox if you do not get an email.</p>

<h2>What happens next</h2>

<p>You'll get an email about the decision on your application after 10 working days. You'll also receive a confirmation in the post.</p>

Not successful

If a user has submitted a form and the result is not successful, tell the user why.

Inset text can be used 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. Work with a content designer to create appropriate content.

<h1>Sorry, you're not eligible for the Saltire Scholarship</h1>

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

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

Incomplete

The result of a form submission may not be known because:

• the form needs to be processed and decided
• there are further actions the user needs to take, such as sending documents

When the result is not yet known, tell the user:

• what happens next and when
• how they'll find out the result
• what they need to do, if anything
• how and when to submit physical documents
• contact details to get help
• a reference number, if there is one

<h1>We'll be in touch soon</h1>

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

<p>You'll get an email once your results are ready. This can take up to 15 minutes.</p>

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.