Skip to main content

How to Embed FormMaker into Your Shopify Store Without an iFrame

This guide walks you through embedding FormMaker directly into your Shopify store using JavaScript and CSS, providing a smooth integration for lead capture.

1. Log in to Your Shopify Admin Dashboard​

Go to https://your-store-name.myshopify.com/admin and log in to access your Shopify admin dashboard.

2. Create or Edit a Page​

  • From the left menu, navigate to Online Store > Pages.
  • Click Add page to create a new page, or select an existing page to edit.

3. Add a Title for the Page​

In the Title field, enter a name such as "Exclusive Lead Magnet" or "Subscribe Now".

4. Add the FormMaker Script and CSS​

In the Content section, switch to the Show HTML view by clicking the <> button in the rich text editor. Paste the following code:

<script type="module" src="https://formmaker.co.in/embed/formaker.js"></script>

<div
    id="root"
    data-formid="667bdfcff60cbf6af104639a"
></div>

<link rel="stylesheet" href="https://formmaker.co.in/embed/formaker.css">

Important: Replace 667bdfcff60cbf6af104639a with your unique FormMaker data-formid.

5. Save Your Page​

Click Save at the top right to save your changes.

6. (Optional) Add the Page to Your Store’s Navigation​

To link this page from your store’s main navigation:

  • Go to Online Store > Navigation.
  • Select the menu where you want to add the page (e.g., Main menu).
  • Click Add menu item.
  • Enter a Name (e.g., "Subscribe" or "Exclusive Offers").
  • In the Link field, select Pages and choose the page you created.
  • Click Add and then Save Menu.

7. Preview Your Form​

Return to Online Store > Pages, find the page, and click View to preview it on your store.

Your FormMaker form should now render directly on the page, using JavaScript and CSS for a seamless, non-iframe integration.

Note: If the form doesn’t appear as expected, ensure that Shopify allows JavaScript embeds in your theme and that no restrictions are preventing the script or CSS from loading.