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 Typedream

Typedream is a simple website builder, but its form features are basic. Spike adds:
  • Unlimited submissions on the free plan
  • Spam protection (honeypot, reCAPTCHA, Turnstile)
  • Email notifications and auto-responders
  • Webhooks and 21+ integrations
  • File upload support
  • Full API access to submissions

​
Setup Steps

1

Create Spike Form

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

Add Embed Block

In the Typedream editor, add an Embed block to your page.
3

Paste Form HTML

Paste your Spike form HTML into the embed.
4

Publish

Publish your Typedream site.

​
Example Embed

<form action="https://api.spike.ac/f/YOUR_FORM_SLUG" method="POST" style="max-width:480px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;">
  <input type="text" name="_gotcha" style="display:none">

  <div style="margin-bottom:14px;">
    <label style="display:block;font-size:14px;margin-bottom:4px;font-weight:500;">Name</label>
    <input type="text" name="name" required
      style="width:100%;padding:10px 12px;border:1px solid #e2e2e2;border-radius:8px;font-size:14px;">
  </div>

  <div style="margin-bottom:14px;">
    <label style="display:block;font-size:14px;margin-bottom:4px;font-weight:500;">Email</label>
    <input type="email" name="email" required
      style="width:100%;padding:10px 12px;border:1px solid #e2e2e2;border-radius:8px;font-size:14px;">
  </div>

  <div style="margin-bottom:14px;">
    <label style="display:block;font-size:14px;margin-bottom:4px;font-weight:500;">Message</label>
    <textarea name="message" rows="4" required
      style="width:100%;padding:10px 12px;border:1px solid #e2e2e2;border-radius:8px;font-size:14px;resize:vertical;"></textarea>
  </div>

  <button type="submit"
    style="width:100%;padding:12px;background:#000;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;">
    Send Message
  </button>
</form>

​
AJAX Submission

For a smoother experience without page navigation: 
<form id="spike-form" style="max-width:480px;font-family:inherit;">
  <input type="text" name="_gotcha" style="display:none">

  <input type="email" name="email" placeholder="Your email" required
    style="width:100%;padding:10px 12px;border:1px solid #e2e2e2;border-radius:8px;margin-bottom:12px;font-size:14px;">

  <textarea name="message" placeholder="Your message" rows="4" required
    style="width:100%;padding:10px 12px;border:1px solid #e2e2e2;border-radius:8px;margin-bottom:12px;font-size:14px;resize:vertical;"></textarea>

  <button type="submit"
    style="width:100%;padding:12px;background:#000;color:#fff;border:none;border-radius:8px;font-size:14px;cursor:pointer;">
    Send
  </button>
  <p id="status" style="margin-top:10px;font-size:14px;display:none;"></p>
</form>

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

  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    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';
    }
    status.style.display = 'block';
  });
</script>
Typedream embeds work best with inline styles. Use border-radius: 8px to match Typedream’s rounded design language.