# Next.js Integration Guide

Complete guide to integrate MyFormCapture with Next.js

      Setup time: **5-10 minutes
      Difficulty: **Easy
        Compatible versions: **Next.js 13+ (App Router)**

Add a MyFormCapture contact form to a Next.js App Router app with a Client Component. Submit with `fetch` and `FormData` — no API route or Server Action required.

## ** Prerequisites

- ** A MyFormCapture account — [sign up here](/users/sign_up)
- ** A form created in your MyFormCapture dashboard with its UUID copied
- ** A Next.js App Router project (`app/`)
- ** Basic React / Client Component familiarity

## ** Integration Methods

### App Router Client Component

                5 minutes

                Easy

Use a `'use client'` form component, POST `FormData` to MyFormCapture, and show an inline success state on the same page.

                  1

#### Copy your form UUID

                    You need the UUID from your MyFormCapture form.

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

##### Important Note

                            Optionally store it in `.env.local` as `NEXT_PUBLIC_FORM_UUID` (public — not a secret).

                  2

#### Create a Client Component form

                    Add a contact form that posts `FormData` with `fetch`.

1. Create `app/components/ContactForm.tsx` (or your preferred path)
2. Replace `YOUR_FORM_UUID` with your UUID
3. Import the component from `app/contact/page.tsx` (or similar)

```
'use client';

import { useState, type FormEvent } from 'react';

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

export function ContactForm() {
  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
  const [errorMessage, setErrorMessage] = useState('');

  async function onSubmit(e: FormEvent<HTMLFormElement>) {
    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

                            Do not `JSON.stringify` the fields. Do not set `Content-Type` — the browser sets the multipart boundary for `FormData`.

                  3

#### Run and verify

                    Submit a test entry and confirm it in MyFormCapture.

1. Run `next dev` and open the contact page
2. Fill in the form and click Submit
3. Check **Leads** or **Form Responses** in your MyFormCapture dashboard

##### Important Note

                            If Domain Restriction is enabled, add `http://localhost:3000` under Domains.

## ** Troubleshooting

              Confirm the form UUID in the endpoint, then check **Leads** or **Form Responses**. Add your Next.js origin under Domains if restriction is enabled.

              Include `Accept: application/json` and `X-Requested-With: XMLHttpRequest` on the `fetch` call so the endpoint returns JSON for your Client Component.

              Pass `new FormData(form)` as the body. Never `JSON.stringify` and never set `Content-Type` manually when using `FormData`.

#### 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