HTML forms

HumanPass integrates with native forms by adding a hidden response field and participating in browser validity when required is present.

Markup

<script
  src="https://humanpass.valgix.com/widget/0.1.0/humanpass.min.js"
  defer
></script>

<form method="post" action="/contact">
  <label>
    Email
    <input name="email" type="email" required />
  </label>

  <label>
    Message
    <textarea name="message" required></textarea>
  </label>

  <humanpass-widget
    data-humanpass-sitekey="hp_site_live_REPLACE_ME"
    data-humanpass-action="contact"
    required
  ></humanpass-widget>

  <button type="submit">Send message</button>
</form>

On success, the submitted form contains:

humanpass-token=hp_response_...

Backend processing order

1. Parse and bound the incoming form body.
2. Read humanpass-token.
3. Verify it with HumanPass.
4. Confirm the expected action and hostname.
5. Continue the protected operation only after success.

Do not perform side effects such as creating an account, sending email, or charging a payment before verification succeeds.

Custom field name

<humanpass-widget
  data-humanpass-sitekey="hp_site_live_REPLACE_ME"
  data-humanpass-hidden-field-name="captcha-response"
  required
></humanpass-widget>

Your backend must then read captcha-response.

Expired responses

The widget clears its hidden field when the response expires or the widget is reset. If a visitor waits too long before submitting, obtain a new response instead of reusing the expired one.