Jekyll contact form on GitHub Pages

Formgong team ·

A Jekyll contact form on GitHub Pages is plain HTML. GitHub sets safe mode, so an unsupported plugin will not build. Put the form in a Liquid include and post it to Formgong. Leads arrive by email and in Telegram, and the site stays static.

Jekyll
<form action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="en">
  <label>Name <input type="text" name="name" autocomplete="name" placeholder="Your name" required></label>
  <label>Email <input type="email" name="email" autocomplete="email" placeholder="you@example.com" required></label>
  <label>Message <textarea name="message" placeholder="How can we help?" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
  <label>Leave this field empty<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  
  <button type="submit">Send</button>
</form>

How forms work in Jekyll

Jekyll builds Markdown and HTML into a static site. GitHub Pages is the usual host, and it runs Jekyll for you. There is no server waiting for a form POST.

GitHub Pages locks safe: true in the Jekyll config. An unsupported gem never runs. A form in _includes/contact-form.html is enough, because the browser posts the HTML.

Set it up in Jekyll

  1. Create a form in Formgong and copy the access key.
  2. Add the include. Point action at https://formgong.com/submit and set access_key, _lang and botcheck.
  3. On the contact page, add front matter and {% include contact-form.html %}. For a project site, set _redirect to {{ site.url }}{{ site.baseurl }}/thanks/.
  4. Do not add a form gem. GitHub Pages keeps safe: true and will not build an unsupported plugin.
  5. Push the repo. GitHub sets JEKYLL_ENV to production. Send a test on the live github.io address.

Formgong or a Jekyll plugin?

A local plugin can help when you build the site yourself and you need Ruby at build time.

On GitHub Pages, unsupported plugins never run. Plain HTML posted to Formgong still works after you push.

Questions and answers

Does this work on GitHub Pages?

Yes. The form is HTML. GitHub Pages only has to serve the file. No custom gem is required.

Can I keep the key in config?

Yes. Put it in _config.yml and print it in the include. The key is public. Do not store a mail password there.

Why is the thank-you link wrong on a project site?

Project sites live under a subpath. Build _redirect with site.baseurl, or the browser opens a missing page.

Do I need the github-pages gem on my laptop?

Only if you want the same plugin set locally. The form itself does not need it. Push HTML and test the live URL.

Start free