send.webforms.toRead the docs →

WebForms

Static site generators

Add a contact form to Jekyll

Jekyll on GitHub Pages is the classic case with no way to run server code - and the classic reason contact pages end up as a mailto: link. An include plus one value in _config.yml fixes it, with no plugin (which matters, since GitHub Pages only allows an approved plugin list).

Get an endpointRead the docs

Setup

  1. Add the endpoint to _config.yml

    One value, referenced from the include.

  2. Create the include

    Save the markup as _includes/contact-form.html.

  3. Include it from a page or layout

    Add {% include contact-form.html %} wherever you want the form.

Jekyll examples

Swap in your own endpoint and these run as-is.

_config.yml
form_endpoint: "https://send.webforms.to/wft_your_key"
thanks_url: "https://example.com/thanks/"
_includes/contact-form.html
<form action="{{ site.form_endpoint }}" method="POST">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <input type="hidden" name="_next" value="{{ site.thanks_url }}">
  <input type="hidden" name="_subject" value="New message from {{ site.title }}">

  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off"
         style="position:absolute;left:-9999px" aria-hidden="true">

  <button type="submit">Send</button>
</form>
contact.md
---
layout: page
title: Contact
permalink: /contact/
---

We read everything that comes through.

{% include contact-form.html %}

Jekyll form FAQ

Yes. GitHub Pages serves static files only, but the form posts to an external endpoint from the browser, so no server-side code is needed on your side.

Related guides

Ready to wire up your Jekyll form?

Free for 300 submissions a month. Endpoint in under a minute, no card required.

Start free