Skip to main content

Keep a Record

Help users save, download, or print important information from their interactions with government services so they have a personal copy for their records.


Overview

The "Keep a record" pattern ensures users can retain important information after completing transactions, submitting forms, or interacting with government services. This pattern addresses the fundamental need for users to have documentation of their actions and the information they provided or received.

Government interactions often involve critical information that users may need to reference later, such as confirmation numbers, submitted data, deadlines, or next steps. Providing multiple ways to save this information helps users regardless of their technical capabilities or access to technology.


Key Elements

Confirmation Pages

Confirmation pages display a summary of the information users have submitted. They serve as the primary record of a completed transaction and should include all relevant details the user might need to reference.

Component Preview

Application submitted successfully

Your application has been received. Your confirmation number is APP-2024-78432. Please save this number for your records.

Submission Summary

  • Confirmation number: APP-2024-78432
  • Date submitted: January 15, 2024
  • Application type: Benefits renewal
  • Expected processing time: 5-7 business days

Component Code

<div class="usa-alert usa-alert--success">
  <div class="usa-alert__body">
    <h4 class="usa-alert__heading">Application submitted successfully</h4>
    <p class="usa-alert__text">
      Your application has been received. Your confirmation number is
      <strong>APP-2024-78432</strong>. Please save this number for your records.
    </p>
  </div>
</div>

<div class="usa-summary-box margin-top-3" role="region"
     aria-labelledby="summary-box-key-information">
  <div class="usa-summary-box__body">
    <h4 class="usa-summary-box__heading" id="summary-box-key-information">
      Submission Summary
    </h4>
    <div class="usa-summary-box__text">
      <ul class="usa-list">
        <li><strong>Confirmation number:</strong> APP-2024-78432</li>
        <li><strong>Date submitted:</strong> January 15, 2024</li>
        <li><strong>Application type:</strong> Benefits renewal</li>
        <li><strong>Expected processing time:</strong> 5-7 business days</li>
      </ul>
    </div>
  </div>
</div>

Print Functionality

Provide a clear print option that generates a print-friendly version of the confirmation or summary page. The print layout should be optimized for paper, removing unnecessary navigation and formatting elements.

Component Preview


Component Code

<div class="usa-button-group">
  <button type="button" class="usa-button usa-button--outline"
          onclick="window.print()">
    Print this page
  </button>
</div>

<!-- Add print styles in your CSS -->
<style>
@media print {
  .usa-header,
  .usa-footer,
  .usa-sidenav,
  .usa-button-group {
    display: none;
  }

  .usa-summary-box {
    border: 1px solid #000;
    break-inside: avoid;
  }
}
</style>

Download Options

Offer downloadable formats such as PDF for users who want to save a digital copy. Downloads should include all relevant information and be clearly labeled with the document type and date.

Component Preview

Download confirmation (PDF) Download summary (PDF)

Component Code

<div class="usa-button-group">
  <a href="/path/to/confirmation.pdf" class="usa-button">
    Download confirmation (PDF)
  </a>
  <a href="/path/to/summary.pdf" class="usa-button usa-button--outline">
    Download summary (PDF)
  </a>
</div>

Reference Numbers

Provide unique reference or confirmation numbers that users can use to track their submission or reference it in future communications. These should be prominently displayed and easy to copy.

Component Preview

Your reference number

REF-2024-00123456

Use this number when contacting us about your submission. You will also need this number to check your application status online.


Component Code

<div class="usa-alert usa-alert--info">
  <div class="usa-alert__body">
    <h4 class="usa-alert__heading">Your reference number</h4>
    <p class="usa-alert__text">
      <span class="font-mono-lg text-bold">REF-2024-00123456</span>
      <br><br>
      Use this number when contacting us about your submission.
      You will also need this number to check your application status online.
    </p>
  </div>
</div>

Email Confirmations

Offer users the option to receive a copy of their confirmation via email. This provides an additional backup and allows users to access their records from any device.

Component Preview

Would you like to receive a copy by email?

Component Code

<fieldset class="usa-fieldset">
  <legend class="usa-legend">Would you like to receive a copy by email?</legend>
  <div class="usa-checkbox">
    <input class="usa-checkbox__input" id="email-confirm" type="checkbox"
           name="email-confirmation" value="yes">
    <label class="usa-checkbox__label" for="email-confirm">
      Yes, send me a confirmation email
    </label>
  </div>
  <label class="usa-label margin-top-2" for="email-address">Email address</label>
  <input class="usa-input" id="email-address" name="email-address"
         type="email" placeholder="email@example.gov">
</fieldset>


Guidance

When to use the keep a record pattern

After form submissions.
Provide confirmation and summary information after users submit applications, registrations, or other forms.
After transactions.
Give users a record of completed transactions, including payments, renewals, or status changes.
After applications.
Provide documentation of submitted applications, including confirmation numbers and expected timelines.
When providing important information.
Whenever users receive critical information they may need to reference later, such as deadlines, requirements, or next steps.

Best practices

Include all relevant details.
Ensure confirmation pages include the complete information users submitted, along with any reference numbers, dates, and next steps.
Provide multiple save options.
Offer print, download, and email options to accommodate different user preferences and technical capabilities.
Make reference numbers prominent.
Display confirmation and reference numbers clearly using a monospace font and larger text size to make them easy to read and copy.
Optimize print layouts.
Create print-specific stylesheets that remove navigation, focus on content, and format information clearly for paper.
Generate accessible PDFs.
Ensure downloadable documents are properly tagged and accessible to users with screen readers.

Accessibility considerations

Use proper heading structure.
Organize confirmation content with semantic headings so users can navigate easily with assistive technology.
Ensure sufficient color contrast.
Reference numbers and important information should meet WCAG contrast requirements, especially when using monospace fonts.
Provide text alternatives for icons.
If using icons for print or download buttons, include appropriate text labels and aria-label attributes.
Make downloadable content accessible.
PDF documents should be tagged properly and include alternative text for any images or graphics.
Test with screen readers.
Verify that confirmation information and interactive elements (buttons, forms) work correctly with assistive technology.

USWDS Documentation

For more guidance, view the USWDS Keep a Record Pattern Documentation.

Looking for U.S. government information and services?
Visit USA.gov