Form Integration

A Jekyll contact form that works on GitHub Pages

GitHub Pages can't run server code, so a Jekyll form needs somewhere to send its data. Point it at your Formbold endpoint and each submission goes to your inbox.

Jekyll Contact Form

The include file

This form. Save it as _includes/contact-form.html, then add {% include contact-form.html %} to any page or layout. Swap in your own form ID for FORM_ID.

jekyll.html
<!-- _includes/contact-form.html -->
<form
  action="https://formbold.com/s/FORM_ID"
  method="POST"
  class="flex flex-col gap-4 max-w-[452px] mx-auto"
>
  <!-- Full Name -->
  <div class="flex flex-col gap-2">
    <label for="name" class="text-sm font-medium text-gray-700">
      Full Name<span class="ml-0.5 text-red-500">*</span>
    </label>
    <input
      type="text"
      name="name"
      id="name"
      placeholder="Enter your full name"
      required
      class="max-h-11 w-full rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
    />
  </div>

  <!-- Email Address -->
  <div class="flex flex-col gap-2">
    <label for="email" class="text-sm font-medium text-gray-700">
      Email Address<span class="ml-0.5 text-red-500">*</span>
    </label>
    <input
      type="email"
      name="email"
      id="email"
      placeholder="Enter your email"
      required
      class="max-h-11 w-full rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
    />
  </div>

  <!-- Subject -->
  <div class="flex flex-col gap-2">
    <label for="subject" class="text-sm font-medium text-gray-700">
      Subject<span class="ml-0.5 text-red-500">*</span>
    </label>
    <input
      type="text"
      name="subject"
      id="subject"
      placeholder="Enter your subject"
      required
      class="max-h-11 w-full rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
    />
  </div>

  <!-- Message -->
  <div class="flex flex-col gap-2">
    <label for="message" class="text-sm font-medium text-gray-700">
      Message<span class="ml-0.5 text-red-500">*</span>
    </label>
    <textarea
      name="message"
      id="message"
      rows="5"
      placeholder="Type your message..."
      required
      class="w-full resize-y rounded-xl border border-gray-300 bg-white px-4 py-3 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
    ></textarea>
  </div>

  <!-- Submit Button -->
  <button
    type="submit"
    class="flex h-12 w-full cursor-pointer items-center justify-center gap-2 rounded-xl bg-[#111827] px-5 py-3 text-base font-medium text-white shadow-xs transition-all hover:bg-black active:scale-[0.99] disabled:opacity-50"
  >
    Submit Message
  </button>
</form>
How it works

Three steps, no plugins

Three steps, no plugins.

1

Create a form

In the dashboard, hit Create New Form. Naming it after the repo helps once you have a few sites.

2

Save the include

Paste the form into _includes/contact-form.html with your endpoint in the action attribute.

3

Test with jekyll serve

Run bundle exec jekyll serve, submit once on localhost:4000 and check Submissions. Then push to GitHub.

Features

Why it builds fine on GitHub Pages

A place for the form to go. Storage, email, spam checks and integrations, with no change to your build.

Works on GitHub Pages

No plugins, so it builds fine with GitHub Pages and its plugin allowlist.

reCAPTCHA with no setup

Because the include is a plain HTML form, Automatic reCAPTCHA needs no keys. Switch it on next to Basic Spam Filter.

File uploads

Starter and higher. The include needs enctype="multipart/form-data" plus a file input with a name.

Thank-you page

On Starter and higher, set a Redirect URL to a page like /thanks/ in your site.

FAQs

What do Jekyll users ask?

GitHub Pages, Markdown and redirects.

Yes. The form is static HTML and Formbold does the receiving, so there's nothing for GitHub Pages to run.

Still have a question?

The docs cover setup, framework guides, integrations and spam protection, step by step.

Read the docs