FormFlow
Sign In

FormFlow vs react-hook-form

FormFlow wraps react-hook-form with built-in backend submission. You get all the power of react-hook-form plus backend out of the box.

The Key Difference

react-hook-form is a frontend library. It handles form state, validation, and performance. But you still need to write backend code to handle submissions.

FormFlow wraps react-hook-form and adds backend submission. Same great DX, but no backend code required.

Code Comparison

react-hook-form (Frontend Only)

import { useForm } from 'react-hook-form';

function ContactForm() {
  const { register, handleSubmit } = useForm();

  const onSubmit = async (data) => {
    // You write this API call
    const res = await fetch('/api/contact', {
      method: 'POST',
      body: JSON.stringify(data),
    });
    // Handle response...
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email')} />
      <button type="submit">Submit</button>
    </form>
  );
}

// Plus you need:
// ❌ Backend API route (/api/contact)
// ❌ Database setup
// ❌ Email notifications
// ❌ Spam protection

FormFlow (Frontend + Backend)

import { useFormFlow } from '@formflow.sh/react';

function ContactForm() {
  const { register, handleSubmit } = useFormFlow({
    apiKey: process.env.NEXT_PUBLIC_FORMFLOW_API_KEY,
    onSuccess: () => alert('Sent!'),
  });

  // That's it! Backend handled automatically

  return (
    <form onSubmit={handleSubmit}>
      <input {...register('email')} />
      <button type="submit">Submit</button>
    </form>
  );
}

// Backend included:
// ✅ API endpoint (automatic)
// ✅ Storage (automatic)
// ✅ Email notifications (automatic)
// ✅ Spam protection (automatic)

Feature Comparison

FeatureFormFlowreact-hook-form
Form state management✓✓
Client-side validation✓✓
TypeScript support✓✓
Works with UI libraries✓✓
Performance optimized✓✓
Backend submission API✓✗
Data storage✓✗
Email notifications✓✗
Spam protection✓✗
Dashboard & analytics✓✗
CSV export✓✗

Use react-hook-form when:

  • ✓ You already have a backend
  • ✓ You need custom backend logic
  • ✓ You want full control of submission
  • ✓ You're building complex forms with custom workflows

Use FormFlow when:

  • ✓ You don't want to write backend code
  • ✓ You need standard form submission (contact, newsletter, etc.)
  • ✓ You want built-in storage and notifications
  • ✓ You want to ship faster

The Bottom Line

FormFlow doesn't replace react-hook-form. It builds on it.

Think of it as "react-hook-form + backend." Same great developer experience, but no server code required.

Migrating from react-hook-form

Already using react-hook-form? Migration is simple:

1. Install FormFlow

npm install @formflow.sh/react

2. Replace the import

// Before
import { useForm } from 'react-hook-form';

// After
import { useFormFlow } from '@formflow.sh/react';

3. Add API key and remove backend code

// Before
const { register, handleSubmit } = useForm();
const onSubmit = async (data) => {
  await fetch('/api/contact', { ... });
};

// After
const { register, handleSubmit } = useFormFlow({
  apiKey: process.env.NEXT_PUBLIC_FORMFLOW_API_KEY,
  onSuccess: () => alert('Sent!')
});
// Delete /api/contact endpoint - not needed!

Ready to add backend to your forms?

Get all the power of react-hook-form plus backend submission.

FormFlow vs react-hook-form | Feature Comparison | FormFlow