# Svelte Integration Guide

Complete guide to integrate MyFormConnect with Svelte

      Setup time: **5-10 minutes
      Difficulty: **Easy
        Compatible versions: **Svelte 4/5 · SvelteKit**

Wire a Svelte contact form to MyFormConnect with `FormData` and `fetch`. The same pattern works in SvelteKit on the client — no custom form backend required.

## ** Prerequisites

- ** A MyFormConnect account — [sign up here](/users/sign_up)
- ** A form created in your MyFormConnect dashboard with its UUID copied
- ** A Svelte or SvelteKit project
- ** Basic Svelte event handling familiarity

## ** Integration Methods

### Svelte FormData + fetch

                5 minutes

                Easy

Handle `on:submit` (or Svelte 5 `onsubmit`), build `FormData` from the form, and POST to MyFormConnect.

                  1

#### Copy your form UUID

                    You need the UUID from your MyFormConnect form.

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

##### Important Note

                            Replace every `YOUR_FORM_UUID` placeholder with this value.

                  2

#### Add the Svelte contact form

                    Create a component that posts `FormData` to your endpoint.

1. Create `ContactForm.svelte`
2. Replace `YOUR_FORM_UUID` with your UUID
3. Import it on your contact page

```
<script>
  const endpoint = 'https://myformconnect.io/f/YOUR_FORM_UUID'
  let status = 'idle'
  let errorMessage = ''

  async function onSubmit(e) {
    e.preventDefault()
    status = 'loading'
    errorMessage = ''

    try {
      const res = await fetch(endpoint, {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'X-Requested-With': 'XMLHttpRequest'
        },
        body: new FormData(e.target)
      })
      if (!res.ok) throw new Error('Submission failed')
      status = 'success'
      e.target.reset()
    } catch {
      status = 'error'
      errorMessage = 'Something went wrong. Please try again.'
    }
  }
</script>

{#if status === 'success'}
  <p>Thanks — we will be in touch soon.</p>
{:else}
  <form action="https://myformconnect.io/f/YOUR_FORM_UUID" method="POST" data-mfc="true" on:submit={onSubmit}>
    <label for="name">Name *</label>
    <input id="name" name="name" type="text" required />

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

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

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

##### Important Note

                            **SvelteKit:** run this submit handler in the browser (a `+page.svelte` event handler is fine). Do not proxy through a `+page.server.js` action unless you intentionally want a server proxy. Still use `FormData`, not JSON.

                  3

#### Submit and verify

                    Confirm the response lands in MyFormConnect.

1. Start the app and open the contact page
2. Submit the form
3. Check **Leads** or **Form Responses** in your MyFormConnect dashboard

##### Important Note

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

## ** Troubleshooting

              Double-check the form UUID in the endpoint, then look under **Leads** or **Form Responses**. Confirm Domains allows your site origin if restriction is on.

              Use `preventDefault` in your submit handler and `fetch` to MyFormConnect. Avoid a progressive-enhancement `action` that posts to your own SvelteKit endpoint unless you are building a proxy.

              Pass `new FormData(e.target)` as the body. Do not `JSON.stringify` and do not set `Content-Type` yourself.

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