# Remix Integration Guide

Complete guide to integrate MyFormCapture with Remix

      Setup time: **5-10 minutes
      Difficulty: **Easy
        Compatible versions: **Remix v2+**

Post Remix contact forms to MyFormCapture from the browser with `FormData` and `fetch`. Stay on the same route with an inline success state — no custom action endpoint required.

## ** Prerequisites

- ** A MyFormCapture account — [sign up here](/users/sign_up)
- ** A form created in your MyFormCapture dashboard with its UUID copied
- ** A Remix project
- ** Basic Remix routing familiarity

## ** Integration Methods

### Client form submit

                5 minutes

                Easy

Handle submit in a client component (or route module with `onSubmit`), POST `FormData` to MyFormCapture, and show success inline.

                  1

#### Copy your form UUID

                    Find the UUID for your MyFormCapture form.

1. Log in to your MyFormCapture dashboard
2. Open the form
3. Copy the form UUID

##### Important Note

                            Use this UUID in the endpoint URL below.

                  2

#### Add a client submit handler

                    Prevent the default navigation and POST `FormData` to MyFormCapture.

1. Create or edit your contact route component
2. Replace `YOUR_FORM_UUID` with your UUID
3. Keep the submit logic in the browser (client-side)

```
import { useState } from 'react';

const ENDPOINT = 'https://myformcapture.com/f/YOUR_FORM_UUID';

export default function Contact() {
  const [status, setStatus] = useState('idle');
  const [errorMessage, setErrorMessage] = useState('');

  async function onSubmit(e) {
    e.preventDefault();
    const form = e.currentTarget;
    setStatus('loading');
    setErrorMessage('');

    try {
      const res = await fetch(ENDPOINT, {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'X-Requested-With': 'XMLHttpRequest'
        },
        body: new FormData(form)
      });
      if (!res.ok) throw new Error('Submission failed');
      setStatus('success');
      form.reset();
    } catch {
      setStatus('error');
      setErrorMessage('Something went wrong. Please try again.');
    }
  }

  if (status === 'success') {
    return <p>Thanks — we will be in touch soon.</p>;
  }

  return (
    <form action="https://myformcapture.com/f/YOUR_FORM_UUID" method="POST" data-mfc="true" onSubmit={onSubmit}>
      <label htmlFor="name">Name *</label>
      <input id="name" name="name" type="text" required />

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

      <label htmlFor="message">Message</label>
      <textarea id="message" name="message" rows={4} />

      <button type="submit" disabled={status === 'loading'}>
        {status === 'loading' ? 'Sending…' : 'Send Message'}
      </button>
      {status === 'error' && <p>{errorMessage}</p>}
    </form>
  );
}
```

##### Important Note

                            Call `e.preventDefault()` so Remix does not treat this as a resource action. Send `FormData` — not `JSON.stringify`.

                  3

#### Verify in the dashboard

                    Submit a test message and confirm it arrives.

1. Run the Remix app and open the contact route
2. Submit the form
3. Check **Leads** or **Form Responses** in MyFormCapture

##### Important Note

                            Allow your local origin under Domains if Domain Restriction is enabled.

## ** Troubleshooting

              Ensure `preventDefault()` runs on submit and you are not using Remix `<Form method="post">` aimed at your own action. Use a plain `<form onSubmit={...}>` as shown.

              Confirm the form UUID, then check **Leads** or **Form Responses**. Add your site origin under Domains when restriction is on.

              Use `new FormData(form)` as the fetch body. Do not set `Content-Type` manually and do not send JSON.

#### Still having issues?

Can't find the answer you're looking for? Our support team is here to help with your integration.

          [** Contact Support](/support)

## ** Related Integrations

      [Next.js Integration Guide →](/docs/frameworks/nextjs)      [Vue Integration Guide →](/docs/frameworks/vue)      [Static Sites Integration Guide →](/docs/deployment/static-sites)

## ** References & Official Documentation

- ** [Getting Started Guide](/docs/getting-started)
- ** [Custom Webhooks](/docs/tools/code/custom-webhooks)

## ** Next Steps

#### ** Configure MyFormCapture

- ** Set up your timezone
- ** Configure lead notifications
- ** Set up advanced spam detection
- ** Add team members to your account

#### ** Advanced Features

- ** Use our custom form templates
- ** Try AI Insights for Leads
- ** Integrate with your CRM
- ** Set up automated workflows