Skip to content
Formwire
Hosting guide

Add a contact form to a GitHub Pages site

GitHub Pages serves files and runs no server code, so a form on it has nowhere to post. Posting to Formwire fixes that with a plain HTML form and no change to the repository's build.

3 min read

The form

Replace YOUR-ACCESS-KEY with the key from your form's page. The highlighted line is the one that points the form at Formwire.

contact.html 

            1
            <form action="https://formwire.io/submit" method="POST">
          
            2
              <input type="hidden" name="access_key" value="YOUR-ACCESS-KEY" />
          
            3
              <input type="hidden" name="redirect" value="https://example.com/thanks" />
          
            4
              <input type="text" name="fax" tabindex="-1" autocomplete="off" style="display:none" />
          
            5
             
          
            6
              <label for="name">Name</label>
          
            7
              <input id="name" type="text" name="name" required />
          
            8
             
          
            9
              <label for="email">Email</label>
          
            10
              <input id="email" type="email" name="email" required />
          
            11
             
          
            12
              <label for="message">Message</label>
          
            13
              <textarea id="message" name="message" rows="5" required></textarea>
          
            14
             
          
            15
              <button type="submit">Send</button>
          
            16
            </form>

Steps

  1. 1

    Create a form and copy its access key

    Sign up at app.formwire.com and create a form. Your sign-in address receives its submissions from the start. The access key is on the form's Settings tab, under General.

  2. 2

    Add the form to your page

    Paste the form above into index.html or contact.html and replace YOUR-ACCESS-KEY with your key. The action attribute sends the POST to Formwire, so GitHub Pages only has to serve the page.

  3. 3

    Add the thank-you page

    Create thanks.html and set the hidden redirect field to its full URL, including the repository path if the site is not on a custom domain: https://username.github.io/repo/thanks.html.

  4. 4

    Commit and push

    GitHub Pages rebuilds and serves the new page. No Action, secret or workflow change is needed.

  5. 5

    Send a test submission

    Open the published site, fill the form in and send it. The submission appears in the form's inbox in the dashboard within a few seconds and the notification email follows, with Reply-To set to the address the visitor typed.

Notes for GitHub Pages

  • Jekyll sites on GitHub Pages pass raw HTML through Markdown, so the form can sit in a .md file or in an include under _includes.
  • The access key is committed to a public repository. That is fine: it is a public ID that can only deliver submissions to your inbox, and you can rotate it from the dashboard.
  • Project sites live under /repo/, so relative links in the redirect field break. Use the full URL.

Questions

Can GitHub Pages run a form handler?

No. It serves static files only, with no server-side code, so a form must post somewhere else. Formwire is that somewhere: the form posts to it and the submission is stored and emailed to you.

Is it safe to put the access key in a public repository?

Yes. The key can only deliver submissions to the inbox you verified; it cannot read data or change settings. If it is ever abused, rotate it from the form's settings.

How does the form stop spam without a captcha?

The hidden fax field is a honeypot: a submission that fills it in goes to the Spam folder and nobody is emailed. A spam filter and rate limits also run on every form. Settings, Spam & security has the filter level, and on Pro, allowed domains.

Can I keep visitors on the page instead of redirecting?

Yes. Remove the redirect field and submit the form with fetch and an Accept: application/json header. The response is JSON with success and data.submission_id, and you show your own thank-you message. The React, Vue and Svelte guides do this.

Related guides

All guides