How to Embed a Landing Page on Your Website

Why This Matters

Embedding landing page forms directly on your existing website keeps visitors on your domain while still capturing their information in your CRM. Instead of redirecting visitors to a separate hosted page, the form appears seamlessly within your site's design, maintaining brand consistency and reducing friction.

IFrame embedding works well for contact forms on "Get Started" pages, newsletter signups in sidebars, or lead magnets within blog posts—anywhere you want to capture information without sending visitors away from your site.

This guide shows you how to embed your landing page form on your website using IFrame code.

Before You Begin

You'll need a website where you can add custom HTML code. This works with WordPress, Wix, Squarespace, custom-coded sites, or any platform that allows HTML editing.

Create and configure your landing page completely before embedding it—the form fields, Actions, Thank You page, and all settings should be finalized since the embedded version uses the same configuration.

Know that IFrame embedding won't work in all hosting environments due to security restrictions. If you encounter issues, contact your website provider for support.

Have basic HTML knowledge or access to someone who does, as you'll need to paste code into your website and potentially adjust height/width settings.

Step-by-Step Instructions

1. Create and Configure Your Landing Page

First, build your complete landing page following the standard process:

  • Select a template and customize content using the Content Designer
  • Configure form fields to collect the information you need
  • Set up Actions (automation triggers, categories, tags, workflows)
  • Design your Thank You page
  • Test the standalone page to ensure everything works correctly

The embedded version pulls from this complete landing page configuration, so any changes you make to the original page will reflect in the embedded version automatically.

You don't need to create a separate page for embedding—one page works for both standalone and embedded use.

Time: See "How to Create a Landing Page" guide


2. Access the IFrame Embed Code

Go to Automation > Landing Pages to view your list of landing pages.

Find the landing page you want to embed. Look at the right side of that row for action icons.

Click the Links dropdown button (typically shows a downward arrow or link/chain icon).

A menu appears with three options:

  • Full Link
  • QR Code
  • IFrame Embed Code

Select IFrame Embed Code from the dropdown menu.

A dialog box or panel opens displaying HTML code that looks similar to:

html
<iframe src="https://yourdomain.com/page/..." width="100%" height="800px" frameborder="0"></iframe>

This is your embed code containing the URL to your form and default sizing parameters.

Time: 1 minute


3. Copy the Embed Code

Click inside the code box to select all the text, or look for a Copy button if one appears next to the code.

Copy the entire code snippet—make sure you get every character including the opening <iframe> tag and closing </iframe> tag. Missing even one character will break the embed.

Don't modify the code yet—you'll adjust sizing after pasting if needed.

Tip: Paste the code into a text editor (like Notepad or TextEdit) as a backup before proceeding, in case you need to retrieve it again later.

Time: 30 seconds


4. Access Your Website's HTML Editor

Log into your website's content management system or page builder.

Navigate to the specific page where you want the form to appear.

Find the HTML editing option. This varies by platform:

  • WordPress - Add an HTML block (in Gutenberg editor) or Custom HTML widget (in sidebars). Or switch to Code Editor view in the classic editor.
  • Wix - Add an "Embed Code" or "HTML iframe" element from the Add panel.
  • Squarespace - Add a Code block (available in the block menu).
  • Shopify - Edit your page HTML or add a custom liquid section.
  • Custom sites - Edit your page's HTML directly in your code editor or CMS.

If you're unsure how to access HTML editing on your platform, search for "[your platform name] add custom HTML" in your platform's documentation or support resources.

Position your cursor in the HTML editor exactly where you want the form to display on your page—embedded forms appear wherever you place the code.

Time: 2-3 minutes


5. Paste the Embed Code

In your HTML editor, paste the complete IFrame embed code you copied earlier.

Make sure the code is pasted in a location where HTML is accepted—some page builders have specific HTML/code blocks separate from regular text blocks.

Save or update your page using your platform's save function.

Preview your page (most platforms have a preview option) to see how the embedded form displays.

The form now appears embedded in your website at the location where you pasted the code, showing the same form fields and design from your landing page.

