API & Developers

FormsIntel React SDK

The official formsintel-sdk NPM package provides headless hooks and drop-in UI components for seamless React integrations.

Installation

bash

npm install formsintel-sdk

1. FormsIntelProvider

Wrap your application root with the Provider. This sets the global configuration for all FormsIntel hooks and components in your app.

jsx

import React from 'react';
import { FormsIntelProvider } from 'formsintel-sdk';

function App() {
  return (
    <FormsIntelProvider baseUrl="https://api.formsintel.com/v1">
      <YourAppComponents />
    </FormsIntelProvider>
  );
}

2. useFormsIntel (Headless Hook)

The headless approach. Bring your own UI (Tailwind, Material UI, Chakra) and let the hook handle API communication, loading states, and error parsing.

Hook Return Values

submit(data: object) — Async function to submit the flat JSON form data.
loading: boolean — True while the request is in flight.
error: string | null — Returns human-readable error if validation fails or rate limited.
success: boolean — True when submission succeeds.
reset() — Resets the state back to initial.

jsx

import React, { useState } from 'react';
import { useFormsIntel } from 'formsintel-sdk';

export function CustomContactForm() {
  const [email, setEmail] = useState('');
  const { submit, loading, error, success } = useFormsIntel('ff_form_xyz123');

  const handleSubmit = async (e) => {
    e.preventDefault();
    await submit({ email: email });
  };

  if (success) {
    return <p className="text-green-500">Thanks for subscribing!</p>;
  }

  return (
    <form onSubmit={handleSubmit}>
      {error && <p className="text-red-500">{error}</p>}
      
      <input 
        type="email" 
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Enter your email" 
      />
      
      <button type="submit" disabled={loading}>
        {loading ? 'Submitting...' : 'Subscribe'}
      </button>
    </form>
  );
}

3. FormsIntelForm (Drop-in Component)

Want it done instantly? Use the drop-in widget. It automatically fetches your form schema from the Dashboard, renders all fields (including conditional logic), and handles submissions.

jsx

import React from 'react';
import { FormsIntelForm } from 'formsintel-sdk';

export function ContactPage() {
  return (
    <div className="max-w-md mx-auto">
      <FormsIntelForm 
        formId="ff_form_xyz123" 
        theme="light" 
        onSuccess={() => console.log('Successfully submitted!')}
      />
    </div>
  );
}

Local Development (CORS/Proxy)

If you are developing locally and your frontend runs on a different port than your backend (e.g., Vite on 5173, Express on 3000), you must proxy API requests to avoid CORS errors.

vite.config.js

javascript

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
})

Roadmap

Vue.js & Svelte — Official SDK packages.
SSR Adapters — Built-in Server Actions support for Next.js App Router and loaders/actions for Remix to handle zero-JS graceful degradation.
TypeScript Definitions — Fully typed hook returns based on your exact dashboard form schema.

API Keys & Scopes

Webhooks