Building a Contact Form with Next.js and Spike

Let's build a contact form for your Next.js site in under 5 minutes.

Step 1: Create a Spike Form

1. Sign up at spike.ac 2. Create a new form 3. Copy your form ID

Step 2: Create the Component

import { useState } from 'react';

export function ContactForm({ formId }: { formId: string }) { const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => { e.preventDefault(); setStatus('loading'); const res = await fetch(`https://spike.ac/api/f/${formId}`, { method: 'POST', body: new FormData(e.currentTarget), headers: { 'Accept': 'application/json' } }); setStatus(res.ok ? 'success' : 'error'); };

return ( <form onSubmit={handleSubmit}> <input type="email" name="email" required /> <textarea name="message" required /> <button disabled={status === 'loading'}> {status === 'loading' ? 'Sending...' : 'Send'} </button> {status === 'success' && <p>Thanks!</p>} </form> ); } ```

Step 3: Use It

<ContactForm formId="your-form-id" />

That's it! Your form is ready.