Platform guide · ~10 min
Connect your Framer site to MyFormConnect
Works on: all Framer plans, using the Embed component. (Framer's site-wide custom code needs a paid plan, but you don't need it here.)
- Do "Before you start" on the connect hub and have your form code ready.
- Open your project in Framer and go to the page where you want the form.
- Open the Insert menu (or press /), search for Embed, and place it on the page.
- Select it, choose HTML in the panel on the right, and paste your whole form code.
- Resize the Embed so the whole form fits, including the button and a little space below. Check the tablet and phone views too.
- Publish, then test on your phone: fill in the form and send. Check the alert arrives.
- Once it works, remove the old form.
Want the form to match your design exactly? Use an AI assistant with this prompt:
Prompt — copy into your AI assistant
Build a contact form for Framer Embed matching: {your site's address}. Submit to MyFormConnect form ID: {your form ID}. Skill: https://myformconnect.io/skills/myformconnect/html/SKILL.md. Include https://myformconnect.io/loader.js with data-captcha="auto" and data-mfc="true", using domain ID {your domain ID}. Fields: name, email, phone (optional), message, and an unticked consent checkbox linking to my privacy page. Return one self-contained HTML snippet (inline CSS and JS only).
Paste the result into the Embed instead.
Allowlisted domain for Framer embeds (OPEN): TODO_FRAMER_EMBED_DOMAIN. Add this domain in MyFormConnect under Settings → Domains if your form runs inside Framer's frame.
Common problems
- The form is cut off: make the Embed taller, on every screen size.
- It works in the editor preview but not live (or the other way round): always test on the published site. If it still fails, confirm the allowlisted domain above is set in MyFormConnect.
Done when: a test enquiry from your published Framer site reached your phone.
Your code, ready to paste
Type your IDs below. The code updates in the browser. The placeholder version is always in the page for search and offline reading.
Form code
<script src="https://myformconnect.io/loader.js" data-client-id="YOUR_DOMAIN_ID" data-captcha="auto"></script>
<style>
.mfc-form { max-width: 520px; font-family: inherit; display: grid; gap: 14px; }
.mfc-form label { display: grid; gap: 6px; font-size: 16px; }
.mfc-form input, .mfc-form textarea { font: inherit; font-size: 16px; padding: 12px; border: 1px solid #bbb; border-radius: 8px; width: 100%; box-sizing: border-box; }
.mfc-form .mfc-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.mfc-form .mfc-consent input { width: auto; margin-top: 3px; }
.mfc-form button { font: inherit; font-size: 17px; padding: 14px; border: 0; border-radius: 8px; background: #1f5f4a; color: #fff; cursor: pointer; }
.mfc-form .mfc-next { font-size: 14px; margin: 0; opacity: .8; }
</style>
<form class="mfc-form" data-mfc="true" action="https://myformconnect.io/f/YOUR_FORM_ID" method="POST">
<label>Your name
<input type="text" name="name" autocomplete="name" required>
</label>
<label>Email
<input type="email" name="email" autocomplete="email" required>
</label>
<label>Phone (optional)
<input type="tel" name="phone" autocomplete="tel">
</label>
<label>How can we help?
<textarea name="message" rows="4" required></textarea>
</label>
<label class="mfc-consent">
<input type="checkbox" name="consent" value="yes" required>
<span>I agree that Your Business can use these details to reply to my enquiry. <a href="/privacy" target="_top">Privacy</a></span>
</label>
<button type="submit">Get a quote</button>
<p class="mfc-next">We usually reply within a few hours, Monday to Saturday.</p>
</form>
Plain version (no script) — form tag starts like this:
<form class="mfc-form" action="https://myformconnect.io/f/YOUR_FORM_ID" method="POST">