Embedding Forms

A form can live on its own page, sit inside one of your pages, or pop up from a button — including on sites that are not built with SpiderPublish. There are three ways to put a form in front of people.

The canonical URL

Every form has one canonical address:

https://<your-site>/f/<flow_id>

This is the URL to share in an email, a QR code, or a social bio. It always points at the live form. (Older /book/<id> links for forms automatically redirect here — but always use /f/<id> for forms.)

1. Standalone

Just share the /f/<flow_id> URL. The form renders as a clean, focused full page. Best for links you send out, QR codes, and "fill this in" requests.

2. Inline embed

Drop the form into a content page so it appears in the flow of your text. On a SpiderPublish page you can embed it directly; on any other site you add a container and the loader script:

<div data-spiderflow-flow="<flow_id>" data-spiderflow-mode="inline"></div>
<script src="https://embed.spideriq.ai/v1/loader.js" async></script>

3. Popup

Attach the form to a button so it opens in a modal when clicked — great for a "Get a quote" call to action without leaving the page:

<button data-spiderflow-flow="<flow_id>" data-spiderflow-mode="popup">Get a quote</button>
<script src="https://embed.spideriq.ai/v1/loader.js" async></script>

The form is only loaded when the button is clicked, so it adds nothing to your page's initial load.

Getting the snippet

You do not have to write the embed code by hand. In the dashboard, copy the inline or popup snippet from the form. With an agent, form_get_embed_snippet returns the exact copy-paste HTML for either mode.

On a SpiderPublish page

If the page is on your own SpiderPublish site, you can embed a form natively in a template with the {% form %} tag — no external loader script needed.

Important

  • The form must be active (published) for any of these to render. The standalone URL and embed snippets are available before publishing, but the live form only appears once it is active.

  • Use /f/<flow_id> for forms — never /book/<flow_id>. The /book path is for booking flows.

Next steps

  • Building a Form — create and publish the form you want to embed.

  • Booking — embed a scheduling flow with the {% booking %} tag.

  • Pages — where inline embeds and the {% form %} tag live.