Skip to main content

​
HTML Block

The simplest way: add a Custom HTML block in the WordPress editor: 
<form action="https://spike.ac/api/f/YOUR_FORM_SLUG" method="POST">
  <input type="text" name="_gotcha" style="display:none">
  
  <p>
    <label for="name">Name</label><br>
    <input type="text" id="name" name="name" required style="width:100%">
  </p>
  
  <p>
    <label for="email">Email</label><br>
    <input type="email" id="email" name="email" required style="width:100%">
  </p>
  
  <p>
    <label for="message">Message</label><br>
    <textarea id="message" name="message" rows="4" required style="width:100%"></textarea>
  </p>
  
  <p>
    <button type="submit">Send Message</button>
  </p>
</form>

​
Shortcode

Create a reusable shortcode by adding this to your theme’s functions.php:
functions.php
function spike_contact_form($atts) {
  $atts = shortcode_atts(array(
    'slug' => '',
    'redirect' => '',
  ), $atts);
  
  if (empty($atts['slug'])) {
    return '<p>Error: Form slug required</p>';
  }
  
  $redirect = $atts['redirect'] ? 
    '<input type="hidden" name="_next" value="' . esc_url($atts['redirect']) . '">' : '';
  
  return '
    <form action="https://spike.ac/api/f/' . esc_attr($atts['slug']) . '" method="POST" class="spike-form">
      <input type="text" name="_gotcha" style="display:none">
      ' . $redirect . '
      <p><label>Name</label><input type="text" name="name" required></p>
      <p><label>Email</label><input type="email" name="email" required></p>
      <p><label>Message</label><textarea name="message" rows="4" required></textarea></p>
      <p><button type="submit">Send</button></p>
    </form>
  ';
}
add_shortcode('spike_form', 'spike_contact_form');
Then use: [spike_form slug="YOUR_FORM_SLUG"]

​
Styling

Add custom CSS in Appearance → Customize → Additional CSS: 
.spike-form input,
.spike-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
}

.spike-form button {
  background: #0073aa;
  color: white;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
}

.spike-form button:hover {
  background: #005a87;
}