# Vercel Integration Guide

Complete guide to integrate MyFormConnect with Vercel

      Setup time: **5-10 minutes
      Difficulty: **Easy
        Compatible versions: **Static sites, Next.js, and other frameworks on Vercel**

Deploy a static or Next.js site on Vercel and collect submissions with MyFormConnect. Use a plain HTML form POST, or fetch for SPA-style submissions.

## ** Prerequisites

- ** A MyFormConnect account - [Sign up here](/users/sign_up)
- ** A form created in your MyFormConnect dashboard with its UUID copied
- ** A project deployed (or ready to deploy) on Vercel

## ** Integration Methods

### HTML Form or Fetch (Recommended)

                5 minutes

                Easy

Point a form at MyFormConnect in any page you deploy to Vercel. Works for plain HTML and React/Next components.

                  1

#### Copy your form UUID

                    Get your form UUID from the MyFormConnect dashboard.

1. Log in to your MyFormConnect dashboard
2. Open the form you want to use
3. Copy the form UUID (e.g. `550e8400-e29b-41d4-a716-446655440000`)

                  2

#### Add the form to your page

                    Use a standard HTML form in a static page, or the same markup inside a Next.js component.

1. Replace `YOUR_FORM_UUID` with your form UUID
2. Commit and push, or deploy with the Vercel CLI / dashboard

```
<form action="https://myformconnect.io/f/YOUR_FORM_UUID" method="POST" data-mfc="true">
  <label for="name">Name *</label>
  <input type="text" id="name" name="name" required>

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

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="4"></textarea>

  <button type="submit">Send Message</button>
</form>

<script src="https://myformconnect.io/loader.js" data-client-id="YOUR_FORM_UUID"></script>
```

##### Important Note

                            loader.js is optional. Without it, the browser does a normal HTML POST.

                  3

#### Optional: submit with fetch

                    For SPAs or custom UI, post FormData (or JSON) to the same endpoint.

```
<script>
async function submitForm(event) {
  event.preventDefault();
  const form = event.target;
  const res = await fetch('https://myformconnect.io/f/YOUR_FORM_UUID', {
    method: 'POST',
    body: new FormData(form),
    headers: { 'Accept': 'application/json' }
  });
  if (res.ok) {
    form.reset();
    alert('Thanks! We received your message.');
  } else {
    alert('Something went wrong. Please try again.');
  }
}
</script>

<form onsubmit="submitForm(event)">
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <textarea name="message"></textarea>
  <button type="submit">Send</button>
</form>
```

##### Important Note

                            Replace `YOUR_FORM_UUID`. Field names become lead fields in MyFormConnect.

                  4

#### Test on your Vercel URL

                    Verify submissions after deploy.

1. Open your Vercel deployment URL
2. Submit a test entry
3. Check MyFormConnect dashboard under **Leads**

## ** Troubleshooting

              Check: 1) Form UUID is correct, 2) You deployed the latest commit, 3) Browser console for errors, 4) You're checking the right form under **Leads**.

              Confirm the URL is `https://myformconnect.io/f/YOUR_FORM_UUID`, method is POST, and you're sending form fields (FormData works well).

              Hard-refresh the browser, or open the deployment in an incognito window. Confirm Vercel finished the latest build.

              Ensure `data-mfc="true"` is on the form and the script tag loads on the page with a valid `data-client-id`.

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

      [Static Sites Integration Guide →](/docs/deployment/static-sites)      [GitHub Pages Integration Guide →](/docs/deployment/github-pages)      [Next.js Integration Guide →](/docs/frameworks/nextjs)

## ** References & Official Documentation

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

## ** Next Steps

#### ** Configure MyFormConnect

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