How-to

Embed a form

Any form you build in Forms can run on your own site. Build and publish it first (see the Forms guide), then copy a snippet from the form’s Share tab.

The snippets only work once the form is published. Until then the Share tab says “Publish from the header to enable these links and snippets.”

Pick a distribution mode

On the Share tab, Distribute offers three modes:

Mode	What you get	Use it when
Standalone hosted page	A Hosted link like `https://app.10ex.ai/f/EMBED_KEY`, plus an Embed (iframe) snippet	You want a link to share, or your site only allows iframes
Inline embed (in your site)	An Inline script	The form should sit inside a page, styled by the form’s own theme
Popup / modal	A Popup script plus Popup triggers	The form should open over the page

Inline script

Paste it where the form should appear:


<script async src="https://app.10ex.ai/embed/forms.js"
        data-form="EMBED_KEY" data-api="https://api.10ex.ai" data-mode="inline"></script>

The form renders right after the script tag. To place it somewhere else, add an empty container with the same key anywhere on the page and the form mounts there instead:


<div data-tnx-form="EMBED_KEY"></div>

The form is styled from its own theme (colors, font, button style, width) and isolated from your page’s CSS, so neither side changes the other.

Same tag with data-mode="popup". When the popup opens depends on its Popup triggers on the Share tab:

Trigger	Opens the popup
Button click	Adds a floating button that opens the form
After time on page	After the number of milliseconds you enter (5000 = 5 seconds)
After scroll depth	When the visitor scrolls past the percentage you enter (default 50)
On exit intent	When the mouse leaves the top of the window (desktop only)

With no triggers, the popup gets the floating button. The popup opens at most once per page view. Click Save after editing triggers.

Iframe

The Embed (iframe) snippet loads the hosted page. Set its height in the field next to the snippet (default 640 px); the width follows the form’s theme.


<iframe src="https://app.10ex.ai/f/EMBED_KEY" width="100%" height="640"
        style="border:0;max-width:592px" title="Form"></iframe>

Tag submissions with where they came from

If the form has an auto-selected field, the inline and popup snippets include a data-value attribute. Whatever you put there is saved with each submission and shown to the visitor read-only. Use it to tell placements apart, for example one snippet per event session or per landing page:


<script async src="https://app.10ex.ai/embed/forms.js"
        data-form="EMBED_KEY" data-api="https://api.10ex.ai" data-mode="inline"
        data-value="Webinar: October launch"></script>

Every submission also records the referring page and any UTM parameters in the page URL. To capture the page URL itself, add a hidden field set to the current page URL in the form builder.

Embed settings

Open Settings from the Publish menu in the form’s header:

Allowed domains: comma-separated hosts, for example example.com, www.example.com. Blank allows every site. The match is exact, so list www. and other subdomains separately.
Max submissions: blank means unlimited. Once the limit is reached, new submissions are refused.

When something doesn’t show

The script fails quietly on your page, so check the browser console and the network tab:

What you see	Why
`[10ex forms] data-form (embed key) is required` in the console	The `data-form` attribute is missing
Nothing renders, the request to `/forms/EMBED_KEY` returns 404	The form isn’t published, or it was archived
403 `domain_not_allowed`	The page’s domain isn’t in Allowed domains
429 `rate_limited` on submit	Too many submissions from one visitor in a short time
410 `submission_limit_reached`	Max submissions was reached

Forms guide: build, publish and read submissions
Install the website tracker