After creating and customizing your form, embedding it on your website is quick and straightforward.
Here’s how:
Step 1: Access the embed options
There are two ways to open the embed options for your form:
Option 1. From the dashboard:
In your Formaloo dashboard, find the form you want to embed.
Click on the Embed button next to that form. This will open the Embed panel, where you can see the form’s public link and various embedding options.
Option 2. From the form editor:
Open your form in the Form Editor.
At the top of the editor, click the Share button, then select the Embed section. This will bring up the same Embed panel with your form’s link and embedding options.
From here, you can choose how you want to embed the form into your site and access the code for the embed method you prefer.
Step 2: Choose your embedding method
In the embed panel, choose the method that fits your website experience best:
1. Embedded link (public URL)
Use this when you want the form to open on its own page (for example, from a “Book a demo” button).
Copy the public link
Paste it as a hyperlink on your website
2. iframe embed
Use this when you want the form to appear directly inside a specific section of your page.
Select Iframe from the dropdown
Set the height in pixels, make it generous, because anything shorter than your form creates a scrollbar inside the embed
Adjust the options below
Click Get the code and paste the snippet into your website's HTML or embed block
Options for the iframe embed
Option | What it does |
Embed width | Sets how much of the host container the form occupies. Only applies when fill container width is off. |
Height | Sets a fixed height in pixels. |
Hide form title | Hides the form title and its description, useful when your page already has a heading above the form. |
Hide cover and logo | Hides the cover image and your workspace logo, so the embed shows only the fields. |
Fill container width | Stretches the form to fill its host container. |
Transparent background | Makes the form inherit your page's background colour instead of using its own. |
Skip welcome page | Starts the form on the first question instead of the welcome screen. Useful when your page already introduces the form. ( for one-question-at-a-time forms ) |
3. Script embed
Use this when you want a lightweight embed that updates automatically as you edit the form.
Select Script from the dropdown
Turn on dynamic height so the embed grows with your form
Adjust the other options below
Click Get the code and paste the snippet into your website's HTML or embed block
Options for the script embed
Option | What it does |
Embed width | Sets how much of the host container the form occupies. Only applies when fill container width is off. |
Height | Sets a fixed height in pixels. Only appears when dynamic height is off. |
Dynamic height | Lets the embed grow with the form content, so long forms are never cut off and you never have to guess a pixel height. |
Hide form title | Hides the form title and its description. |
Hide cover and logo | Hides the cover image and your workspace logo. |
Fill container width | Stretches the form to fill its host container. On by default. |
Transparent background | Makes the form inherit your page's background colour instead of using its own. |
Skip welcome page | Starts the form on the first question instead of the welcome screen. Useful when your page already introduces the form. ( for one-question-at-a-time forms ) |
💡 On left and right layouts this hides the logo but keeps the image. Removing the image would collapse the layout into a top or center layout, and the embedded form is meant to match how your form actually looks. To hide the image too, either remove the cover image from the form, or switch to a top or center layout.
4. Chatbot embed
Use this when you want a floating, chat-style widget (great for lead capture and quick questions).
Click the Chatbot tab
Click Get code
Paste the snippet into your website (many sites place it in a global footer so it loads across pages)
Step 3: Copy and paste the code into your website
Select your preferred method, copy the code, and paste it into your website’s HTML where you want the form to appear.
💡 Tip: After embedding your form, it’s a good idea to test it on your actual website to make sure it displays correctly and the sizing fits your layout.
Open your page in a web browser (on both desktop and mobile, if applicable) and check that the form is fully visible and looks good. If the form is cut off or has scroll bars, you may need to go back and adjust the width or height values in your embed code for a better fit.