FormFlow Component

The base component for building custom forms. Handles submission, validation, loading states, and success/error handling.

Import

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

Basic Usage

import { FormFlow, Input, Textarea, SubmitButton } from '@formflow.sh/react';

function CustomForm() {
  return (
    <FormFlow
      apiKey="ff_live_xxx"
      onSuccess={(data) => console.log('Submitted:', data)}
    >
      <Input name="email" type="email" label="Email" required />
      <Textarea name="message" label="Message" />
      <SubmitButton>Send</SubmitButton>
    </FormFlow>
  );
}

Props

With All Options

<FormFlow
  apiKey="ff_live_xxx"
  formId="custom-contact"
  theme="modern"
  successMessage="Thanks for reaching out!"
  onSuccess={(data) => {
    console.log('Submission ID:', data.submissionId);
    analytics.track('form_submitted', { formId: 'custom-contact' });
  }}
  onError={(error) => {
    console.error('Submission failed:', error);
    toast.error('Something went wrong. Please try again.');
  }}
  className="max-w-md mx-auto"
>
  <Input name="name" label="Name" required />
  <Input name="email" type="email" label="Email" required />
  <SubmitButton>Send Message</SubmitButton>
</FormFlow>

Development Mode

When no API key is provided, FormFlow runs in development mode:

• Submissions are logged to the browser console
• No data is sent to the server
• Success callbacks still fire
• Perfect for testing and prototyping

Context API

FormFlow provides a context that child components can access:

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

function CustomField() {
  const { isSubmitting, theme, formData } = useFormFlow();

  return (
    <div className={isSubmitting ? 'opacity-50' : ''}>
      {/* Custom field implementation */}
    </div>
  );
}

Available Child Components

• Input - Text, email, tel, number
• Textarea - Multi-line text
• Select - Dropdown selection
• Checkbox - Boolean toggle
• SubmitButton - Submit with loading