Platform guide · ~10 min
Connect your WordPress site to MyFormConnect
Works on: any self-hosted WordPress site. On WordPress.com (the hosted version), lower plans may remove scripts. If the form doesn't appear or doesn't send, use the plain version, or check your plan.
- Do "Before you start" on the connect hub and have your form code ready.
- In your WordPress dashboard, open Pages and edit your contact page.
- Where you want the form, click + (add block), search for Custom HTML, and add it.
- Paste your whole form code into the block.
- Click Preview to check it appears, then Update (or Save).
- Test it: open the live page on your phone, fill in the form as a customer would, and send. Check the alert arrives.
- Once it works, delete the old form block (or old form plugin shortcode) from the page.
Using a page builder? In Elementor, use the HTML widget. In Divi, use the Code module. In most other builders, look for "HTML", "Code" or "Embed". Paste the same code.
Common problems
- The form shows as text or code: you pasted into a normal paragraph block. Use the Custom HTML block.
- The form appears but doesn't send: check your domain is listed in MyFormConnect under Settings → Domains, exactly as it appears in your browser's address bar, with or without "www".
- A caching or security plugin blocks it: clear your site cache after saving. If a security plugin blocks outside scripts, use the plain version, or allow myformconnect.io in that plugin.
Done when: a test enquiry from your live page 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.
<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">