Formclick

How to Receive Form Submissions From GitHub Pages

GitHub Pages can't run server code, so forms need somewhere else to go. Here's how to add a working contact form to a GitHub Pages site — Jekyll, plain HTML or any generator.

FFormclick Team3 min read
Close-up of a hand holding a 'Fork me on GitHub' sticker, blurred background.
Photo by RealToughCandy.com on Pexels
On this page
  1. Why forms don't work on GitHub Pages by themselves
  2. The fix: point the form at a form backend
  3. Step by step
  4. Jekyll
  5. Hugo, Astro, Eleventy and other generators
  6. Staying on the page instead of redirecting
  7. Is it safe to commit the access key to a public repository?
  8. Custom domains
  9. Troubleshooting

GitHub Pages is a wonderful free host for portfolios, documentation and project sites. But it only serves static files — there's no PHP, no Node.js, no serverless functions. Add a contact form and press Submit, and GitHub Pages has nothing to process it with.

The solution is to send the form somewhere that can process it: a form backend.

Why forms don't work on GitHub Pages by themselves

When a form is submitted, the browser sends a POST request to the URL in the form's action. GitHub Pages can only answer requests for files, so a POST to your own site fails (usually with a 405 Not Allowed error). And because there's no server-side code, there's nothing to send you an email.

The fix: point the form at a form backend

<form action="https://api.formclick.io/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <input type="hidden" name="subject" value="New message from my GitHub Pages site">
  <input type="hidden" name="redirect" value="https://yourname.github.io/thanks/">
  <input type="checkbox" name="botcheck" style="display: none;">

  <label for="name">Name</label>
  <input id="name" name="name" required>

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>

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

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

That's the whole setup. Formclick receives the submission, filters spam, emails you and stores it in your dashboard, then sends the visitor to your thank-you page.

Step by step

  1. Create a free Formclick account and a form. Copy the access key.
  2. Add the form to any page in your repository (for example contact.html or contact.md).
  3. Create a thank-you page — thanks.html or thanks/index.html — so visitors land somewhere friendly.
  4. Commit and push. GitHub Pages rebuilds your site.
  5. Send a test message from the live site.

Jekyll

GitHub Pages builds Jekyll sites automatically. Markdown pages can contain raw HTML, so you can paste the form straight into contact.md:

---
layout: page
title: Contact
permalink: /contact/
---

Have a question? Send me a message.

<form action="https://api.formclick.io/submit" method="POST">
  <input type="hidden" name="access_key" value="{{ site.formclick_key }}">
  <input type="hidden" name="redirect" value="{{ '/thanks/' | absolute_url }}">
  …your fields…
</form>

Keep the key in _config.yml so every form uses the same value:

formclick_key: "your-access-key"

Hugo, Astro, Eleventy and other generators

Any static site generator works the same way: the form is just HTML. Put it in a partial or component, keep the access key in your site config, and deploy to GitHub Pages with GitHub Actions as usual. See How to Handle Forms on Static Websites for an Astro example.

Staying on the page instead of redirecting

Add Formclick's script and the form submits in the background, showing a success message in place:

<script src="https://cdn.formclick.io/formclick.min.js"></script>

Is it safe to commit the access key to a public repository?

Yes. A Formclick access key can only send submissions to that one form — it can't read your submissions, change settings or access your account. Spam filtering, the honeypot field and rate limits protect the form. On paid plans you can also restrict the form to your own domain, so even a copied key won't work from other websites.

Custom domains

If your GitHub Pages site uses a custom domain, use that domain in the redirect URL. On Formclick's Free plan, the thank-you page needs to be on the same website as the form.

Troubleshooting

  • 405 error on submit: the form's action still points to your own site. Change it to https://api.formclick.io/submit.
  • No email arrives: check your spam folder and the Formclick dashboard — the submission will be there even if the email was filtered.
  • Redirect doesn't happen: check the redirect value is a full https:// URL on your site.

Ready-made designs are available in our HTML form templates, and the free plan includes 250 submissions a month — plenty for most GitHub Pages sites.

Found this useful? Share it.

All articles