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 Framer
Framer’s built-in form component is limited. Spike gives you:
- Unlimited form submissions on the free plan
- Spam protection (honeypot, reCAPTCHA, Turnstile)
- Email notifications and auto-responders
- Webhook integrations
- 21+ integrations (Slack, Discord, Google Sheets, etc.)
- Full API access to your submission data
Setup Steps
Add Code Embed in Framer
In the Framer editor, add a Code component (from the Insert menu) where you want the form.
Paste Form HTML
Paste your Spike form HTML into the code component.
Publish
Publish your Framer site. The form is live.
Example Embed
Paste this into a Framer Code component:
<form action="https://api.spike.ac/f/YOUR_FORM_SLUG" method="POST" style="max-width:500px;font-family:Inter,sans-serif;">
<input type="text" name="_gotcha" style="display:none">
<div style="margin-bottom:16px;">
<label style="display:block;font-size:14px;margin-bottom:4px;">Name</label>
<input type="text" name="name" required
style="width:100%;padding:10px;border:1px solid #ddd;border-radius:8px;font-size:14px;">
</div>
<div style="margin-bottom:16px;">
<label style="display:block;font-size:14px;margin-bottom:4px;">Email</label>
<input type="email" name="email" required
style="width:100%;padding:10px;border:1px solid #ddd;border-radius:8px;font-size:14px;">
</div>
<div style="margin-bottom:16px;">
<label style="display:block;font-size:14px;margin-bottom:4px;">Message</label>
<textarea name="message" rows="4" required
style="width:100%;padding:10px;border:1px solid #ddd;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;cursor:pointer;">
Send Message
</button>
</form>
AJAX Submission (No Page Redirect)
For a smoother experience without leaving the page:
<form id="spike-form" style="max-width:500px;font-family:Inter,sans-serif;">
<input type="text" name="_gotcha" style="display:none">
<div style="margin-bottom:16px;">
<label style="display:block;font-size:14px;margin-bottom:4px;">Email</label>
<input type="email" name="email" required
style="width:100%;padding:10px;border:1px solid #ddd;border-radius:8px;">
</div>
<div style="margin-bottom:16px;">
<label style="display:block;font-size:14px;margin-bottom:4px;">Message</label>
<textarea name="message" rows="4" required
style="width:100%;padding:10px;border:1px solid #ddd;border-radius:8px;resize:vertical;"></textarea>
</div>
<button type="submit"
style="width:100%;padding:12px;background:#000;color:#fff;border:none;border-radius:8px;cursor:pointer;">
Send Message
</button>
<p id="form-status" style="margin-top:12px;font-size:14px;display:none;"></p>
</form>
<script>
const form = document.getElementById('spike-form');
const status = document.getElementById('form-status');
form.addEventListener('submit', async (e) => {
e.preventDefault();
const data = new FormData(form);
try {
const res = await fetch('https://api.spike.ac/f/YOUR_FORM_SLUG', {
method: 'POST',
body: data,
headers: { 'Accept': 'application/json' }
});
if (res.ok) {
status.textContent = '✓ Message sent!';
status.style.color = 'green';
form.reset();
} else {
throw new Error();
}
} catch {
status.textContent = 'Something went wrong. Try again.';
status.style.color = 'red';
}
status.style.display = 'block';
});
</script>
Use inline styles to match your Framer site’s design. Framer’s Code component doesn’t have access to your site’s CSS classes, so inline styles are the way to go.
