Embedding Forms

Every form comes with a version built to live inside your own website: no Dailybread menus, no sign-in, just the form. Put it on your site and customers can send you everything you need without ever leaving your page.

Add a form to your website

Open the form and click Embed

You will see a small window with three tabs: Script, Self-contained and URL.

Pick the tab that suits your website

Use the table below to choose. When in doubt, start with Script.

Copy, paste, and save

Copy what the tab shows you, paste it into your website wherever the form should appear, save, and refresh the page.

Tab	Pick it when	What happens
Script	Your website lets you paste code (most do)	The form appears and sizes itself automatically
Self-contained	Your website refused the Script version	The same result, just packaged a little differently
URL	Your website only accepts a web address	The form appears at a height you choose

Start with Script. If your website will not accept it, try Self-contained. Use URL only when there is nowhere to paste code at all.

Copy from the Embed window, not from this page. The window already has your form’s number filled in, so what you copy there is ready to paste.

What each option gives you

Script is the easy one. You paste a couple of lines and the form appears, growing and shrinking to fit its contents, including when the thank-you message replaces the questions after someone submits. Want more than one form on a page? Paste the first line again for each form; the second line only needs to appear once. If your website adds it twice by accident, nothing breaks. Self-contained gives the same result, but the code that keeps the form the right size is included in what you paste, rather than loaded from Dailybread. Some website builders insist on this. Paste the whole block as one piece. If you want two forms on one page, paste the whole block once per form. URL is a plain web address. It works everywhere a website builder can embed a link, but nothing on your page knows how tall the form is, so you set the height yourself. Choose something generous, then check the form on a phone as well as a computer: narrow screens make the form taller. If the height is too short the form gets its own scrollbar inside the box rather than being cut off.

Show the Script snippet

Your own snippet carries your form’s number in place of 42. The first line marks the spot on the page. The second line loads a small script that fills that spot with the form and keeps the frame exactly as tall as the form is.

<div data-dailybread-form="42"></div>
<script src="https://trydailybread.com/embed/form.js" async></script>

One script serves every form on the page, so several placeholders can share a single script line. Loading the script more than once is harmless: the extra copy looks for new placeholders instead of adding a second form. The script’s address is permanent, so a page you set up today keeps working.

Show the Self-contained snippet

This loads nothing from Dailybread but the form itself. The frame and the few lines that resize it are both right there in what you paste:

<iframe src="https://trydailybread.com/form/42/embed" title="Dailybread form" style="width:100%;border:0;min-height:150px" scrolling="no"></iframe>
<script>
(function () {
  var s = document.currentScript;
  var f = s && s.previousElementSibling;
  if (!f) { return; }
  window.addEventListener("message", function (e) {
    var trusted = e.source && e.origin === "https://trydailybread.com" && e.source === f.contentWindow;
    if (!trusted) { return; }
    var d = e.data;
    if (!d) { return; }
    if (d.type === "dailybread:resize") {
      if (typeof d.height !== "number") { return; }
      f.style.height = d.height + 'px';
      return;
    }
    if (d.type === "dailybread:scroll") {
      var reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
      f.scrollIntoView({ block: "nearest", behavior: reduced ? "auto" : "smooth" });
    }
  });
})();
</script>

Keep the two halves together. The script looks for the frame immediately before it, so splitting them up or reordering them stops the resizing.

Show the URL, and a fixed-height version you can paste as code

The URL tab hands you the form’s address:

https://trydailybread.com/form/42/embed

If your website accepts code but blocks scripts, this frame does the same job as the URL tab. Change the height until the whole form fits:

<iframe src="https://trydailybread.com/form/42/embed" title="Dailybread form" style="width:100%;border:0;height:900px"></iframe>

Where to paste on your platform

Wix
Squarespace
WordPress
Other websites

Add an Embed HTML element and paste the Script snippet into it.Wix places your code inside a box that Wix controls, and nothing inside that box can make it grow. So treat the form as a fixed-height embed: drag the element to a comfortable height in the editor, preview the page, and add more height if the last field looks squeezed. Leave extra room for the thank-you message that appears after someone submits. This is a perfectly good way to run a form, not a broken one.

Whatever the platform, the form fills the full width of whatever it sits in. If it looks cramped, widen the column or section holding it rather than the form itself.

When something looks wrong

