FormFlow
Sign In

React Contact Form Component

A beautiful, accessible contact form component for React. Includes name, email, subject, and message fields with built-in validation, spam protection, and email notifications.

Installation

npm install @formflow.sh/react

Basic Usage

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

function ContactPage() {
  return (
    <ContactForm
      apiKey="ff_live_xxx"
      onSuccess={(data) => {
        console.log('Contact form submitted:', data);
      }}
    />
  );
}

Props

PropTypeDefaultDescription
apiKeystring-Your FormFlow API key
theme"minimal" | "modern" | "brutalist" | "glass""minimal"Visual theme
onSuccess(data) => void-Called after successful submission
onError(error) => void-Called on submission error
classNamestring-Additional CSS classes
successMessagestring"Thank you!"Message shown after submission
submitButtonTextstring"Send Message"Submit button label

Themes

// Clean, minimal design (default)
<ContactForm theme="minimal" />

// Modern with rounded corners
<ContactForm theme="modern" />

// Bold, high-contrast design
<ContactForm theme="brutalist" />

// Frosted glass effect
<ContactForm theme="glass" />

With Custom Success Handler

import { ContactForm } from '@formflow.sh/react';
import { useRouter } from 'next/navigation';

function ContactPage() {
  const router = useRouter();

  return (
    <ContactForm
      apiKey="ff_live_xxx"
      onSuccess={(data) => {
        // Redirect to thank you page
        router.push('/thank-you');
      }}
      onError={(error) => {
        // Handle error
        console.error('Submission failed:', error);
      }}
    />
  );
}

Features Included

  • Email notifications - Get notified when someone submits the form
  • Spam protection - Built-in honeypot and rate limiting
  • Validation - Client-side and server-side validation
  • Accessible - ARIA labels and keyboard navigation
  • Responsive - Works on all screen sizes
  • TypeScript - Full type definitions included

Form Fields

The ContactForm includes these fields:

  • Name - Required text field
  • Email - Required email field with validation
  • Subject - Optional text field
  • Message - Required textarea

Webhook Integration

Send submissions to Slack, Discord, or your own API. Configure webhooks in your FormFlow dashboard.

Related

React Contact Form Component - FormFlow | FormFlow