Skip to content

Instantly share code, notes, and snippets.

@Nooshu
Created March 10, 2026 00:14
Show Gist options
  • Select an option

  • Save Nooshu/882a6cc0521479659df63e5f442df817 to your computer and use it in GitHub Desktop.

Select an option

Save Nooshu/882a6cc0521479659df63e5f442df817 to your computer and use it in GitHub Desktop.
The accessible form I use on my blog for the contact page.
<form id="fs-frm" action="/api/contact" method="POST" aria-labelledby="page-title" novalidate>
<div id="form-error-summary" class="form-error-summary" role="alert" tabindex="-1" hidden></div>
<div id="form-status" class="form-status" role="status"></div>
<div class="abc" aria-hidden="true">
<input type="checkbox" name="_its-a-trap!" tabindex="-1" autocomplete="off" />
</div>
<input type="hidden" name="_redirect" value="/contact/thanks/" />
<input type="hidden" name="_append" value="false" />
<input type="hidden" name="_email.subject" value="New Message from Nooshu.com" />
<fieldset>
<legend class="visually-hidden">Contact form</legend>
<div class="form-group">
<label for="name" class="required">Full Name:</label>
<input type="text" id="name" name="name" autocomplete="name" required />
<span id="name-error" class="form-error" hidden></span>
</div>
<div class="form-group">
<label for="email" class="required">Email:</label>
<input type="email" id="email" name="email" autocomplete="email" placeholder="hello@example.com" required />
<span id="email-error" class="form-error" hidden></span>
</div>
<div class="form-group">
<label for="message" class="required">Message:</label>
<textarea rows="7" id="message" name="message" required></textarea>
<span id="message-error" class="form-error" hidden></span>
</div>
</fieldset>
<input type="hidden" name="g-recaptcha-response" value="" />
<button type="submit">Send Message</button>
</form>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment