Adding a contact forms to a Github Pages site

What is Github Pages?

Github is of course well known as a source code repository. It also supports Github Pages, which is a hosting service for content already in a repository on Github. For public repositories and paid accounts, Github allows you to host your own site via Github Pages. Pages can be either based on Jekyll, which is the default, or you can provide your own static content by adding a .nojekyll file.

Contact Form in Github Pages

Because Github Pages is nothing more than a hosting of your own static files, you cannot add a contact form without an external handler. A lot of Github Pages users use Un-static Forms as their handler, because it’s simple to use. The only thing you need to do, is add a html based contact form that you reference from your other pages. After that you can offload the handling of your form submissions to us. So you don’t host your own site, and you don’t need a server to handle the submissions!

Example Github Pages Contact Form

To enable your contact form in Github Pages, you can take these simple steps:

Step 1. Register a Form

Step 2. Take the content below and place it in contact.html (or something similar)

Step 3. Replace the YOUR_ENDPOINT_REFERENCE in the content with your form’s endpoint

Step 4. Add the file to your site’s repository and push it over to Github.

$ git add contact.html
$ git commit -m 'Add contact form'
$ git push

And you are done..

If you go to your Github Pages site url, you should now be able to use your contact form and receive any submissions in your e-mail box!

Example contact.html source code

This example does not have any design in it and is based on Bootstrap 4.

<html>
<head>
  <title>Contact me</title>
</head>

<body>
<form method="post" action="https://forms.un-static.com/forms/YOUR_ENDPOINT_REFERENCE">
  <div class="form-group row">
    <label for="name" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <div class="input-group">
        <div class="input-group-addon">
          <i class="fa fa-user"></i>
        </div>
        <input id="name" name="name" placeholder="Please enter your name" type="text" required="required" class="form-control">
      </div>
    </div>
  </div>
  <div class="form-group row">
    <label for="email" class="col-4 col-form-label">E-mail address</label>
    <div class="col-8">
      <div class="input-group">
        <div class="input-group-addon">
          <i class="fa fa-envelope"></i>
        </div>
        <input id="email" name="email" placeholder="Your e-mail address" type="text" required="required" class="form-control">
      </div>
    </div>
  </div>
  <div class="form-group row">
    <label for="message" class="col-4 col-form-label">Message</label>
    <div class="col-8">
      <textarea id="message" name="message" cols="40" rows="10" required="required" class="form-control"></textarea>
    </div>
  </div>
  <div class="form-group row">
    <div class="offset-4 col-8">
      <button name="submit" type="submit" class="btn btn-primary">Send</button>
    </div>
  </div>
</form>
<div align="center">
  <p><small>(Powered by <a rel="nofollow" href="Un-static Forms">Un-static Forms</a>)</small></p>
</div>
</body>
</html>

We kindly request you to keep the Powered by link (or something similar) to support us, if you don’t have a paid subscription.