Skip to main content
Once you’ve created a form and published it, you have three ways to get it in front of visitors.

​
Option 1 — Hosted page

Every form has a public URL: https://servicebooked.ca/f/<your-form-id>. Share it as a link from anywhere — your Instagram bio, a Google Ads “destination URL”, an email signature, a QR code on a yard sign. Best for: ad campaigns, email links, social media, anywhere you don’t have a website to embed into. Copy the ready-made snippet from Forms → [your form] → Share — it already has your form ID and the matching origin filled in. It looks like this: 
<iframe
  id="sb-form-YOUR-FORM-ID"
  src="https://app.servicebooked.ca/f/YOUR-FORM-ID"
  width="100%"
  height="640"
  frameborder="0"
  style="border: none;"
></iframe>
<script>(function(){var i=document.getElementById("sb-form-YOUR-FORM-ID");if(!i)return;var o="https://app.servicebooked.ca";window.addEventListener("message",function(e){if(e.origin!==o)return;if(e.source!==i.contentWindow)return;var d=e.data;if(d&&d.type==="servicebooked:form-resize"&&typeof d.height==="number"){i.style.height=d.height+"px";}});})();</script>
Paste the whole snippet, including the <script> — that’s what auto-sizes the iframe to the form’s height (the height attribute is just the starting value). Without the script the iframe stays at a fixed height and you get scrollbars or empty space. Dark backgrounds: add ?theme=dark to the src (e.g. …/f/YOUR-FORM-ID?theme=dark) to render the form in dark mode — or set the form’s default theme in the builder. Best for: WordPress, Squarespace, Wix, Webflow, plain HTML — anywhere you can paste HTML.

​
Per-platform iframe install

  • WordPress — paste into a Custom HTML block on any page.
  • Squarespace — Add Block → Code → Paste.
  • Wix — Add → Embed Code → HTML iframe.
  • Webflow — Drag in an Embed element, paste the iframe HTML.
  • Shopify — paste into a page’s HTML source via the rich-text editor’s <> button.

​
Option 3 — Custom render (advanced)

If you want full control over the form’s appearance, we expose the form definition as JSON: 
GET https://app.servicebooked.ca/api/public/forms/YOUR-FORM-ID
Returns the field schema, success message, redirect URL, and styling. You render the fields yourself in your site’s design system, then POST submissions back: 
POST https://app.servicebooked.ca/api/public/forms/YOUR-FORM-ID
Content-Type: application/json

{
  "first_name": "Alex",
  "phone": "...",
  "service_needed": "..."
}
Best for: developers who want pixel-perfect brand consistency and don’t mind doing more work. Most owners stick with the iframe — it gives you 90% of the customization with zero code.

​
Forwarding parameters (UTM tracking)

You can pass URL parameters to the form for analytics. For example: 
https://servicebooked.ca/f/YOUR-FORM-ID?utm_source=google&utm_campaign=summer-promo
The submission’s metadata includes any URL parameters that were on the form’s page when it was submitted. Useful for attributing leads to specific campaigns.

​
Multiple forms on one page

You can embed multiple forms on a single page. Each gets its own iframe. They don’t share state.

​
Mobile

The hosted form page is responsive by default — works on every screen size. The iframe inherits whatever width you give it; on mobile, set width="100%" and the form will fit cleanly.

​
What if my form isn’t loading?

  • 404 page: form isn’t published. Go to Forms → [your form] and toggle the Published switch.
  • Empty iframe: check your iframe’s src URL has the correct form ID. Form IDs look like 8–10 random characters (e.g., f/abc12def).
  • Scrollbars or a cut-off form: you pasted the <iframe> but not the <script> next to it. The script auto-resizes the frame — paste the whole snippet.
  • CSS conflicts: rare with iframes (they’re sandboxed) but if you’re using Option 3 (custom render), your site’s CSS may interfere. Inspect element to debug.

​
Next

auto-reply

The AI replies to every submission within seconds — keeping leads warm.