Time: 1 minute


6. Adjust Height and Width (If Needed)

Preview your website page to see how the embedded form displays in context.

Common issues at this stage:

  • Form appears cut off vertically - Need to increase height
  • Form appears cut off horizontally - Need to adjust width (usually should stay at 100%)
  • Too much white space below form - Need to decrease height
  • Form too narrow - Width might be set to fixed pixels instead of percentage

Return to your HTML editor and locate these attributes in the IFrame code:

Width attribute: width="100%"

  • 100% means the form fills the available horizontal space (recommended for responsive design)
  • You can also use fixed pixel values like width="600px" if needed
  • For most use cases, keep this at width="100%"

Height attribute: height="800px"

  • This number controls vertical space in pixels
  • To make the form taller, increase the value (e.g., height="1200px")
  • To make the form shorter, decrease the value (e.g., height="600px")

How to determine the right height:

  1. Preview your page and see how much of the form is cut off
  2. Increase height by 200-300px increments
  3. Save and preview again
  4. Repeat until the entire form displays without being cut off
  5. Add an extra 50-100px buffer at the bottom for comfort

Different landing page designs require different heights:

  • Short forms (3-5 fields): 600-800px
  • Medium forms (6-10 fields): 900-1200px
  • Long landing pages with images and multiple sections: 1500-2500px

Save your changes and preview again. Repeat height adjustments until the form displays correctly with no cutoff and minimal excess white space at the bottom.

Time: 5-10 minutes of adjustment


7. Test the Embedded Form

Visit your live website page where the form is embedded (not the preview—test the actual published page).

Fill out the form completely using real test information:

  • Enter a test name, email, and any other required fields
  • Use a real email address you can access to verify notifications
  • Complete all fields as a real visitor would

Click the submit button.

Verify that:

  • The form submits successfully without errors
  • The Thank You message displays correctly (or redirect happens if configured)
  • A test contact appears in your CRM with all the information you entered
  • Any configured automations trigger properly (check if workflows started, autoresponders assigned, notifications sent, etc.)
  • The form clears or shows appropriate confirmation after submission

Test on multiple devices:

  • Desktop computer (Windows and Mac if possible)
  • Tablet (iPad or Android tablet)
  • Mobile phone (iPhone and Android)

Test on different browsers:

  • Chrome
  • Safari
  • Firefox
  • Edge

Look for any device or browser-specific issues with display, functionality, or submission.

After thorough testing, delete the test contact from your database (or mark them clearly as "TEST" if you want to keep the record for reference).

Time: 10-15 minutes for thorough testing


8. Troubleshoot Common Issues

Issue: Form appears cut off at the bottom

Solution: Increase the height value in the IFrame code by 200-500px and test again. Keep increasing until the entire form is visible.

Issue: Form doesn't submit or shows errors

Solution:

  • Check that you've copied the complete code including all opening and closing tags
  • Verify your website allows IFrame embeds (some security settings block them)
  • Check browser console for JavaScript errors (right-click > Inspect > Console tab)
  • Verify the landing page itself works when accessed directly via its Full Link
  • Contact your web developer if errors persist

Issue: Form displays but looks wrong (broken layout, missing images)

Solution:

  • The embedded form inherits some styling from your website's CSS
  • This is usually minimal, but in rare cases, CSS conflicts occur
  • Try viewing the form in an incognito/private browser window to rule out caching
  • Contact your web developer if design issues persist—they may need to add CSS overrides

Issue: Form works on desktop but not mobile

Solution:

  • Check the width setting—ensure it's set to width="100%" for responsive behavior
  • Test the landing page standalone on mobile to verify it's not a page-level issue
  • Some IFrame content doesn't scale properly on mobile—this may require developer assistance

Issue: Browser shows security warnings

Solution:

  • Some browsers block IFrames from external domains for security reasons
  • This is browser-level security, not something you control
  • If this affects many visitors, consider using the Full Link instead of embedding
  • Ensure both your website and landing page use HTTPS (secure protocols)

Issue: Excessive white space below the form

