Add a contact form to GitHub Pages or Cloudflare Pages

A contact form needs somewhere to send its data. HTML sends the submission to the address in the form's action attribute; the page itself has no mailbox. A thank-you message alone does not establish that an email arrived.

GitHub Pages and Cloudflare Pages can publish your static HTML. To receive submissions by email without writing your own server, point the form at a service endpoint.

Disclosure: I make Lamofel, the service used in this example.

1. Generate the HTML

Open the contact form generator and choose your fields. Generating the HTML does not require an account.

For a name, email address and message, the form has this structure. YOUR_ENDPOINT_URL below stands for the real endpoint you will claim in step 3.

<form action="YOUR_ENDPOINT_URL" method="POST">
  <label for="field-name">Name</label>
  <input id="field-name" type="text" name="name" required>
  <label for="field-email">Email</label>
  <input id="field-email" type="email" name="email" required>
  <label for="field-message">Message</label>
  <textarea id="field-message" name="message" rows="5" required></textarea>
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" hidden>
  <button type="submit">Send message</button>
</form>

Paste the form into a page in the folder you publish, such as contact.html.

2. Keep the hidden spam trap

Leave the _gotcha input as generated. It is the form's spam trap: a submission with that field filled in is marked as spam. Spam-flagged messages are stored but never emailed. This matters when testing: filling every field, including the hidden one, would mark your test as spam.

3. Claim the endpoint

The generator's initial output contains CLAIM_YOUR_ENDPOINT in the form action. That placeholder is not your live endpoint. On the result page, enter the email address where you want submissions to arrive, then press "Send messages to my email". This creates your account, form and live endpoint immediately. The claim result provides HTML containing your real endpoint. Use that HTML in your page, replacing the placeholder version. Email delivery goes to the address you have confirmed.

4. Publish on your host

For GitHub Pages, commit and push the updated file to your repository. Changes can take up to 10 minutes to appear after a push. GitHub Pages serves static files and does not support server-side PHP, Ruby or Python.

For Cloudflare Pages, push the updated file to the Git repository connected to your Pages project. Pages supports GitHub and GitLab repositories.

5. Test the published page

Open the live contact page and submit a test message. Check that it arrives in your confirmed inbox. Test the deployed form, with the real endpoint in its action.

Before using this form, note two limits: submissions are stored for 30 days and then deleted, and file uploads are not supported. A form that needs a file upload field requires a different solution.

The full walkthrough is in the static-site contact form guide.