Why Use Spike with Webflow
While Webflow has built-in forms, Spike offers:
- Unlimited form submissions (Webflow limits on lower plans)
- Webhook integrations
- Better spam protection
- Custom email templates
- API access to submissions
- 21+ integrations (Slack, Discord, Google Sheets, etc.)
Setup Steps
Create Spike Form
Create a new form in your Spike dashboard and copy the form slug.
Add Embed Element
In Webflow, add an Embed element where you want the form.
Paste Form HTML
Paste your form HTML into the embed element.
Example Embed
Paste this into a Webflow Embed element:
<form action="https://spike.ac/api/f/YOUR_FORM_SLUG" method="POST" class="spike-form">
<input type="text" name="_gotcha" style="display:none">
<div class="form-field">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-field">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-field">
<label for="message">Message</label>
<textarea id="message" name="message" rows="4" required></textarea>
</div>
<button type="submit" class="submit-button">Send Message</button>
</form>
<style>
.spike-form { max-width: 500px; }
.form-field { margin-bottom: 16px; }
.form-field label { display: block; margin-bottom: 4px; }
.form-field input, .form-field textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
}
.submit-button {
background: #000;
color: #fff;
padding: 12px 24px;
border: none;
cursor: pointer;
}
</style>
You can style the form using Webflow’s custom CSS or inline styles in the embed.
Match your site’s design by copying class names from your Webflow form elements.