Contact Form

A contact form with all common input fields and form elements.

WordPress

patterns/contact-form-static.php


patterns/contact-form-two-columns-static.php

Figma

Docs

  • Label all fields clearly and do not hide the label during input (WCAG SC 3.3.2)
  • Mark required fields, or indicate whether all fields are required or optional.
  • Prevent invalid input upfront, for example by disabling form submission when input is invalid or by validating fields in real time. When errors do occur, provide helpful error messages – ideally in direct context of the invalid field – that help users correct the mistake (WCAG SC 3.3.3)
  • Avoid captchas and puzzle challenges, as these are in the vast majority of cases a barrier to accessible use (WCAG SC 1.1.1 + SC 3.3.8). Alternatives include background checks that require no user interaction. Integrating third-party services for validation or security may have data privacy implications.
Back to top