TUTORIAL
How to Embed a Form on Your Website: In the Page, Pop-up or Full Page
There are four ways to put a form on a website: inside the page, behind a pop-up button, as a pop-up that opens by itself, or as its own full page. Each needs a different snippet and each site builder hides its code box in a different place. Here is which to use and where to paste it.
Connery Davoodian · Founder, Fynl ·
Build a form to embedDownload the website embed cheat sheet (PDF)
Pick the embed by where the visitor is
The Share tab in the builder offers four ways to put one form on a website, and each matches a different moment in a visitor's decision.
- In the page draws the form inside your page, like a block of content. Use it on a contact or quote page, where filling the form in is the reason the visitor came.
- Pop-up button adds a button; the form opens over the page when it is pressed. Use it where people are already deciding: a "Get a quote" button beside your prices, a "Register" button on an event page.
- Timed pop-up opens the form by itself after the number of seconds you set, either in the middle of the screen or sliding in from the corner. Use it sparingly, for an offer that suits people who are reading rather than buying, such as a free guide on a long article.
- Full page gives the form a page of its own. Use it for long or multi-page forms, for links in emails and messages, and behind a QR code.
Whichever you pick, the answers land in the same place: the form's Results tab.
Step by step: from the Share tab to a live page
The video shows the Share tab in about a minute. In writing:
1. Open the Share tab
Build the form in the free form builder and publish it. The emailed link opens your new account on the form's Share tab. At the top is the form's own link with a Copy button, and its QR code with Download QR code.
2. Choose the embed type
Under "Put it on your website", choose In the page, Pop-up button, Timed pop-up or Full page. For the timed pop-up, set "Open after" in seconds and tick "Slide in from the corner" if you prefer a smaller window that does not cover the page.
3. Copy the code
Press Copy beside the code box. In the page uses an iframe, the standard HTML element for showing one page inside another (MDN's iframe reference explains how it works). The two pop-ups use a short script tag. If the Share tab warns about unsaved changes or a closed form, deal with that first.
4. Paste it into your site builder
See the next section for where each site builder keeps its code box.
5. Publish and test on a phone
Open the live page on a phone, fill the form in, and send it. Then check the answer arrived in Results. This one test catches the two common problems: an embed box too short for the form, and a site builder that quietly removed the code when you saved.
Where to paste the code in five site builders
WordPress. Add a Custom HTML block (typing /html in an empty paragraph inserts one), paste the code and update the page. WordPress's own Custom HTML documentation warns that users without the unfiltered_html capability, such as Contributors, have tags like script and iframe stripped on save. If the form vanishes after saving, that is usually why; ask an administrator to paste it.
Squarespace. Edit the page, add a block and choose Code, then paste. Squarespace's code block guide says that JavaScript or an iframe in a code block needs the Core, Plus or Advanced plan. On a plan without it, use the full-page link on a button instead.
Wix. In the Wix Editor, choose Add Elements, Embed Code, then Embed HTML, and paste the code under "Add your code here". Wix's embedding guide notes that these elements are iframes and are not responsive, so drag the box tall enough for the form on the mobile view as well as desktop.
Shopify. Shopify's help on extending a theme explains that some themes offer settings for adding your own HTML; in many themes this is a Custom Liquid section in the theme editor. Duplicate the theme first, add the section where the form belongs, paste, and preview.
Webflow. Drag a Code Embed element onto the page and paste the code, then publish and test on the live site rather than in the editor.
On any other platform, look for a block called HTML, Code, Embed or Custom code. If there is none, put the form's full-page link on a button; it works everywhere.
Two extras on the same tab: QR codes and filled-in links
The QR code opens the full-page form. Download it for a counter sign, a flyer or the back of a receipt, and print it large enough to scan from where people will stand.
Below the embed codes is "Link that fills in answers". Type answers into the boxes and the tab builds a link with those answers already filled in, such as the name or the number of hours. This is useful when you send a form to someone you already know. There is also an option to fill in a contact's details automatically when the link goes out from an email or automation in the portal, which needs a paid plan with email connected.
If you are still choosing a form tool, our comparison of free form builders includes embedding in its test, and the conditional logic guide covers making the embedded form shorter for each visitor.
Questions people also ask
How do I embed a form on my website?
Copy the form's embed code from its Share tab, add an HTML or code block to your page in your site builder, paste the code and publish. Then test it on a phone by sending one real answer.
Why did my embedded form disappear in WordPress?
WordPress strips script and iframe tags from users without the unfiltered_html capability, such as Contributors. An administrator needs to paste the code.
Can I embed a form on Squarespace?
Yes, with a code block. Squarespace's guide says JavaScript or iframes in code blocks need the Core, Plus or Advanced plan; on other plans link to the full-page form from a button.
Should I use a pop-up form?
Use a pop-up button where people are already deciding, and a timed pop-up only for low-pressure offers such as a guide download. Avoid timed pop-ups on pricing, booking and checkout pages.
Sources
More on free form builder guides
Lead Management for a Small Business: From Form Answer to Won Job
Lead management is what happens between someone filling in your form and you winning or losing the job. For a
FREE FORM BUILDER GUIDESMulti-Page Forms That Save Progress: How "Save and Continue Later" Really Works
Long forms lose people halfway. Two features stop that: saving each page as the person goes, and an emailed li
FREE FORM BUILDER GUIDESOnline Waiver Form With a Signature: Build It Free and Keep a PDF of Every Signed Copy
An online waiver replaces the clipboard: people read the release, tick that they agree, draw their signature o
Get the embed code in a few minutes
Build the form free, publish it with your email, and the Share tab has all four embed codes.
Open the free form builderMore form guides