The complete headless backend API for your </form>

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

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

// app/page.tsx
'use client';
import { Forminit } from 'forminit';

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>
  );
}

// server/api/forminit.post.ts
import { createForminitNuxtHandler } from 'forminit/nuxt';

const config = useRuntimeConfig();

export default defineEventHandler(
  createForminitNuxtHandler({ apiKey: config.forminitApiKey })
);

// pages/contact.vue
<script setup lang="ts">
import { Forminit } from 'forminit';

const forminit = new Forminit({ proxyUrl: '/api/forminit' });

async function handleSubmit(e: Event) {
  const form = e.target as HTMLFormElement;
  const formData = new FormData(form);
  const { error } = await forminit.submit('{form_id}', formData);
  if (!error) alert('Submitted!');
}
</script>

<template>
  <form @submit.prevent="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>
</template>

import { Forminit } from 'forminit';

const forminit = new Forminit({
  apiKey: process.env.FORMINIT_API_KEY,
});

const { data, error } = await forminit.submit('{form_id}', {
  blocks: [
    // Sender Block
    {
      type: 'sender',
      properties: {
        fullName: 'Oliver Harrington',
        email: '[email protected]',
        phone: '+442079460958',
        city: 'London',
        address: '123 Example Street, SW1A 1AA',
      },
    },
    // Text Block
    { type: 'text', name: 'your-message', value: 'Hi — I\'m interested in your pricing and whether this would fit our team. Could you share a quick overview and the next steps?' },
    // Select Block
    { type: 'select', name: 'budget', value: '$2000 - $5000' },
  ],
});

console.log(data?.hashId);