Platform guide · ~10 min

Connect your Webflow site to MyFormConnect

Works on: you can keep your Webflow-designed form and just change where it sends. A custom domain needs a paid Webflow Site plan (you probably have one already). Adding the extra spam check (step 7) also needs a paid Site plan, because it uses custom code.

This guide keeps your existing Webflow form and its design. Only where it sends changes.

1. Do "Before you start" on the connect hub. You only need your form ID and domain ID, not the full form code.
2. In the Webflow Designer, click your form (the Form Block) and open the Settings panel on the right.
3. Under Send to, remove the Webflow and Email notifications destinations. Webflow doesn't allow them together with a custom action.
4. Click + next to Send to, choose Custom action, and enter:
   • URL: https://myformconnect.io/f/YOUR_FORM_ID
   • Method: POST
5. Click each field in the form and check its Name in Settings: use name, email, phone and message. Add a checkbox named consent with your consent text and a link to your privacy page.
6. On the form element, under Custom attributes, add the name data-mfc with the value true.
7. Open Site settings → Custom code, and in the Footer code box paste:
   Prompt — copy into your AI assistant Copy

   <script src="https://myformconnect.io/loader.js" data-client-id="YOUR_DOMAIN_ID" data-captcha="auto"></script>

   Save.
8. If you turned on reCAPTCHA in Webflow's site settings, turn it off. It conflicts with custom actions and causes silent failures. MyFormConnect handles spam protection.
9. Publish, then test on your phone: fill in the form and send. Check the alert arrives.

Good to know: once a custom action is set, submissions no longer appear in Webflow's own Forms list. They go to MyFormConnect instead. Nothing is stored in two places.

Common problems

• Submissions fail after publishing: check that site-level reCAPTCHA is off, and that your domain is in MyFormConnect under Settings → Domains.
• Fields arrive empty or oddly named: check each field's Name in Webflow (step 5).

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

<form class="mfc-form" action="https://myformconnect.io/f/YOUR_FORM_ID" method="POST">

← Back to the connect hub · Continue to day 9