Getting forms onto your website shouldn't require a computer science degree. Yet many business owners and marketers find themselves stuck—staring at embed codes, wrestling with plugins, or watching their carefully designed forms break the moment they hit publish.
This tutorial cuts through the confusion.
Whether you're adding a simple contact form to your homepage or embedding multi-step lead qualification forms across your site, you'll learn exactly how to do it—regardless of your technical skill level or the platform you're using.
By the end of this guide, you'll know how to choose the right embedding method for your situation, implement forms on any major website platform, troubleshoot common display issues, and ensure your embedded forms actually convert visitors into leads.
Let's get your forms live and working.
Step 1: Choose Your Embedding Method Based on Your Website Platform
Before you copy a single line of code, you need to understand the three main approaches to embedding forms—and why your choice matters more than you might think.
Iframe embeds are the universal solution. They work on virtually any platform because they create an isolated container that loads your form from an external source. Think of it like hanging a picture frame on your wall—the frame (your website) holds the content (your form), but they remain separate entities. This isolation prevents conflicts with your site's styling, but it also means less control over appearance.
JavaScript snippets offer deeper integration. Instead of loading your form in a separate container, JavaScript embeds inject the form directly into your page's code. This gives you more styling flexibility and often results in smoother animations and interactions. The tradeoff? Your website needs to allow external scripts to run, and you might encounter conflicts with your existing theme or plugins.
Native platform integrations are the gold standard when available. WordPress plugins, Webflow apps, and Squarespace extensions handle the technical heavy lifting for you. They're designed specifically for your platform, which means fewer compatibility issues and often better performance.
Here's your decision framework: If your platform has a native integration or plugin for your form builder, start there. It's almost always the smoothest path. If you're using WordPress, Squarespace, Webflow, or Shopify, check your form builder's integration directory first.
No native integration available? Choose iframe embeds for reliability or JavaScript snippets for styling control. For most business websites, embedded forms for websites using iframe methods strike the right balance—they work everywhere, they're easy to implement, and they won't break when you update your theme.
Custom HTML sites give you complete freedom. Use whichever method your form builder provides, though JavaScript snippets often deliver the cleanest integration when you have full control over your codebase.
Step 2: Generate and Copy Your Form's Embed Code
Now that you know which embedding method you'll use, it's time to get the actual code from your form builder. This step looks different depending on your tool, but the process follows a similar pattern.
Log into your form builder and locate your published form. Look for options labeled "Share," "Embed," "Publish," or "Integrate." These are typically found in the top navigation bar or in a settings menu. The exact location varies—some tools place it prominently after you finish building your form, while others tuck it away in advanced settings.
Once you've found the embed settings, you'll usually see multiple options: a public link (a standalone URL for your form), an iframe embed code, and possibly a JavaScript snippet. Don't grab the public link—that's for sharing your form as a separate page, not embedding it within your existing site.
Select the iframe or JavaScript embed option. Before you copy the code, look for customization settings. This is where you can adjust dimensions, and it's much easier to do it now than to edit the code manually later.
Set the width to 100% if the option exists. This makes your form responsive, automatically adjusting to fit whatever container you place it in. For height, start with "auto" or the default setting—you can always adjust this later if your form gets cut off or displays with unwanted scrollbars.
Copy the entire code block. It should start with an opening tag—either <iframe for iframe embeds or <script for JavaScript snippets. If you see something that looks like a plain URL or a series of random characters, you've grabbed the wrong thing. Go back and find the actual embed code.
Paste this code into a text editor or note-taking app as a backup. You'll need it in the next step, and having a clean copy saved separately prevents frustration if something goes wrong during the embedding process. For a deeper dive into no-code options, explore how to embed forms on website without coding.
Step 3: Add the Embed Code to Your Website
This is where platform-specific knowledge becomes essential. The embed code you copied is universal, but where and how you paste it depends entirely on your website platform.
WordPress with Gutenberg Editor: Navigate to the page where you want your form to appear. Click the plus icon to add a new block, then search for "Custom HTML" or "HTML." This block accepts raw code. Paste your embed code directly into the HTML block. Preview the page to ensure your form appears correctly before publishing.
WordPress with Classic Editor: Open your page in the editor, then switch from the Visual tab to the Text tab. This reveals the HTML structure of your page. Find the spot where you want your form—usually between existing paragraphs or sections. Paste your embed code there, then switch back to Visual mode to see how it looks. For WordPress-specific guidance, check out how to embed custom forms in WordPress.
Squarespace: Edit the page where you want your form. Click an insert point between sections, then choose "Code" from the block menu. Squarespace will open a settings panel. Make sure you're in the "HTML" section (not CSS or JavaScript), then paste your embed code. Click "Apply" and your form should appear immediately in the editor.
Webflow: Open your page in the Designer. Drag an Embed element from the Add panel onto your canvas, positioning it where you want your form to appear. Double-click the Embed element to open the code editor. Paste your embed code, then click "Save & Close." You'll see a placeholder in the Designer, but your form will render properly when you publish the site.
Shopify: For landing pages, navigate to Online Store, then Pages. Edit the page where you want your form. Click "Show HTML" in the editor toolbar to reveal the code view. Paste your embed code at the appropriate location. For theme integration, you'll need to edit your theme's Liquid files—go to Online Store, then Themes, click "Actions," and select "Edit code." Find the template file for your target page and paste the embed code there.
Static HTML Sites: Open your HTML file in a code editor. Locate the section where you want your form to appear within the <body> tags. Paste your embed code directly into the HTML. Save the file and upload it to your server, or refresh your local preview to see the form in action.
Regardless of platform, save your changes but don't publish yet. You'll want to test everything first.
Step 4: Configure Responsive Settings and Mobile Display
Your form might look perfect on your desktop screen, but that doesn't mean it'll work on mobile devices. This step prevents the frustrating scenario where visitors on phones see a broken, cut-off, or awkwardly sized form.
Start by inspecting how your form appears in your website's preview mode. Most platforms offer a mobile preview option—use it. Better yet, open your browser's developer tools (F12 on most browsers) and toggle the device toolbar to simulate different screen sizes.
If your form appears too wide on mobile, you need to adjust the container width. The simplest fix works in most situations: locate the <iframe tag in your embed code and add this attribute: style="width:100%; border:none;". The complete opening tag should look something like this: <iframe src="..." style="width:100%; border:none;">.
The width:100% setting tells the form to fill whatever container it's placed in, which automatically makes it responsive. The border:none removes the default iframe border that many browsers add, creating a cleaner integration with your page design.
Height presents a different challenge. If your form gets cut off or displays with a scrollbar inside the iframe, you need to increase the height value. Find the height attribute in your iframe tag and adjust the pixel value. For multi-step or longer forms, you might need heights of 800px or more. For simple contact forms, 400-600px typically works well.
Some form builders offer dynamic height adjustment through JavaScript. If your embed code includes a script tag along with the iframe, that script likely handles height adjustments automatically. Don't remove it—it's solving the scrollbar problem for you.
For advanced users comfortable with CSS, you can add a max-width constraint to prevent forms from becoming too wide on large screens: style="width:100%; max-width:600px; border:none;". This keeps your form at a readable width while still allowing it to shrink on smaller devices. Understanding the differences between multi step forms vs single page forms can help you choose the right height settings.
Test across multiple devices if possible. Pull up your site on your phone, tablet, and desktop. Submit a test entry from each device to verify that mobile users can actually interact with all form fields without zooming or horizontal scrolling.
Step 5: Test Form Submissions and Data Flow
Your form looks good and displays properly across devices. Now you need to verify that it actually works—that submissions are captured, integrations fire correctly, and data flows to the right places.
Start with a basic submission test. Fill out your embedded form using obviously fake but identifiable data. Use your own email address, enter "TEST SUBMISSION" in name fields, and choose distinctive values for any dropdown or multiple-choice questions. This makes it easy to spot your test entry later.
Submit the form and pay attention to what happens. Do you see a confirmation message? Does the form clear itself? Are you redirected to a thank-you page? The post-submission behavior should match what you configured in your form builder's settings.
Now verify the data arrived correctly. Log into your form builder's dashboard and check the responses or submissions section. Your test entry should appear there, typically within seconds. If it doesn't show up immediately, wait a minute and refresh—some platforms have a slight delay in displaying new submissions.
Check the data quality. Open your test submission and verify that all fields captured correctly. Sometimes formatting issues or character encoding problems only become apparent when you review the actual submission data. If you entered "TEST SUBMISSION" and it appears as garbled text, you've discovered an encoding issue that needs fixing.
Test your integrations next. If you've connected your form to a CRM, email marketing platform, or other tools, verify that your test submission triggered those connections. Check your CRM for a new contact record, look for the confirmation email in your inbox, or verify that any webhooks fired successfully.
This is where many implementations fail silently. The form works, submissions are captured in the form builder, but the crucial integration that sends data to your sales team never fires. If your lead gen forms not working properly, integration failures are often the culprit. Test this thoroughly before considering your form truly live.
Repeat the submission test on mobile. The desktop experience and mobile experience can differ significantly, especially for forms with file uploads, date pickers, or complex validation. Submit another test entry from your phone to ensure mobile users can complete the entire process without friction.
Step 6: Troubleshoot Common Embedding Issues
Even when you follow every step correctly, forms sometimes misbehave. Here's how to diagnose and fix the most common problems you'll encounter.
Form doesn't display at all: If you see a blank space where your form should be, check your browser's console for errors (F12, then click the Console tab). Look for messages about blocked content or content security policy violations. Some websites block iframes from external sources as a security measure. If you see these errors, you'll need to either whitelist your form builder's domain in your site's security settings or switch to a JavaScript embed method.
Another common culprit is the HTTP versus HTTPS mismatch. If your website uses HTTPS (it should) but your form builder serves the embed over HTTP, browsers will block it. The solution: ensure your form builder supports HTTPS embeds, or upgrade your form builder account if HTTPS is a premium feature.
Form appears but looks broken: CSS conflicts cause this issue. Your website's theme might have styles that interfere with your form's appearance—buttons that don't look clickable, text that's the wrong color, or layouts that collapse unexpectedly. The iframe embedding method prevents most CSS conflicts, which is one reason it's so reliable. If you're using a JavaScript embed and experiencing style issues, switch to an iframe embed to isolate your form from your site's CSS.
Submissions aren't recording: First, verify your form is actually published or live. Many form builders keep forms in draft mode by default, which means they'll display but won't accept submissions. Check your form builder's settings for a "Publish" or "Activate" toggle.
Second, check for JavaScript errors in your browser console. If your form relies on JavaScript for submission handling and there's a script error, submissions will fail silently. Fix any JavaScript conflicts, which often stem from incompatible plugins or theme scripts. If you're dealing with website forms generating spam submissions, you may need to add validation or CAPTCHA protection.
Form loads slowly: Slow-loading forms frustrate visitors and hurt conversion rates. If your form takes several seconds to appear, consider implementing lazy loading. This technique delays loading the form until the visitor scrolls to that section of the page. For iframe embeds, you can add the loading="lazy" attribute to the iframe tag. For JavaScript embeds, look for async or defer options in your form builder's embed settings.
Another performance solution: place your form embed code near the bottom of your page's HTML, just before the closing </body> tag. This ensures your page's main content loads first, making the page feel faster even if the form takes a moment to appear.
Step 7: Optimize Your Embedded Forms for Conversions
Technical implementation is only half the battle. Where you place your form and how you measure its performance determine whether it actually generates leads or just takes up space on your page.
Placement drives performance more than most people realize. Forms positioned above the fold—visible without scrolling—typically generate significantly more submissions than forms buried at the bottom of long pages. This doesn't mean every form belongs at the top, but your highest-priority forms should appear where visitors naturally look first.
Test different positions strategically. Try embedding your form immediately after your main value proposition, in the sidebar alongside relevant content, or as a popup triggered after visitors spend a certain amount of time on your page. Each placement serves a different purpose and attracts visitors at different stages of consideration. Understanding the tradeoffs between embedded forms vs popup forms can help you decide which approach fits your goals.
Connect analytics to understand performance. Most form builders offer built-in analytics showing view counts and submission rates, but you can gain deeper insights by connecting your forms to Google Analytics or your preferred analytics platform. Track not just submissions, but also form abandonment—how many people start filling out your form but don't complete it. High abandonment rates signal friction in your form design.
A/B testing reveals what actually works. Create two versions of the same page with your form embedded in different positions, or test two different forms on similar pages. Compare conversion rates after collecting enough data to draw meaningful conclusions. You might discover that a shorter form in your sidebar outperforms a longer form embedded in your main content, or vice versa.
Speed matters tremendously in follow-up. Set up automated workflows that respond to form submissions instantly. The faster you engage with a new lead, the higher your conversion rate from form fill to actual conversation. Many modern form builders, including AI-powered platforms, can trigger immediate email responses, CRM updates, or even SMS notifications to your sales team.
Consider the mobile experience as a separate optimization opportunity. Mobile visitors often have different intent than desktop users. A form that converts well on desktop might be too long or complex for someone on their phone. Test mobile-specific versions with fewer fields, or use progressive disclosure to show fields one at a time on smaller screens. If your low conversion rates on website forms persist, mobile optimization is often the missing piece.
Putting It All Together
You've now embedded your form, tested it across devices, and set it up for success. Before you move on to your next project, run through this final checklist.
Verify your embed code is pasted in the correct location on your website. Open the page in a private browsing window to see exactly what visitors see—no cached versions, no logged-in states affecting the display.
Confirm your form displays properly on both desktop and mobile devices. Pull it up on your phone right now. Can you see all the fields? Does the submit button appear without scrolling horizontally? Does tapping into a field bring up the appropriate keyboard?
Check that your test submission went through and appeared in your form builder's dashboard. If you haven't done this yet, stop and do it now. A form that looks perfect but doesn't capture submissions is worse than no form at all.
Ensure your integrations and notifications are firing correctly. Did you receive the email notification? Did the contact appear in your CRM? Did your team get alerted about the new submission?
Evaluate whether your form placement is optimized for visibility and conversions. Is it positioned where visitors will naturally encounter it? Does it appear at the right moment in their journey through your content?
The real work begins after embedding. Monitor submissions over the coming weeks. Review analytics data to understand how visitors interact with your form. Refine your approach based on what the data tells you—not what you assume works.
Build automated follow-up sequences that turn form fills into conversations. The businesses that win with forms aren't necessarily the ones with the prettiest designs or the most advanced features. They're the ones that respond fastest and most relevantly to every submission.
Start with one well-placed form. Measure its performance rigorously. Then scale what works and eliminate what doesn't. 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.