Skip to Content
Forms<Form /> Component

React Form Component

The FlowGenie React Form component provides a ready-to-use form renderer that handles all the complexity of displaying and submitting forms. It’s the easiest way to integrate FlowGenie forms into your React application.

'use client'
import { Form } from '@flowgenie/sdk/react'
 
export default function PublicForm() {
  return (
    <Form 
      slug="contact-us"
      successUrl="/thank-you"
      submitLabel="Send Message"
    />
  )
}

Quick Start

1. Create Your Form

First, create your form using the FlowGenie form builder and publish it. You can access the form builder at app.flowgenie.pro .

2. Install the FlowGenie SDK

npm install flowgenie
# or
pnpm add flowgenie
# or
yarn add flowgenie

3. Fetch Form Configuration on the Server

For private forms, fetch the form configuration server-side using your API key:

import { fetchForm } from '@flowgenie/sdk'
 
export default async function ContactPage() {
  const form = await fetchForm({
    id: process.env.FLOWGENIE_FORM_ID,
    apiKey: process.env.FLOWGENIE_API_KEY,
    baseUrl: 'https://app.flowgenie.pro'
  })
 
  return <ContactFormClient form={form} />
}

For public forms, you can fetch them without an API key using the form slug:

const form = await fetchForm({
  slug: 'contact-us',
  baseUrl: 'https://app.flowgenie.pro'
})

4. Render the Form on the Frontend

Create a client component to render the form:

'use client'
import { Form } from '@flowgenie/sdk/react'
import type { FormFetchResponse } from '@flowgenie/sdk'
 
export default function ContactFormClient({ form }: { form: FormFetchResponse }) {
  return (
    <Form 
      config={form} 
      slug="contact-us" 
      successUrl="/contact/success" 
    />
  )
}

That’s it! The Form component handles rendering all question types, validation, conditional display, and form submission automatically.

Component Props

The Form component accepts the following props:

Required Props

  • config (optional): The form configuration object. Can be a FormConfig or FormFetchResponse from fetchForm(). If not provided, you must provide formId or slug.

Form Identification (one required if config not provided)

  • formId: The unique ID of the form
  • slug: The slug of the form (for public forms)

API Configuration

  • apiKey: Your FlowGenie API key (required for private forms)
  • baseUrl: The base URL for the FlowGenie API (defaults to https://app.flowgenie.pro)

Customization

  • classNamePrefix: Custom prefix for CSS class names (defaults to fg-)
  • classNameKey: Alternative way to specify class prefix
  • submitLabel: Custom text for the submit button (defaults to "Submit")
  • loadingFallback: Custom React node to display while loading (defaults to "Loading form...")

Callbacks

  • onSuccess: Callback function called when form submission succeeds. Receives the SubmitFormResponse object.
  • onError: Callback function called when form submission fails. Receives an Error object.

Redirects

  • successUrl: URL to redirect to after successful submission
  • redirectUrl: Alternative prop name for success URL (same as successUrl)

Usage Examples

Basic Usage with Server-Side Fetch

// app/contact/page.tsx (Server Component)
import { fetchForm } from '@flowgenie/sdk'
import ContactFormClient from './ContactFormClient'
 
export default async function ContactPage() {
  const form = await fetchForm({
    id: process.env.FLOWGENIE_FORM_ID,
    apiKey: process.env.FLOWGENIE_API_KEY,
    baseUrl: 'https://app.flowgenie.pro'
  })
 
  return <ContactFormClient form={form} />
}
// app/contact/ContactFormClient.tsx (Client Component)
'use client'
import { Form } from '@flowgenie/sdk/react'
import type { FormFetchResponse } from '@flowgenie/sdk'
 
export default function ContactFormClient({ form }: { form: FormFetchResponse }) {
  return <Form config={form} successUrl="/contact/success" />
}

Client-Side Fetch with Slug

'use client'
import { Form } from '@flowgenie/sdk/react'
 
export default function PublicForm() {
  return (
    <Form 
      slug="contact-us"
      successUrl="/thank-you"
      submitLabel="Send Message"
    />
  )
}

With Custom Styling

'use client'
import { Form } from '@flowgenie/sdk/react'
 
export default function StyledForm() {
  return (
    <Form 
      config={form}
      classNamePrefix="my-form-"
      submitLabel="Submit Application"
      onSuccess={(response) => {
        console.log('Form submitted:', response)
      }}
      onError={(error) => {
        console.error('Submission error:', error)
      }}
    />
  )
}

With Custom Success Handler

'use client'
import { Form } from '@flowgenie/sdk/react'
import { useRouter } from 'next/navigation'
 
export default function FormWithHandler() {
  const router = useRouter()
 
  return (
    <Form 
      config={form}
      onSuccess={(response) => {
        // Custom success handling
        console.log('Submission ID:', response.id)
        router.push(`/submission/${response.id}`)
      }}
      onError={(error) => {
        alert(`Error: ${error.message}`)
      }}
    />
  )
}

Supported Question Types

The Form component automatically renders the appropriate input for each question type:

  • Text inputs: text, email, password, fillblank
  • Text areas: multiline, code, orderedlist
  • Numbers: number (with min/max support)
  • Dates: date (with variants: date, time, datetime)
  • Selects: select (dropdown, radio buttons, or button group)
  • Multi-selects: multiselect (checkboxes or multi-select dropdown)
  • Checkbox: Single checkbox input
  • File upload: file (with file type restrictions and multiple file support)
  • Content: header, paragraph, divider, markdown, image
  • E-signature: esignature (canvas-based signature)

Conditional Display

The Form component automatically handles conditional display logic for both sections and questions. Questions and sections with showIf conditions will be shown or hidden based on user answers.

Styling

The Form component includes default styles that work out of the box. All CSS classes are prefixed (default: fg-) to avoid conflicts with your existing styles.

CSS Class Structure

  • fg-form: The form container
  • fg-page: Page container
  • fg-section: Section container
  • fg-section-header: Section title and description
  • fg-row: Row container (questions displayed horizontally)
  • fg-question: Individual question container
  • fg-label: Question label
  • fg-helper: Helper text
  • fg-input: Text inputs, textareas, selects
  • fg-radio-group: Radio button group
  • fg-checkbox-group: Checkbox group
  • fg-submit: Submit button
  • fg-error: Error messages
  • fg-loading: Loading state

Custom Styling

You can customize the class prefix using the classNamePrefix prop:

<Form 
  config={form}
  classNamePrefix="custom-form-"
/>

This will generate classes like custom-form-form, custom-form-input, etc.

Overriding Styles

You can override the default styles by targeting the generated classes in your CSS:

.fg-input {
  border: 2px solid #blue;
  border-radius: 8px;
}
 
.fg-submit {
  background: linear-gradient(to right, #blue, #purple);
  padding: 12px 24px;
}

Layout Structure

The form uses a flexible layout structure:

  • Sections: Display as flex column (stacked vertically)
  • Rows: Display as flex row (questions side-by-side)
  • Questions: Flex column with flex: 1 to distribute evenly within rows

This means questions in the same row will appear horizontally next to each other, while different rows stack vertically.

Loading States

While fetching the form configuration, the component displays a loading state. You can customize this:

<Form 
  config={form}
  loadingFallback={<div>Loading your form...</div>}
/>

Error Handling

The Form component handles various error states:

  • Fetch errors: Displayed if the form configuration cannot be loaded
  • Validation errors: Displayed for individual questions (if validation is configured)
  • Submission errors: Displayed if form submission fails

All errors are displayed with the fg-error or fg-submit-error class for easy styling.

Next Steps

Last updated on
Embed on your siteTemplates