Buildlyform

Help center

Embed your quote form on your website

Copy the snippet from your Buildlyform dashboard (Forms → your form → Embed on your website). It loads our script and shows your form: on phones visitors tap a button to open it fullscreen; on larger screens the form appears inline in the page.

Before you start

  • You need both parts: the div with data-buildlyform-id and the <script> tag. Paste them together.
  • The data-buildlyform-id value is an opaque public id from your dashboard (not your e-mail address or username)—copy the snippet as generated.
  • Replace nothing inside the snippet except optional attributes (button label, background colour, optional text colour, height) using the values from your dashboard. Embed-only styling does not change your public form theme.
  • Your public form lives on form.buildlyform.com (or your custom form domain). The embed script figures out the correct form URL automatically.

How the embed behaves

  • Phones & narrow screens (under about 768px width): visitors see a button. Tapping it opens your form in a fullscreen layer with a close control—similar to Typeform-style embeds. By default the button matches your form accent colour; optional data-buildlyform-button-color and data-buildlyform-button-text-color on the div override appearance for this embed only.
  • Desktop & wide screens: the form appears inline in the page inside an iframe. The height you set in the dashboard applies here; the iframe can grow with the form content.
  • Optional: add data-buildlyform-widget="true" on the div for a floating button on all screen sizes (see your product docs or support if you use this).

WordPress

  1. Edit the page or post where you want the form.
  2. Add a Custom HTML block (or “HTML” / “Code” in the block inserter). Do not use a shortcode block unless your theme provides one that outputs raw HTML.
  3. Paste the full snippet from Buildlyform and Update / Publish.
  4. If the editor strips the <script> tag, use a plugin that allows scripts in blocks, or add the script via your theme’s footer (enqueue) and keep only the div in the page—ask your developer if needed.

Wix

  1. In the editor, click Add → Embed → Embed HTML (or “HTML iframe / Custom embed”).
  2. Paste the entire Buildlyform snippet into the HTML box and apply.
  3. Stretch the embed box if needed so the desktop iframe has enough width; height is controlled by the embed.

Squarespace

  1. Edit the page and add a Code block (or “Embed” block that accepts HTML).
  2. Set the block to HTML mode and paste the snippet.
  3. Save—the script must run in the page, not only as visible text.

Webflow

  1. Add an Embed element from the components panel.
  2. Paste the full snippet (div + script) into the embed code dialog.
  3. Publish the site. Test on a published URL; the designer preview may behave slightly differently.

Shopify

  1. For a dedicated page: Online Store → Pages → add page → use the HTML / code view if your theme supports it, or add a “Custom liquid” section that outputs the snippet.
  2. For the homepage or a section: edit the theme, add a Custom Liquid block (Online Store 2.0) and paste the snippet inside (you may need to wrap in a container div).
  3. Shopify may restrict scripts in some contexts—if the form does not load, contact Shopify support or a developer to allow the embed script domain.

Any site (static HTML or other CMS)

  1. Open your page template or HTML file.
  2. Paste the snippet where you want the form to appear—usually inside <main> or a content column.
  3. The <script> can go right after the div or before </body>; both work as long as the script loads once per page.
  4. Only include the script once if you have multiple forms on the same page (one script, multiple divs with different IDs).

Embed script URL

Production snippets load the script from the same host as your public forms, e.g. https://form.buildlyform.com/embed.js. Your dashboard may show a different URL when testing locally—that keeps the preview working on localhost.