This page demonstrates how forms can be embedded using different configurations. Visit /embed?formid=YOUR_FORM_ID
to customize your own embed.
600px height - perfect for desktop viewing
<iframe src="/forms/182fa915-7656-4489-bf51-5145984d4094" width="100%" height="600px" frameborder="0"></iframe>
400px height - ideal for sidebars and smaller spaces
<iframe src="/forms/182fa915-7656-4489-bf51-5145984d4094" width="100%" height="400px" style="border: none; border-radius: 12px;"></iframe>
800px width, centered - perfect for specific layouts
<iframe src="/forms/182fa915-7656-4489-bf51-5145984d4094" width="800px" height="500px" style="border: 2px solid #3b82f6; border-radius: 16px;"></iframe>
TypeScript React component with proper typing
import React from 'react'; export default function EmbeddedForm() { const iframeStyle = { width: '100%', height: '600px', border: '1px solid hsl(var(--border))', borderRadius: '8px', }; return ( <iframe src="/forms/182fa915-7656-4489-bf51-5145984d4094" style={iframeStyle} title="Form" loading="lazy" allow="clipboard-write; camera; microphone" sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox" frameBorder="0" /> ); }
Step-by-step guide to embedding your forms
Go to /embed?formid=YOUR_FORM_ID
or click the embed button in your form dashboard.
Copy the generated code for HTML, React, Next.js, Vue, or WordPress and paste it into your website.
Access embed options directly from your form dashboard using the embed button in the form actions.