03 — Embedding · iFrame

Bulletproof style isolation.

When you can't trust the surrounding page — heavy CSS resets, hostile CMS themes, or iframes inside iframes — embed FormPing as an iframe pointing at the hosted form page.

The snippet

<iframe src="https://formping.ch/f/YOUR_TOKEN_HERE?embed=true&lang=en"
  width="100%" height="600"
  frameborder="0"
  style="border:none;border-radius:8px"></iframe>

The ?embed=true query parameter strips the hosted page's header and footer, leaving just the form on a transparent background. Add &lang= to set the language directly in the URL.

Sizing

Set height manually to whatever fits your form. The form itself is responsive inside the iframe, so any width will work — start with 100%.

If your form is multi-page and changes height between steps, give the iframe height: 100vh on mobile or use a generous fixed height (700–900px) on desktop.

Setting the language

Append &lang=de (or en, fr, es, it, pt) to the iframe URL. Language priority: URL ?lang= → token's default language → English fallback.

When to use

Your site has a CSS framework that aggressively resets everything.
You're embedding inside Notion, Webflow CMS, Squarespace, or another walled-garden builder.
You need a simple drop-in for non-technical editors who can paste an iframe.

When not to use

You want a totally seamless visual integration — use Script Tag with custom CSS instead.
You need the form to react to events on the parent page — iframes are sandboxed.