Publishing & Embeds
Inline Web Embeds
Embed your InfiForm directly inside your React, Next.js, Webflow, WordPress, or HTML website.
Inline Web Embeds
InfiForm can be seamlessly embedded inside any webpage with automatic height resizing, ensuring no awkward double scrollbars or clipped submit buttons.
Standard Embed Script (embed.js)
Add our ultra-lightweight (under 3KB) embed script to your website:
<!-- InfiForm Inline Embed -->
<div
class="infiform-embed"
data-infiform-id="YOUR_FORM_ID"
style="width: 100%; height: 650px;"
></div>
<script src="https://infiform.com/embed.js" async></script>How embed.js Works
- Listens to internal postMessage events from the form player iframe.
- Dynamically resizes the container height as respondents advance between shorter and longer questions.
- Handles responsive breakpoints smoothly across mobile, tablet, and widescreen viewports.
Direct <iframe> Embed
If your CMS or website environment disallows custom JavaScript scripts, you can use a raw HTML <iframe>:
<iframe
src="https://infiform.com/to/YOUR_FORM_SLUG"
width="100%"
height="650"
frameborder="0"
allow="camera; microphone; autoplay; encrypted-media; fullscreen"
style="border: none; border-radius: 16px; overflow: hidden;"
></iframe>Next.js & React Integration
To embed inside a modern React or Next.js App Router application:
"use client";
import Script from "next/script";
export function ContactFormSection() {
return (
<div className="w-full max-w-3xl mx-auto py-12">
<div
className="infiform-embed rounded-2xl overflow-hidden shadow-xl"
data-infiform-id="clx123456789"
style={{ width: "100%", minHeight: "600px" }}
/>
<Script src="https://infiform.com/embed.js" strategy="lazyOnload" />
</div>
);
}Transparent Background in Embeds
To allow your website's background color or texture to show through your form:
- In the InfiForm builder, set the form's background opacity to
0%(transparent). - The embedded iframe will automatically blend into your page background.