Skip to main content

Documentation Index

Fetch the complete documentation index at: https://doc.spike.ac/docs/llms.txt

Use this file to discover all available pages before exploring further.

​
Why Use Spike with Notion Sites

Notion Sites doesn’t have native form support. Spike fills that gap:
  • Add fully functional forms to any Notion Site
  • Unlimited submissions on the free plan
  • Email notifications on every submission
  • Spam protection built in
  • Webhooks and 21+ integrations
  • No third-party form builder needed

​
Setup Steps

1

Create Spike Form

Create a new form in your Spike dashboard and copy the form slug.
2

Add Embed Block

In your Notion page, type /embed and add an Embed block.
3

Create a Hosted Form Page

Since Notion embeds require a URL, host a simple HTML page with your form (see options below).
4

Paste the URL

Paste the URL of your hosted form into the Notion embed block.

​
Option 1: Use Spike’s Hosted Form

The easiest approach — use Spike’s built-in hosted form page:
  1. In your Spike dashboard, go to your form settings
  2. Enable the hosted form
  3. Copy the hosted form URL
  4. Paste it into a Notion embed block
No code needed.

​
Option 2: Self-Hosted HTML Page

Create a simple HTML file and host it anywhere (GitHub Pages, Vercel, Netlify): 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 24px; }
    .field { margin-bottom: 14px; }
    .field label { display: block; font-size: 14px; margin-bottom: 4px; color: #37352f; }
    .field input, .field textarea {
      width: 100%; padding: 8px 10px; border: 1px solid #e0e0e0;
      border-radius: 4px; font-size: 14px; font-family: inherit;
    }
    .field textarea { resize: vertical; height: 80px; }
    button {
      padding: 8px 16px; background: #2eaadc; color: #fff;
      border: none; border-radius: 4px; font-size: 14px; cursor: pointer;
    }
    button:hover { background: #2496c4; }
    .status { margin-top: 10px; font-size: 14px; }
  </style>
</head>
<body>
  <form id="spike-form">
    <input type="text" name="_gotcha" style="display:none">
    <div class="field">
      <label>Name</label>
      <input type="text" name="name" required>
    </div>
    <div class="field">
      <label>Email</label>
      <input type="email" name="email" required>
    </div>
    <div class="field">
      <label>Message</label>
      <textarea name="message" required></textarea>
    </div>
    <button type="submit">Send</button>
    <p class="status" id="status"></p>
  </form>

  <script>
    const form = document.getElementById('spike-form');
    const status = document.getElementById('status');

    form.addEventListener('submit', async (e) => {
      e.preventDefault();
      status.textContent = 'Sending...';

      try {
        const res = await fetch('https://api.spike.ac/f/YOUR_FORM_SLUG', {
          method: 'POST',
          body: new FormData(form),
          headers: { 'Accept': 'application/json' }
        });
        if (res.ok) {
          status.textContent = '✓ Sent!';
          status.style.color = 'green';
          form.reset();
        } else { throw new Error(); }
      } catch {
        status.textContent = 'Error. Try again.';
        status.style.color = 'red';
      }
    });
  </script>
</body>
</html>
Use AJAX submission so the form stays in the embed after submitting instead of navigating away.