Svelte Integration Guide
Complete guide to integrate MyFormCapture with Svelte
Setup time: 5-10 minutes
Difficulty: Easy
Compatible versions: Svelte 4/5 · SvelteKit
Wire a Svelte contact form to MyFormCapture with FormData and fetch. The same pattern works in SvelteKit on the client — no custom form backend required.
Prerequisites
- A MyFormCapture account — sign up here
- A form created in your MyFormCapture 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 MyFormCapture.
1
Copy your form UUID
You need the UUID from your MyFormCapture form.
- Log in to your MyFormCapture dashboard
- Open the form
- 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.
- Create
ContactForm.svelte - Replace
YOUR_FORM_UUIDwith your UUID - Import it on your contact page
<script>
const endpoint = 'https://myformcapture.com/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://myformcapture.com/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 MyFormCapture.
- Start the app and open the contact page
- Submit the form
- Check Leads or Form Responses in your MyFormCapture dashboard
Important Note
Allow your local origin under Domains if Domain Restriction is enabled.
Related Integrations
References & Official Documentation
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