Form error

This is how we show an error for a whole form


Remember, when working with forms, add the aria-describedby attribute, and some helpful text, to allow a seamless experience for everybody.

Keep your form on a white background to enable full contrast ratios for form validation messages.

How we design them

  • Try to be helpful
  • Use this when you can’t put errors next to the inputs on a page

How we use them

1. Form error example

View demo Open in new window
320 x 568
View code
<div class="gg-c-form-error" role="alert">
  <p class="gg-u-screen-reader-only">
    Error.
  </p>
  <img src="https://www.giffgaff.design/iconography/icons/library/exclamation-circle-alert-lost-stolen.svg" class="gg-c-form-error__icon" />
  <div class="gg-c-form-error__message">
    <p class="gg-c-form-error__title">
      Looks like you've made a mistake
    </p>
    <p>
      But it's ok, this is how you can fix it.
    </p>
    <p>
      Keep seeing this message? <a href="#" class="gg-u-link">Try this instead</a>
    </p>
  </div>
</div>