Hugo, Jekyll and Eleventy

Static site generators output plain HTML, so a Formkove form needs no build step or serverless function. It works on any host, including GitHub Pages, Netlify, Vercel and Cloudflare Pages.

Each example keeps the form ID in your site config and redirects to a thank-you page. Add your site under Settings → Allowed Origins & Redirects in Formkove so the redirect is allowed.

Hugo

hugo.toml

[params]
  formkoveFormId = "YOUR_FORM_ID"

layouts/partials/contact-form.html

<form action="https://app.formkove.com/api/forms/{{ site.Params.formkoveFormId }}/submissions?redirect={{ "thanks/" | absURL }}" method="POST">
  <input type="text" name="name" placeholder="Name" required>
  <input type="email" name="email" placeholder="Email" required>
  <textarea name="message" placeholder="Message" required></textarea>
  <button type="submit">Send</button>
</form>

Use it in a template with {{ partial "contact-form.html" . }}.

Jekyll

_config.yml

formkove_form_id: YOUR_FORM_ID

_includes/contact-form.html

<form action="https://app.formkove.com/api/forms/{{ site.formkove_form_id }}/submissions?redirect={{ '/thanks/' | absolute_url }}" method="POST">
  <input type="text" name="name" placeholder="Name" required>
  <input type="email" name="email" placeholder="Email" required>
  <textarea name="message" placeholder="Message" required></textarea>
  <button type="submit">Send</button>
</form>

Use it with {% include contact-form.html %}. Set url in _config.yml so absolute_url produces your real domain.

Eleventy

_data/site.json

{ "url": "https://example.com", "formkoveFormId": "YOUR_FORM_ID" }

_includes/contact-form.njk

<form action="https://app.formkove.com/api/forms/{{ site.formkoveFormId }}/submissions?redirect={{ site.url }}/thanks/" method="POST">
  <input type="text" name="name" placeholder="Name" required>
  <input type="email" name="email" placeholder="Email" required>
  <textarea name="message" placeholder="Message" required></textarea>
  <button type="submit">Send</button>
</form>

Submitting without a page reload

To show a message in place instead of redirecting, submit with fetch(). See JavaScript forms.

For a step-by-step walkthrough, see How to add a contact form to a static site.