Skip to main content

Basic Form

The simplest way to use Spike is with a standard HTML form:
<form action="https://spike.ac/api/f/YOUR_FORM_SLUG" method="POST">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  
  <label for="message">Message</label>
  <textarea id="message" name="message" required></textarea>
  
  <button type="submit">Send</button>
</form>

With All Features

A complete form with spam protection, custom redirect, and custom subject:
<form action="https://spike.ac/api/f/YOUR_FORM_SLUG" method="POST">
  <!-- Custom redirect after submission -->
  <input type="hidden" name="_next" value="https://yoursite.com/thanks">
  
  <!-- Custom email subject -->
  <input type="hidden" name="_subject" value="New contact from {{ name }}">
  
  <!-- Honeypot spam protection (hide with CSS) -->
  <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">
  
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  
  <label for="phone">Phone (optional)</label>
  <input type="tel" id="phone" name="phone">
  
  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5" required></textarea>
  
  <button type="submit">Send Message</button>
</form>

File Uploads

Enable file uploads in your form settings, then use enctype="multipart/form-data":
<form 
  action="https://spike.ac/api/f/YOUR_FORM_SLUG" 
  method="POST"
  enctype="multipart/form-data"
>
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>
  
  <label for="resume">Resume (PDF)</label>
  <input type="file" id="resume" name="resume" accept=".pdf">
  
  <button type="submit">Submit Application</button>
</form>
<form action="https://spike.ac/api/f/YOUR_FORM_SLUG" method="POST">
  <label for="department">Department</label>
  <select id="department" name="department" required>
    <option value="">Select...</option>
    <option value="sales">Sales</option>
    <option value="support">Support</option>
    <option value="general">General</option>
  </select>
  
  <fieldset>
    <legend>Interests</legend>
    <label>
      <input type="checkbox" name="interests" value="product">
      Product Updates
    </label>
    <label>
      <input type="checkbox" name="interests" value="newsletter">
      Newsletter
    </label>
  </fieldset>
  
  <button type="submit">Submit</button>
</form>

Styling Tips

Spike doesn’t require any specific CSS. Style your forms however you like:
form {
  max-width: 500px;
  margin: 0 auto;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

input, textarea, select {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #ddd;
  border-radius: 0.5rem;
}

button {
  background: #000;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
}

button:hover {
  background: #333;
}