Skip to main content

How to Add FormMaker to Your Webflow Website

This guide provides a step-by-step approach to embedding FormMaker into your Webflow site using JavaScript and CSS. This approach eliminates the need for an iframe, resulting in a smoother and more integrated experience for your users.

1. Log in to Your Webflow Account​

  • Go to Webflow and log in to access your dashboard.

2. Open Your Project in the Designer​

  • In your dashboard, select the project you want to work on.
  • Click on Designer to open the Webflow Designer.

3. Choose the Page for Embedding FormMaker​

  • In the Pages panel on the left, select the page where you want to add the FormMaker form.

4. Add an Embed Element to the Page​

  • In the left toolbar, click on the Add Elements button (the + icon).
  • Scroll to Components and drag an Embed element to the desired location on your page.

5. Insert the FormMaker JavaScript and CSS​

In the Embed Code Editor that appears, 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 to ensure it loads your specific form.

  • Click Save & Close to embed the code.

6. Adjust the Embed Element’s Styling (Optional)​

  • If needed, adjust the height and width of the Embed element to ensure the form displays well on your page.
  • You can do this in the Style panel on the right, by setting dimensions, padding, or alignment for optimal display.

7. Publish Your Site​

  • Click on the Publish button in the upper-right corner.
  • Choose Publish to Selected Domains to make the changes live.

8. Test Your Embedded Form​

  • Visit your live site to verify that the form is displayed correctly.
  • Interact with the form to confirm that it’s fully functional.

Note: If the form does not appear as expected, check your Webflow project settings to ensure JavaScript is enabled and verify that there are no restrictions preventing the script or stylesheet from loading.