Remix Integration Guide
Complete guide to integrate MyFormConnect with Remix
Setup time: 5-10 minutes
Difficulty: Easy
Compatible versions: Remix v2+
Post Remix contact forms to MyFormConnect from the browser with FormData and fetch. Stay on the same route with an inline success state — no custom action endpoint required.
Prerequisites
- A MyFormConnect account — sign up here
- A form created in your MyFormConnect 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 MyFormConnect, and show success inline.
1
Copy your form UUID
Find the UUID for your MyFormConnect form.
- Log in to your MyFormConnect dashboard
- Open the form
- 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 MyFormConnect.
- Create or edit your contact route component
- Replace
YOUR_FORM_UUIDwith your UUID - Keep the submit logic in the browser (client-side)
import { useState } from 'react';
const ENDPOINT = 'https://myformconnect.io/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://myformconnect.io/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.
- Run the Remix app and open the contact route
- Submit the form
- Check Leads or Form Responses in MyFormConnect
Important Note
Allow your local origin under Domains if Domain Restriction is enabled.
Related Integrations
References & Official Documentation
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