You've built a form that looks great and asks the right questions — now it needs to actually live on your website. Whether you're dropping a lead capture form on a landing page, adding a contact form to your services page, or embedding a survey on your blog, the process should take minutes, not days.
Yet many teams get stuck here. Code that breaks the page layout. Forms that don't load on mobile. Embeds that look nothing like the original design. Sound familiar?
This guide walks you through exactly how to embed forms on any website: from grabbing the right embed code to making sure your form converts once it's live. We'll cover standard HTML sites, WordPress, Webflow, Squarespace, and Wix, plus the quick fixes for the most common embedding issues teams run into.
By the end, you'll have a fully embedded, conversion-ready form without needing to call a developer. Let's get into it.
Step 1: Choose the Right Embed Method for Your Website
Before you copy a single line of code, you need to know which embed method your platform actually supports. Using the wrong one is the number one reason embeds fail or look broken, and it's completely avoidable.
There are three main methods for embedding forms on any website, and each has a distinct use case.
iframe embed: This is the most universally compatible option. An iframe creates a sandboxed environment on your page, meaning the form loads inside its own contained window. Because it doesn't interact with your site's CSS or JavaScript, it works on virtually any platform without requiring custom code knowledge. If you're unsure which method to use, start here.
JavaScript snippet embed: This method offers more flexibility than an iframe. JavaScript embeds can dynamically resize as users fill out the form, fire event tracking (like form start or field focus), and integrate more seamlessly with the surrounding page. The trade-off: your platform must allow custom script injection. Not all do.
Direct HTML embed: This is the cleanest option for developers working on static sites or custom-built applications where you control the full codebase. You paste structured HTML directly into your page template at the exact location you want the form to appear.
Here's a quick platform guide to help you decide:
WordPress: Supports all three methods. Use the Custom HTML block in Gutenberg for iframe or JavaScript embeds, or place code directly in your theme editor for site-wide placement.
Webflow: Use the Embed element from the Add panel. Both iframe and JavaScript embeds work well here.
Squarespace: Supports Code Blocks on Business plan and above. Stick to iframe embeds for reliability, as some JavaScript injection can be inconsistent depending on your template.
Wix: Use the HTML iFrame widget under Insert > Embed. This is specifically designed for iframe embeds and works reliably.
Custom HTML or static site: All three methods work. Use whichever fits your workflow.
One common pitfall worth flagging: teams often copy a JavaScript snippet and paste it into a platform that strips custom scripts, like a basic Squarespace plan or a restricted WordPress environment. The form simply won't appear, and the cause isn't obvious. Always verify your platform's permissions before choosing your method.
Once you know which method fits your setup, you're ready to generate the actual code.
Step 2: Generate Your Form's Embed Code in Orbit AI
With your embed method chosen, head into your Orbit AI dashboard and navigate to the form you want to embed. It needs to be in published state before the embed code will work, so confirm that first.
Open the form and look for the Share or Embed panel. This is where Orbit AI gives you everything you need to configure and copy your embed snippet.
You'll see options for embed type: iframe, JavaScript, or inline. Select the one that matches the method you identified in Step 1.
Before you copy the code, take a moment to configure these key settings:
Width: Choose between a percentage-based width (recommended for responsive layouts) or a fixed pixel value. Percentage-based widths like 100% will allow the form to fill its container naturally, adapting to any screen size. Fixed pixel widths are useful when you need precise control, but can cause overflow issues on smaller viewports if you're not careful.
Height behavior: For lead capture and conversion-focused forms, enable auto-resize. This allows the form to expand dynamically as users interact with it, preventing awkward internal scrollbars that frustrate users and hurt completion rates. Auto-resize works by the embedded form sending a postMessage to the parent page with its current height, which the JavaScript listener then applies to the iframe container.
Background transparency: If your page has a custom background color or gradient, enable transparency so the form blends in rather than appearing as a white box sitting on top of your design.
One optional but highly recommended step: if you're tracking lead sources, set up your UTM parameters or hidden fields inside Orbit AI before generating the code. This way, tracking data flows through automatically with every submission, and you don't need to modify the embed snippet later.
When everything is configured, copy the full embed snippet. Do not modify the code at this stage, even if it looks long or unfamiliar. Partial edits to embed code are a leading cause of broken embedded forms.
Paste the snippet into a plain text editor as a temporary holding spot while you move to the next step. You're ready to place it on your site.
Step 3: Add the Embed Code to Your Website
This is where teams most commonly make mistakes, and almost all of them come down to one thing: pasting the code into a rich text or visual editor instead of an HTML view. Rich text editors will corrupt your embed code by converting characters like quotation marks or angle brackets into HTML entities. Always use the HTML or code view.
Here's exactly how to do it on each major platform:
WordPress (Gutenberg editor): In your page or post editor, click the + button to add a new block and search for "Custom HTML." Paste your embed snippet directly into the Custom HTML block. No plugin is required for basic iframe embeds. If you need the form to appear in a theme-level location like a sidebar, footer, or header, use your theme's widget area or header/footer editor and paste the code there instead.
Webflow: In the Webflow Designer, open the Add panel on the left and drag an Embed element onto your canvas at the location where you want the form. A code editor box will appear. Paste your snippet into it and click Save and Close. Publish the page for the change to go live.
Squarespace: Navigate to the page where you want the form and enter edit mode. Add a new block and select Code from the block options. This requires the Business plan or above. Paste your snippet into the code block editor and save. Preview the page to confirm the form renders correctly.
Wix: In the Wix Editor, click Add in the left panel, then navigate to Embed > HTML iFrame. A widget will appear on your page. Click Enter Code in the widget settings panel and paste your snippet. Resize and reposition the widget on the canvas as needed.
Custom HTML or static site: Open your HTML file in a code editor. Find the exact location in the DOM where you want the form to appear, typically inside a section or div container. Paste the snippet there. Save and deploy your file.
After pasting, use your platform's preview mode to confirm the form renders visually. If you see the form, you're ready to move on to styling. If you see a blank space or an error, jump ahead to Step 6 for troubleshooting guidance. You can also review our deeper guide on how to embed forms on your website for platform-specific walkthroughs.
Step 4: Style and Position the Form for Maximum Conversions
A form that looks out of place on your page creates friction before a user even reads the first question. The goal here is to make the embedded form feel like a native part of your site design, not a widget dropped in from somewhere else.
The most important rule: adjust styling on the wrapping container, not inside the embed code itself. Editing the embed code directly makes it harder to update later and can break the snippet. Instead, wrap your embed in a div and apply CSS to that wrapper.
To center the form and constrain its width, apply this pattern to your wrapping container:
Set max-width to something like 680px (a comfortable reading and form-filling width), and use margin: 0 auto to center it horizontally on the page. This keeps the form from stretching edge-to-edge on large screens while remaining fully responsive on mobile.
For background matching, set the iframe background to transparent (if your form builder supports it, as Orbit AI does) and ensure your page's background color is applied to the container div. This creates a seamless, native feel instead of a white box floating on a colored background.
Placement on the page matters just as much as visual styling. Here's where to position forms depending on your use case:
Landing pages: Place the form above the fold or immediately visible after a short value proposition headline. Visitors arriving on a landing page have high intent and shouldn't have to scroll to find the form. See our guide on embedded forms for landing pages for placement strategies that lift conversions.
Content and services pages: Position the form after a value proposition paragraph or at a natural pause in the content. The reader should feel informed enough to take action before encountering the form.
Blog posts: Inline placement within the content or a sidebar embed works well. Mid-article placement after a particularly useful section tends to capture readers at a moment of high engagement.
Before calling this step done, preview the page on a mobile viewport. The form should fill its container without overflowing horizontally or requiring users to scroll sideways. Avoid placing forms inside columns narrower than 320px, as compressed field widths make forms difficult to complete on mobile and significantly hurt completion rates. Our guide on optimizing forms for mobile covers the key techniques in detail.
When the form looks intentional and on-brand at every screen size, you're ready to verify that it actually works.
Step 5: Test Submission Flow and Data Routing
This step is non-negotiable. Embed environments can behave differently from a form's standalone URL, and the only way to confirm everything works is to submit a real test entry through the embedded form on your live or preview page.
Do not test by opening the form's direct Orbit AI URL. Test it from the embedded location, exactly as a real visitor would experience it.
Here's your testing checklist:
1. Submit a test entry. Fill out every field in the form and submit. Use realistic data, not placeholder text, so you can clearly identify the test submission in your dashboard.
2. Verify the submission in Orbit AI. Go to your Orbit AI dashboard and open the form's responses view. Confirm the test submission appears with all expected field data intact.
3. Check integrations. If you have CRM connections, email notifications, or Slack alerts configured, verify they trigger correctly from the embedded submission. Integration failures after embedding are usually caused by the form being in draft state or an integration connection that was set up but not activated. If you're running into persistent issues, our guide on integrating forms with your CRM walks through the most common configuration mistakes.
4. Test the thank-you experience. After submitting, confirm that your thank-you message displays correctly within the embedded context, or that your redirect URL loads properly without breaking the page layout. A redirect that opens in the iframe rather than the full browser window is a common issue worth catching here.
5. Test UTM parameter capture. If you're using hidden fields to pass URL parameters like source or campaign, navigate to your page with those parameters in the URL (for example, yoursite.com/landing-page?utm_source=google) and submit a test entry. Verify those parameter values appear in the submission data in your dashboard. This is one of the most frequently overlooked steps in lead source tracking setups.
6. Cross-browser testing. Submit from Chrome, Safari, and at least one mobile browser. Safari has stricter iframe and third-party cookie policies than Chrome, making it the most common source of rendering inconsistencies. If the form works in Chrome but not Safari, check for mixed content issues or iframe permission settings.
Once all test submissions appear in your dashboard with correct data and all integrations fire as expected, your embedded form is functionally ready.
Step 6: Troubleshoot the Most Common Embedding Issues
Even with careful setup, embedding issues happen. Here are the most common problems teams encounter and exactly how to fix them.
Form not showing at all: The most likely cause is a platform restriction on the embed type you used. Squarespace free plans block code blocks entirely. Wix requires the dedicated HTML iFrame widget rather than a generic embed. WordPress sites with strict Content Security Policies may block external iframes. First, confirm your platform plan supports the embed method. If it does, check your browser's developer console for blocked content errors, which will point you to the specific cause.
Form appears but is cut off or has a scrollbar: This means the iframe height is fixed and shorter than the form's actual content. The fix is to enable auto-resize in Orbit AI's embed settings and regenerate your embed code. If you need a quick manual fix, increase the height value in the iframe embed code. As a general rule, add more height than you think you need, since form content can expand with validation messages and multi-step transitions.
Form looks broken on mobile: This is almost always caused by a fixed pixel width on the iframe. Wrap the embed in a container div with width: 100% applied, and remove any fixed pixel widths from the iframe element itself. The form should then scale fluidly within its container on any screen size.
Submissions not triggering integrations: Confirm two things: the form is in published state (not draft), and the integration connections in Orbit AI are active and authenticated. Test specifically from the embedded URL, not from Orbit AI's own form preview, since some integration triggers behave differently in preview mode. If issues persist, review common CRM integration failures with forms for targeted fixes.
Page layout shifts after the form loads: This is a height-calculation timing issue. When an iframe loads asynchronously, the page initially renders with a default height, then jumps when the actual form height is calculated. Switching from an iframe embed to the JavaScript embed method gives you better dynamic sizing control and typically eliminates this shift.
HTTPS or mixed content warning: Modern browsers block mixed content by default, meaning a form embedded on an HTTP page will not load if the form itself is served over HTTPS, and vice versa. Your website must be served over HTTPS for embedded forms to load without security warnings. If your site is still on HTTP, contact your hosting provider about enabling an SSL certificate. This is a hard requirement, not an optional upgrade.
Once your form loads reliably, displays correctly at all viewport sizes, and submissions route to the right destinations, you're done. Your form is live and ready to work.
Your Embedded Form Launch Checklist
Embedding a form on your website is a foundational step in any lead generation or data collection workflow, and with the right approach, it genuinely takes under 15 minutes. Before you call it live, run through this quick checklist:
✅ Chosen the right embed method for your platform
✅ Generated and configured the embed code from Orbit AI
✅ Pasted the code in HTML or code view, not a rich text editor
✅ Styled the container for a native, on-brand look at all screen sizes
✅ Tested a real submission and confirmed data appears in your dashboard
✅ Verified integrations fire correctly from the embedded location
✅ Confirmed mobile display and cross-browser rendering
Once your form is live and collecting submissions, the next priority is making sure it converts at its full potential. Explore how to reduce form field friction, improve placement strategy, and use AI-powered lead qualification in Orbit AI to automatically score and route the leads your embedded forms capture.
The form is the front door. What happens after submission should be just as optimized as the form itself.
Transform your lead generation with AI-powered forms that qualify prospects automatically while delivering the modern, conversion-optimized experience your high-growth team needs. Start building free forms today and see how intelligent form design can elevate your conversion strategy.
