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 Shopify
Shopify doesn’t have a built-in contact form backend with advanced features. Spike gives you:
- Unlimited form submissions
- Email notifications for every submission
- Spam protection (honeypot, reCAPTCHA, Turnstile)
- Webhooks to connect to your order systems
- 21+ integrations (Slack, Google Sheets, etc.)
- File upload support for order attachments
Setup Steps
Edit Theme
In Shopify admin, go to Online Store → Themes → Customize. Add a Custom Liquid section where you want the form.
Paste Form HTML
Paste your Spike form HTML into the Custom Liquid block.
Save
Save the theme. Your form is live.
Paste this into a Custom Liquid section:
<div class="spike-form-wrapper" style="max-width:500px;margin:0 auto;padding:20px;">
<form action="https://api.spike.ac/f/YOUR_FORM_SLUG" method="POST">
<input type="text" name="_gotcha" style="display:none">
<input type="hidden" name="_next" value="https://yourstore.myshopify.com/pages/thank-you">
<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:4px;">
</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:4px;">
</div>
<div style="margin-bottom:16px;">
<label style="display:block;font-size:14px;margin-bottom:4px;">Order Number (optional)</label>
<input type="text" name="order_number"
style="width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;">
</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:4px;resize:vertical;"></textarea>
</div>
<button type="submit"
style="width:100%;padding:12px;background:#000;color:#fff;border:none;border-radius:4px;font-size:14px;cursor:pointer;">
Send Message
</button>
</form>
</div>
A more advanced form for B2B stores:
<form action="https://api.spike.ac/f/YOUR_FORM_SLUG" method="POST">
<input type="text" name="_gotcha" style="display:none">
<input type="hidden" name="_subject" value="New Wholesale Inquiry">
<input type="text" name="company" placeholder="Company Name" required
style="width:100%;padding:10px;border:1px solid #ddd;margin-bottom:12px;">
<input type="text" name="name" placeholder="Contact Name" required
style="width:100%;padding:10px;border:1px solid #ddd;margin-bottom:12px;">
<input type="email" name="email" placeholder="Email" required
style="width:100%;padding:10px;border:1px solid #ddd;margin-bottom:12px;">
<input type="tel" name="phone" placeholder="Phone"
style="width:100%;padding:10px;border:1px solid #ddd;margin-bottom:12px;">
<textarea name="products" placeholder="Which products are you interested in?" rows="4" required
style="width:100%;padding:10px;border:1px solid #ddd;margin-bottom:12px;resize:vertical;"></textarea>
<button type="submit"
style="padding:12px 24px;background:#000;color:#fff;border:none;cursor:pointer;">
Request Quote
</button>
</form>
Use the _subject hidden field to customize the email notification subject line. This helps you distinguish between different form types in your inbox.