Solution: Decrease the height value in the IFrame code by 100-200px until the white space reduces to a comfortable amount.

Issue: Form cuts off on the sides

Solution: Change width from a fixed pixel value to width="100%" to make the form responsive to container width.

If problems persist after these adjustments, contact your website hosting provider—IFrame support varies by hosting environment and some platforms have restrictions you can't control.

Time: Variable depending on issues

Questions and Answers

Q: Will the embedded form look exactly like my landing page?

A: Yes. The Landing Page as designed will show up in your site. This will include the content elements and the form.


Q: Can I embed multiple forms on the same page?

A: Yes. Paste multiple IFrame codes in different locations on your page. Each form can be from a different landing page if needed. Just make sure to adjust each IFrame's height appropriately for the form it contains.


Q: Will changes to my landing page automatically update in the embedded version?

A: Yes. The IFrame pulls from your live landing page, so any edits you make to form fields, Actions, Thank You pages, or design reflect immediately in all embedded instances without needing to update the embed code. The only time you'd need to replace the code is if you delete the original page and create a new one.


Q: Can I customize the embedded form's appearance to match my website better?

A: Limited customization is possible through the landing page editor itself—design your landing page to match your website's look before embedding. However, you can't apply your website's CSS directly to the embedded form due to IFrame security restrictions that prevent cross-domain styling. The best approach is making your landing page match your website during the design phase.


Q: Does embedding affect my landing page analytics?

A: No. Submissions from embedded forms count in your landing page analytics just like submissions from the standalone page. Page Views will reflect both embedded form views and standalone page views combined—the system tracks all access points.


Q: What if my website builder doesn't allow IFrame embeds?

A: Some website builders restrict IFrames for security or simplicity reasons. If embedding doesn't work, alternatives include:

  • Use a popup form instead (configure in the Popup Form tab of your landing page)
  • Use the Full Link and create a button that sends visitors to your hosted landing page
  • Check if your website builder offers a forms integration or native connection to your CRM
  • Upgrade to a website plan that allows custom code (many "basic" plans restrict HTML/IFrames)

Q: Can I embed a landing page on a site I don't control (like Medium, LinkedIn, or social media)?

A: This depends entirely on the platform. Most social platforms and publishing sites don't allow IFrame embeds for security reasons. In these cases, use the Full Link to direct people to your hosted landing page. The link works everywhere, while IFrames only work where the platform allows them.


Q: Will the embedded form work if my website is on a different domain than my CRM?

A: Yes. IFrames are specifically designed to work across different domains—that's their primary purpose. Your website on yourbusiness.com can embed a form hosted on yourcrm.com without issues. However, some browsers may display minor security warnings if the domains don't match, which is normal browser behavior protecting users.


Q: Can I password-protect the embedded form?

A: The embedded form inherits settings from your landing page. If your website page is password-protected, visitors need the password to access the page containing the form, which indirectly protects the form. However, the landing page itself doesn't have password protection, so the standalone URL remains publicly accessible to anyone with the link.


Q: How do I remove the embedded form later?

A: Simply delete the IFrame code from your website's HTML. Removing the embed only removes the form from your website—the landing page itself remains active and accessible via its Full Link unless you separately delete or set it to Offline.


Q: Does embedding slow down my website?

A: IFrames load content from external servers, which adds minimal load time (typically under 1 second). The impact is negligible and shouldn't noticeably affect website performance for visitors with reasonable internet connections. Modern browsers handle IFrames efficiently.


Q: Can I track which submissions came from the embedded form vs. the standalone page?

A: Not automatically through built-in analytics. However, you can create two separate landing pages—one specifically for embedding and one for direct links—then compare their analytics. Or use the Actions tab to assign different tags to each version before embedding/sharing.


Q: What if I want to embed the form in a popup or modal on my website?

A: You can paste the IFrame code into your website's popup/modal HTML if your website allows that. However, check out the Popup Form tab in your landing page editor—it's specifically designed for popup overlays and might be easier than manually embedding in a custom popup.

Guide Type: How-To Guide

Estimated Time: 30 minutes