Form handling without the backend work.

<script src="https://forminit.com/sdk/v1/forminit.js"></script>

<form id="contact-form">
  <!-- Sender Block -->
  <input type="text" name="fi-sender-fullName" placeholder="Full name" />
  <input type="email" name="fi-sender-email" placeholder="Email" />
  <input type="tel" name="fi-sender-phone" placeholder="Phone" />
  <input type="text" name="fi-sender-city" placeholder="City" />
  <input type="text" name="fi-sender-address" placeholder="Address" />

  <!-- Text Block -->
  <textarea name="fi-text-your-message" placeholder="Message"></textarea>

  <!-- Select Block -->
  <select name="fi-select-budget">
    <option value="under-5k">Under $5,000</option>
    <option value="5k-10k">$5,000 - $10,000</option>
    <option value="25k-plus">$25,000+</option>
  </select>

  <button type="submit">Submit</button>
</form>

<script>
  const forminit = new Forminit();
  const form = document.getElementById('contact-form');

  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    const { error } = await forminit.submit('{form_id}', formData);
    if (!error) alert('Submitted!');
  });
</script>

// 1. npm install forminit
// 2. Add FORMINIT_API_KEY to your .env
// 3. Create a proxy route so your API key stays on the server

// app/api/forminit/route.ts
import { createForminitProxy } from 'forminit/next';

export const POST = createForminitProxy({
  apiKey: process.env.FORMINIT_API_KEY!,
}).POST;

// 4. Build your form component
// app/page.tsx
'use client';
import { Forminit } from 'forminit';

// 5. Point the SDK at your proxy route
const forminit = new Forminit({ proxyUrl: '/api/forminit' });

export default function ContactForm() {
  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    const { error } = await forminit.submit('{form_id}', formData);
    if (!error) alert('Submitted!');
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* Sender Block */}
      <input type="text" name="fi-sender-fullName" placeholder="Full name" />
      <input type="email" name="fi-sender-email" placeholder="Email" />
      <input type="tel" name="fi-sender-phone" placeholder="Phone" />
      <input type="text" name="fi-sender-city" placeholder="City" />
      <input type="text" name="fi-sender-address" placeholder="Address" />

      {/* Text Block */}
      <textarea name="fi-text-your-message" placeholder="Message" />

      {/* Select Block */}
      <select name="fi-select-budget">
        <option value="$1000 - $2000">$1000 - $2000</option>
        <option value="$2000 - $5000">$2000 - $5000</option>
      </select>

      <button type="submit">Submit</button>
    </form>
  );
}