Platform guide · ~10 min
Connect your Shopify store to MyFormConnect
Works on: Online Store 2.0 themes (most current themes, including Shopify's free ones). You don't need to edit theme code.
- Do "Before you start" on the connect hub and have your form code ready.
- In Shopify admin, open Online Store → Themes and click Customize on your live theme.
- At the top, use the page menu to open your Contact page (or the page where you want the form).
- In the left panel, click Add section and choose Custom Liquid.
- Paste your whole form code into the Custom Liquid box.
- Drag the section to where you want it on the page.
- Click Save.
- Test it: open your live contact page on your phone, fill in the form and send. Check the alert arrives.
- Once it works, hide or remove Shopify's built-in contact form section on that page. Click the section, then the eye icon to hide it, or remove it.
Good to know: Shopify's built-in contact form sends enquiries to your store email. The MyFormConnect form sends them to your MyFormConnect inbox and alerts instead, with spam filtering and your full enquiry history in one place.
Common problems
- No "Custom Liquid" option: your theme may be older. Look for "Custom content" with an HTML option, or reply to a course email and we'll help.
- The form doesn't send: check your domain in MyFormConnect under Settings → Domains matches your live store address (your own domain, not the .myshopify.com one, unless that's what customers use).
Done when: a test enquiry from your live store 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">