Add a contact form to GitHub Pages or Cloudflare Pages

#html #tutorial #webdev #tools

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.

1. Choose a form backend

Choose a form backend that accepts a plain HTML POST and gives you an endpoint URL. You will use that URL in your form's action attribute.

For a name, email address and message, the form has this structure. Replace YOUR_ENDPOINT_URL with the endpoint provided by your chosen backend.

<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

A hidden field can act as a spam trap when the backend supports honeypot filtering. If a bot fills it in, the backend can identify the submission as spam.

Field names differ between backends; use the one your backend documents for spam. The example uses _gotcha, which may need changing.

When testing, leave the hidden field empty.

3. Configure your endpoint

Use the endpoint URL and any setup instructions provided by your chosen backend. Check whether email verification or additional configuration is required before submissions can reach your inbox.

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 inbox. Test the deployed form, with the real endpoint in its action.

Before choosing a backend, check how long submissions are stored and whether file uploads are supported.

This article was prepared with AI assistance.

DEV Community