The form does not change size. Your website is either blocking the code that resizes it, or you used the URL option, which never resizes. Try the Self-contained snippet. If that is blocked too, set a generous height yourself and move on. The form is cut off at the bottom. The height you set is shorter than the form. Raise it, or switch to the Script snippet so the height takes care of itself. Remember that phones stack the fields and need more room than a computer does. The form is too narrow. The form takes the full width of whatever contains it, so a narrow form means a narrow container. Widen the column, section, or block it is sitting in. The form shows up as a blank space. Your website is probably not on your list of allowed sites. See Choosing which sites may embed your forms below.

Choosing which sites may embed your forms

By default, a form will happily load in anybody’s page, which is convenient right up until it isn’t. To limit embedding to sites you actually run, go to Settings → Company → General and find the Form embedding section. The list is company-wide: it applies to every form you publish, so you only maintain it in one place.

While the list is empty, your forms can be embedded on any site. The moment you save your first entry, every site that is not on the list is blocked. Add all of your sites before you save.

What an entry looks like

An entry is your website’s address, with nothing before or after it:

Entry	Matches
`www.example.com`	that address, and nothing else
`example.com:8443`	that address on that port number
`*.example.com`	any address ending in `example.com`, such as `shop.example.com`

Pasting a full address such as https://www.example.com/ is fine. The extra parts are trimmed off for you when you save. Anything that still has a page path or a stray space in it is rejected, with a message saying which entry needs another look. Addresses have to match exactly, and www.example.com and example.com count as two different sites as far as a browser is concerned. If your site answers to both, list both. The same goes for a test copy of your site on its own address.

Your own preview of a form inside Dailybread keeps working no matter what the list says, so you can check your work without listing Dailybread itself.

What the allowed-sites list does and does not protect

The list stops other websites from showing your form to their visitors. It is not a lock on the form itself: the form’s address is still public, and your data is protected by your permissions and the form’s own checks, not by this list. If you forget your own site, you will know straight away. The form shows up as a blank space on the page, and the fix is always the same one edit in Settings → Company → General.

How the list is enforced (technical)

The allowlist is enforced by the visitor’s browser, through a standard called Content-Security-Policy. When a listed site frames your form, the browser loads it; when an unlisted site tries, the browser refuses. This stops a real person on a real browser from seeing your form re-hosted somewhere it shouldn’t be.Anything that ignores the policy, such as an unusual browser, a script, or a scraper, is not stopped by it. Treat the list as a way to keep your forms on your sites, not as a substitute for the permissions and validation that guard your data.When a site is blocked, the browser’s developer console reports the blocked frame and the policy that blocked it.

For developers

You do not need anything in this section if you pasted one of the snippets above. It is for developers wiring the form into a page by hand.

The message contract

The embedded form talks to the page around it with postMessage. There are two messages, both posted to the parent window:dailybread:resize is the form’s current height, sent once the embedded page loads and again every time its content reflows.

Key	Value
`type`	`'dailybread:resize'`
`height`	The document height in CSS pixels, always a positive number
`formID`	The form’s numeric id, or `null`
`version`	`1`

dailybread:scroll is sent when the form is replaced in place by its outcome state, so a confirmation or an error that landed below the fold can be brought into view.

Key	Value
`type`	`'dailybread:scroll'`
`formID`	The form’s numeric id
`version`	`1`

A few properties worth building against:

Heights go down as well as up. The reported number is the height the browser actually laid out, so it shrinks when content collapses. Assign it directly rather than keeping the largest value you have seen, or the frame ratchets to its tallest state and never comes back.
Messages are posted with a target origin of *, so your listener owns the validation. Accept a message only when event.origin is the Dailybread origin and event.source is the frame’s own contentWindow.
The event.source check is also how you attribute a message when a page carries several embeds: match it against each frame’s contentWindow and resize the one that matches. formID is informational; do not route on it.
Ignore any type you do not recognize. version is 1 today and exists so the contract can gain messages without breaking listeners already in the wild.

The minimal working listener is the inline script in the Self-contained snippet under What each option gives you. It validates the origin and the source, applies the height, and honors the scroll request in a couple of dozen lines.

Get Started

Recipes

Inventory

Orders

Forms

Users & Permissions

Add a form to your website

What each option gives you

Where to paste on your platform

When something looks wrong

Choosing which sites may embed your forms

What an entry looks like

What the allowed-sites list does and does not protect

For developers

​Add a form to your website

​What each option gives you

​Where to paste on your platform

​When something looks wrong

​Choosing which sites may embed your forms

​What an entry looks like

​What the allowed-sites list does and does not protect

​For developers

Add a form to your website

What each option gives you

Where to paste on your platform

When something looks wrong

Choosing which sites may embed your forms

What an entry looks like

What the allowed-sites list does and does not protect

For developers