Jekyll

Jekyll contact form without a backend

Jekyll builds static HTML from Liquid templates, and GitHub Pages runs no server code, so a contact form needs somewhere else to post. Point it at Formward. This guide keeps the endpoint in _config.yml, puts the form in a Liquid include with parameters, and sends visitors to a thanks page on your own site, with the baseurl handled for GitHub Pages project sites.

1. 01Create your form and store the endpoint

   Sign up at formward.eu, create a new form and copy the endpoint URL (https://forms.formward.eu/f/your-form-id). Add it to _config.yml so every template can read it as site.formward_endpoint. Jekyll does not reload _config.yml while jekyll serve is running, so restart the server after editing it.

   # _config.yml
   formward_endpoint: "https://forms.formward.eu/f/your-form-id"

2. 02Create the include

   Save the form as _includes/contact-form.html. Parameters passed to an include are available as include.name, so the redirect path and the button text can change per page while default supplies the usual values. relative_url adds your baseurl to the redirect path.

   Formward resolves a path in _redirect against the page the form was posted from, so the visitor lands on your own domain.

   <!-- _includes/contact-form.html -->
   <form action="{{ site.formward_endpoint }}" method="POST" class="contact-form">
     <label for="name">Name</label>
     <input id="name" type="text" name="name" autocomplete="name" required>
   
     <label for="email">Email</label>
     <input id="email" type="email" name="email" autocomplete="email" required>
   
     <label for="message">Message</label>
     <textarea id="message" name="message" rows="5" required></textarea>
   
     <!-- Where Formward sends the visitor after submitting. -->
     <input type="hidden" name="_redirect" value="{{ include.redirect | default: '/thanks/' | relative_url }}">
     <!-- Honeypot: hidden from people, filled by bots. Keep it empty. -->
     <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">
   
     <button type="submit">{{ include.button | default: "Send" }}</button>
     <p>We only use your details to reply. <a href="/privacy">Privacy policy</a></p>
   </form>

3. 03Add the contact and thanks pages

   Use the include on a contact page, and create the thanks page it redirects to. sitemap: false keeps the thanks page out of the sitemap jekyll-sitemap generates. To reuse the form elsewhere with a different target, pass parameters: {% include contact-form.html redirect="/support/thanks/" button="Ask for help" %}.

   ---
   # contact.md
   layout: page
   title: Contact
   permalink: /contact/
   ---
   Questions about the project? Send us a message.
   
   {% include contact-form.html %}
   
   ---
   # thanks.md
   layout: page
   title: Thanks
   permalink: /thanks/
   sitemap: false
   ---
   Your message was sent. We will reply by email.

4. 04Style and test

   Style .contact-form in your stylesheet, for example assets/css/style.scss. Jekyll only processes an SCSS file that starts with front matter, even an empty pair of --- lines.

   Run bundle exec jekyll serve, open http://localhost:4000/contact/ and send a message. You should land on /thanks/, and the submission should appear in your Formward dashboard and your inbox. On a GitHub Pages project site (username.github.io/repository), set baseurl: "/repository" in _config.yml; relative_url then adds it to the redirect, so visitors reach the thanks page instead of a 404.