Skip to main content

​
Basic Form

Create a contact form component with state management:
ContactForm.svelte
<script>
  let status = 'idle';
  
  async function handleSubmit(event) {
    event.preventDefault();
    status = 'loading';
    
    const form = event.target;
    const data = new FormData(form);
    
    const res = await fetch('https://spike.ac/api/f/YOUR_FORM_SLUG', {
      method: 'POST',
      body: data,
      headers: { 'Accept': 'application/json' }
    });
    
    status = res.ok ? 'success' : 'error';
    if (res.ok) form.reset();
  }
</script>

<form on:submit={handleSubmit}>
  <input type="text" name="_gotcha" style="display:none" />
  
  <input type="email" name="email" required />
  <textarea name="message" required></textarea>
  
  <button disabled={status === 'loading'}>
    {status === 'loading' ? 'Sending...' : 'Send'}
  </button>
  
  {#if status === 'success'}
    <p>Thanks for your message!</p>
  {/if}
  
  {#if status === 'error'}
    <p>Something went wrong. Please try again.</p>
  {/if}
</form>

​
SvelteKit Form Actions

Use SvelteKit form actions for server-side handling:
+page.server.js
export const actions = {
  default: async ({ request }) => {
    const data = await request.formData();
    
    const res = await fetch('https://spike.ac/api/f/YOUR_FORM_SLUG', {
      method: 'POST',
      body: data
    });
    
    if (res.ok) {
      return { success: true };
    }
    
    return { success: false };
  }
};
+page.svelte
<script>
  export let form;
</script>

<form method="POST">
  <input type="email" name="email" required />
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
  
  {#if form?.success}
    <p>Thanks!</p>
  {/if}
</form>

​
Simple HTML Form

For basic use cases, submit directly without JavaScript: 
<form action="https://spike.ac/api/f/YOUR_FORM_SLUG" method="POST">
  <input type="hidden" name="_next" value="https://yoursite.com/thanks" />
  <input type="text" name="_gotcha" style="display:none" />
  
  <input type="email" name="email" required />
  <textarea name="message" required></textarea>
  
  <button type="submit">Send</button>
</form>