> ## Documentation Index
> Fetch the complete documentation index at: https://docs.surveyowl.co/llms.txt
> Use this file to discover all available pages before exploring further.

# React form

> Connect a React component to an Endpoint form.

This example uses React state for the submission message and disables the button while the request is running. No additional package is required.

## Create the component

Replace `YOUR_FORM_PUBLIC_KEY` in the request URL with the Public Key from the Endpoint form's **General** tab.

```jsx theme={null}
import { useState } from 'react';

export default function ContactForm() {
  const [status, setStatus] = useState('');
  const [submitting, setSubmitting] = useState(false);

  async function handleSubmit(event) {
    event.preventDefault();
    const form = event.currentTarget;
    setSubmitting(true);
    setStatus('Sending…');

    const body = new FormData(form);

    try {
      const response = await fetch('https://api.surveyowl.co/v1/submit/YOUR_FORM_PUBLIC_KEY', {
        method: 'POST',
        body,
      });
      const result = await response.json();
      const error = typeof result.error === 'string'
        ? result.error
        : result.error?.message;

      if (!response.ok) throw new Error(error || 'Could not send the form.');

      form.reset();
      setStatus('Thanks — your message was sent.');
    } catch (error) {
      setStatus(error.message);
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Name</label>
      <input id="name" name="name" required />

      <label htmlFor="email">Email</label>
      <input id="email" name="email" type="email" required />

      <label htmlFor="message">Message</label>
      <textarea id="message" name="message" required />

      <button type="submit" disabled={submitting}>
        {submitting ? 'Sending…' : 'Send message'}
      </button>

      <p role="status">{status}</p>
    </form>
  );
}
```

## Use it in a page

Import and render the component like any other React component:

```jsx theme={null}
import ContactForm from './ContactForm';

export default function ContactPage() {
  return (
    <main>
      <h1>Contact us</h1>
      <ContactForm />
    </main>
  );
}
```

Submit one test response and confirm it appears in **Submissions**. Your CSS and component library can style the form without changing the submission code.

If the component accepts files, the existing `FormData` request already uses the correct format. Check the limits in [Files and CAPTCHA](/developer-api/files-and-captcha).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.