Add a contact form to GitHub Pages

1. Create the form in embedio

Sign up (the Free plan includes 500 submissions a month and needs no card), create a form, and copy its key. It looks like frm_ followed by ten characters. Everywhere below, replace frm_your_form_key with yours.

The form key is meant to be public: it only lets people submit to that one form, never read anything. It's safe in client-side code and in your repository.

2. Plain HTML

Paste this into any page. With a project site (username.github.io/repo/), include the repository path in _redirect, for example /repo/thanks.html.

<form action="https://api.tryembedio.com/f/frm_your_form_key" method="POST">
  <label for="email">Email</label>
  <input id="email" type="email" name="email" required>

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

  <!-- Honeypot: hidden from people, filled in by bots -->
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" style="display:none">

  <!-- Where to send people after a successful submit (same site) -->
  <input type="hidden" name="_redirect" value="/thanks.html">

  <button type="submit">Send</button>
</form>

3. With Jekyll

Put the endpoint in _config.yml and the form in an include, and relative_url takes care of the project-site path for you.

embedio_endpoint: "https://api.tryembedio.com/f/frm_your_form_key"

<form action="{{ site.embedio_endpoint }}" method="POST">
  <label for="email">Email</label>
  <input id="email" type="email" name="email" required>

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

  <!-- Honeypot: hidden from people, filled in by bots -->
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" style="display:none">

  <!-- Where to send people after a successful submit (same site) -->
  <input type="hidden" name="_redirect" value="{{ '/thanks.html' | relative_url }}">

  <button type="submit">Send</button>
</form>

Use it with {% include contact-form.html %} in any page or layout.

4. Optional: no page reload

Swap the action for a data-embedio attribute and load the embedio script. It submits in place, resets the form, and fills any element marked data-embedio-status with the result.

<form data-embedio="frm_your_form_key">
  <label for="email">Email</label>
  <input id="email" type="email" name="email" required>

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

  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" style="display:none">
  <button type="submit">Send</button>
  <p data-embedio-status role="status"></p>
</form>

<script src="https://api.tryembedio.com/sdk.js" defer></script>

Spam and validation

• Honeypot: a hidden _gotcha field. People never see it; bots that fill it get a normal-looking success and nothing is stored.
• Double clicks: an identical submission seconds after the first is dropped instead of stored twice.
• Trust level: each form has a relaxed, balanced or strict setting for bursts and repeated content. Flagged submissions are kept aside for review, not deleted.
• Server-side rules: validations such as required, email or max length run on embedio, so they hold even if someone skips your front end.

Getting notified

Every submission shows up in your dashboard straight away. To also get an email for each one, add an Email connection to the form; that works on every plan, including Free. Slack, Discord, Zapier, webhooks and the other connections come with any paid plan, from $9/mo.

Errors you might see

With a JSON request, every failure comes back as a status code plus { "error": "..." }. A plain HTML post gets a readable error page instead.

The full list, including module-specific errors, is in the API reference.