integrations · static site generator

A contact form for Jekyll: no plugin, no server, works on GitHub Pages.

Jekyll builds static HTML, so there's no server to receive a form post, and GitHub Pages, where most Jekyll sites live, won't run one for you. The standard fix is a form endpoint: point a plain HTML form at mailcontact and submissions land in your project's inbox, with a notification in Discord, Slack, email, or a webhook.

No Gemfile changes, no plugin to smuggle past the GitHub Pages whitelist, no JavaScript required. Save the form as an include once, then drop {% include contact-form.html %} into any page or layout.

Create an account Read the docs

recommended setup

Use the MailContact script with your own design.

Add this HTML to your site, or use the form builder. Replace the form link with yours. The hosted script injects the hidden check, handles sending and automatic verification, and preserves the draft on errors. You control the HTML and CSS. Free forms display a visible “Processed by mailcontact.app” link; Pro and Plus do not. Feedback follows the browser’s language; set data-mailcontact-language="fr" on the form to force French.

contact.html

<form action="https://mailcontact.app/api/forms/your-form-id" method="POST" data-mailcontact-form>
  <fieldset>
    <legend>Contact us</legend>
    <label>
      Name (optional)
      <input name="name" type="text" autocomplete="name" maxlength="200" />
    </label>
    <label>
      Email
      <input name="email" type="email" autocomplete="email" maxlength="320" required />
    </label>
    <label>
      Message
      <textarea name="message" rows="5" maxlength="5000" required></textarea>
    </label>
    <noscript>
    <div aria-hidden="true" style="position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;">
      <label>Website
        <input name="company_website" type="text" tabindex="-1" autocomplete="off" />
      </label>
    </div>
    </noscript>
    <button type="submit">Send message</button>
  </fieldset>
  <p data-contact-status role="status" aria-live="polite" aria-atomic="true"></p>
</form>
<script defer src="https://mailcontact.app/forms/v1.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

For a component with its own submit handler, load the same script and use MailContact.prepare(form) and MailContact.send() instead of the automatic marker. See the custom interface reference for loading, feedback and Free attribution.

the snippet

Alternative: a direct integration for Jekyll.

This example posts directly to the API. Keep the required company_website field present and empty. Native posts open JSON on success or a verification page when needed. Custom scripts without verification support send suspicious messages to Spam for review; strong spam is also held there without notifications or quota usage. A success response confirms reception, including review, or a silent discard of a filled check. See spam protection for the full behavior.

_includes/contact-form.html

<form action="https://mailcontact.app/api/forms/your-form-id" method="POST">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" />

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

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

  <button type="submit">Send</button>
  <input name="company_website" type="text" tabindex="-1" autocomplete="off"
    style="position:absolute;left:-10000px" aria-hidden="true" />
</form>

how it works

Three steps, start to finish.

Create an inbox

One inbox per site. Name it after your Jekyll project and you get a form endpoint and a project email address immediately.

Add the include

Save the snippet as _includes/contact-form.html, then include it from your contact page, a layout, or the footer. It's your markup. Your theme styles it.

Get notified

Add a Discord, Slack, email, or webhook channel. Delivered messages ping you where you already are, no checking a dashboard.

why mailcontact

Built to pair well with Jekyll.

GitHub Pages safe

GitHub Pages runs Jekyll with a fixed plugin whitelist and zero server code. A form that posts to an external endpoint sidesteps both limits: nothing to install, nothing to build.

One include, every page

Jekyll's include system means you write the form once in _includes/ and reuse it across pages and layouts. Change the endpoint in one file, every page follows.

One inbox per site

A blog, a project docs site, a landing page: each Jekyll site gets its own inbox and its own address, instead of everything landing in your personal email.

faq

Jekyll + mailcontact, answered

Can Jekyll handle form submissions by itself?

No. Jekyll generates static HTML at build time. There's no server process to receive a POST. You need an external endpoint like mailcontact to accept the submission and store it.

Does this work on GitHub Pages?

Yes. GitHub Pages runs no server code and only allows whitelisted plugins, but this form needs neither: it posts straight to mailcontact's servers from the visitor's browser.

How do I show a thank-you message after submitting?

Use the hosted MailContact script for inline feedback and automatic verification, or call MailContact.send() in your own submit handler. A configurable redirect for native form posts is not currently available.

Can I style the form to match my Jekyll theme?

Yes. The snippet is plain HTML in your include, so Minima, Chirpy, or any custom theme styles it like the rest of your site. Add classes and CSS however you normally would.

One inbox for every Jekyll project you ship.

Forms and a real email address, together, with notifications where you live. Start with a free account.

Create your free form

No credit card needed. Free includes one project and 50 form messages per month.