GitHub Pages

Contact form on GitHub Pages without a backend

GitHub Pages hosts static files only, so a contact form has nowhere to post. Heartdove is the backend: the browser posts the form to the endpoint, the message is saved first, and the alert email is tracked until it is delivered or bounced.

Updated 20 October 2026

Plain HTML and the React, Vue and Svelte adapters have been tested in real browsers. This guide places the same snippet on GitHub Pages; it has not yet been run end to end on GitHub Pages itself. If something differs, the docs list what each platform needs.

Add the form to GitHub Pages

Paste the form into index.html or any page in the repository, commit, and push. Works with plain HTML and with Jekyll sites built by GitHub Pages.

index.html
<!-- Any page on your GitHub Pages site -->
<form action="https://submit.heartdove.com/v1/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
  <label>Email <input type="email" name="email" required /></label>
  <label>Message <textarea name="message" required></textarea></label>
  <!-- Hidden spam trap: people never see it, bots tick it -->
  <input type="checkbox" name="botcheck" tabindex="-1" autocomplete="off" style="display:none" />
  <button type="submit">Send message</button>
</form>

Project sites live under a path, for example username.github.io/project, but the origin to register is still https://username.github.io. If you use a custom domain, register that too.

Register your website address

Heartdove accepts a submission only from the exact website addresses registered on the form, so a copied key cannot be fired from somewhere else. Register every address the form is published on; each form takes up to 10, and registering a www address covers the bare domain too. For a GitHub Pages site that usually means:

  • https://username.github.io
  • https://www.yourdomain.com

Testing locally? Register your local address, such as http://localhost:3000, as well.

What happens after submit

The message is saved to your inbox before any email is sent, so a failed alert never loses the enquiry. The alert is then tracked step by step and shown on the message:

  • CapturedSaved and searchable
  • Accepted by providerHanded to the email provider
  • DeliveredThe recipient’s mail server accepted it
  • BouncedShown with the reason; the address is paused

Over your monthly allowance, submissions are held, visibly, and released automatically. Nothing is billed as overage, and each plan’s hold capacity is on the pricing page. The Free plan includes 500 submissions a month with an instant alert for each.

Spam, without a CAPTCHA

Every form gets the exact origin check, a per-visitor rate limit, the hidden trap field and spam scoring with quarantine. Cloudflare Turnstile can be turned on per form for a human check, and is never required. Read how the layers work.

Questions

Is it safe to put the access key in my page?

Yes. The key is public and only identifies the form; it does not grant access to anything. Submissions are accepted only from the website addresses you register, each visitor is rate limited, and every message is scored for spam before it is stored.

Do I need a CAPTCHA?

No. Every form gets an exact origin check, a per-visitor rate limit, a hidden trap field and spam scoring with quarantine. Cloudflare Turnstile is optional for forms that want a human check.

Can I send visitors to my own thank-you page?

Yes. Add a hidden _redirect field with a full URL on one of the websites registered for the form. JSON requests get a receipt instead of a redirect.

What happens if I go over the free limit?

Submissions above your monthly allowance are held, visibly, for at least seven days and released automatically when your allowance resets. Each plan’s hold capacity is on the pricing page, and there is no overage charge.

Never lose another enquiry.

Connect your first form in a few minutes. Your existing design stays exactly as it is.