How to add a contact form to GitHub Pages

GitHub Pages is ideal for publishing fast, low-maintenance static websites, but it cannot process contact-form submissions on its own.

In this guide, we’ll add a working HTML contact form, connect it to a hosted form endpoint, restrict submissions to the correct GitHub Pages origin, and test the complete flow—without deploying a server or serverless function.

Add a working form without a backend

GitHub Pages publishes static HTML, CSS, and JavaScript. It does not provide application code that can receive and process a form submission.

PostMyForm supplies the hosted form endpoint while your website remains a normal GitHub Pages site.

1. Create the form in PostMyForm

Sign in to PostMyForm, open Forms, and create a form.

Configure:

• A recognizable form name.
• The email address that should receive notifications.
• The allowed origin for the GitHub Pages site.
• An optional success redirect URL.

For a project site such as:

https://username.github.io/project-name/

Use the following allowed origin:

https://username.github.io

The project path is not part of the browser origin.

When the site uses a custom domain, enter the exact origin shown in the browser, such as:

https://www.example.com

2. Add the fields

Add the fields required by the contact form.

A typical contact form includes:

• Name
• Email
• Message

Mark fields as required where appropriate.

3. Copy the generated form

Open the form detail page and copy the complete generated HTML.

A shortened example looks like this:

<form action="https://postmyform.com/f/your-endpoint-id" method="POST">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" 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 message</button>
</form>

Use the complete snippet from the dashboard. It contains the unique endpoint and anti-spam controls required by your form.

4. Add the form to the repository

Paste the generated HTML into the page or template where the contact form should appear.

For a simple HTML site, this may be index.html or contact.html.

Commit and push the change to the publishing source configured for GitHub Pages. That source may be a repository branch or a GitHub Actions deployment workflow.

5. Confirm the published URL

Wait for the GitHub Pages deployment to finish and open the published page in a browser.

Confirm that:

• The form is visible.
• The page uses HTTPS.
• The browser origin matches the allowed origin in PostMyForm.
• The form action points to the generated PostMyForm endpoint.

6. Send a test submission

Submit the published form once.

A clean submission should appear in the PostMyForm dashboard and trigger an email notification attempt. The submission history records the notification result.

If a success redirect is configured, PostMyForm redirects the browser after processing the submission.

7. You now have a working contact form

You now have a working contact form on a static GitHub Pages site without maintaining a separate backend.

Before considering the setup complete, test the form from the published HTTPS URL and confirm that:

• the submission appears in the PostMyForm dashboard,
• the notification email arrives,
• the configured success redirect works,
• and the browser origin matches the allowed origin.

For common problems and additional details, see the full troubleshooting guide:

Review the complete GitHub Pages guide and troubleshooting steps