Skip to main content

How to Add FormMaker to Your Custom HTML Website

This guide will walk you through the steps to add FormMaker to your custom HTML website.

1. Access Your HTML File​

Open the HTML file where you’d like to embed the FormMaker form. You can do this in any text editor or code editor.

2. Insert FormMaker JavaScript and CSS​

In the <head> section of your HTML file, include the FormMaker script and stylesheet by adding the following code:

<script type="module" src="https://formmaker.co.in/embed/formaker.js"></script>
<link rel="stylesheet" href="https://formmaker.co.in/embed/formaker.css">

This will load the necessary JavaScript and CSS files required for FormMaker to function and display correctly.

3. Add the Form Container​

In the body of your HTML file, add a <div> container where you want the FormMaker form to appear. Use the following code:

<div
    id="root"
    data-formid="your-form-id"
></div>

Important: Replace your-form-id with the unique data-formid provided by FormMaker for your specific form. For example:

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

This will embed the form in the specified location on your page.

4. Save and Upload Your File​

After you’ve added the code, save your HTML file. Then, upload the updated file to your website server using an FTP client or through your hosting provider’s file manager.

5. Test the Form​

  • Open your website in a browser to ensure the form displays correctly.
  • Interact with the form to confirm it’s capturing data accurately.

By following these steps, you’ll have FormMaker successfully embedded in your custom HTML website, providing a fully responsive form experience for your visitors.