Skip to main content

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

1

Create Spike Form

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

Add Embed Element

In Webflow, add an Embed element where you want the form.
3

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.