Embedding HubSpot forms on an external page means inserting HubSpot-managed code into a site not hosted in HubSpot CMS. This could be a WordPress landing page, a custom HTML page, or a JavaScript-heavy frontend framework like React.
Even though the form appears on a different platform, every submission flows into your HubSpot CRM. You pull the form embed from Marketing > Lead Capture > Forms. HubSpot provides a JavaScript snippet for each form that you can paste into any site that accepts HTML and JavaScript.
Once live, the form functions just like it would on HubSpot. The HubSpot tracking script identifies visitors, applies cookies, triggers workflows, and stores submissions under the correct contact record. Whether your form lives on a blog, microsite, or campaign landing page, it becomes a fully integrated lead collection point.
Behind the scenes, the embed works with your HubSpot tracking code, contact database, and automation logic. Every action is captured, no workflows are broken, and attribution remains accurate. All data is sent securely through HubSpot’s backend.
How It Works Under the Hood
When you use a HubSpot embed code, a live JavaScript snippet builds and manages the form dynamically in the browser.
Here’s the process:
- Your external page loads in the browser
- HubSpot’s embed script injects the form HTML into the page
- Scripts connect each field to its mapped HubSpot property
- When someone submits, the form sends data to HubSpot servers using your portal ID, the form’s GUID, and the browser’s tracking identity
- HubSpot updates contact records, triggers automation, and stores submissions
To make this work, you need:
- HubSpot portal ID
- Form GUID
- Optional: custom CSS or styling tweaks to match your site design
On submission, you get:
- A new or updated contact record in the CRM
- A logged submission in the form dashboard
- Triggered actions like emails or internal notifications
HubSpot also provides flexibility: toggle between JavaScript embed and raw HTML versions, customize styling to match branding, use JavaScript callbacks for post-submit logic, and include hidden fields for UTM or campaign data.
If your site already has the HubSpot tracking code installed, every visitor interaction, from form submission to page views ,gets stitched together in the contact timeline automatically.
Main Uses Inside HubSpot
Extending Lead Capture Across Non-HubSpot Sites
Embedding HubSpot forms allows lead capture on WordPress, Webflow, Shopify, or custom-built sites without losing CRM visibility.
Example: A WordPress blog wants newsletter signups feeding directly into HubSpot workflows. The embed ensures that each signup updates contact records, triggers email campaigns, and automatically feeds reporting.
Creating Campaign Landing Pages Outside HubSpot CMS
Developers may avoid HubSpot CMS for short-term campaigns. A static HTML page hosted on a CDN loads faster and can be customized freely.
Embedding a HubSpot form ensures submissions still flow into lists, deal pipelines, and workflows. Campaigns like product launches, webinar signups, or lead magnet giveaways centralize data without slowing development.
Supporting Multi-Brand or Microsite Environments
Managing multiple brands but running a unified CRM becomes easy with embedded forms. Each microsite can have unique forms that feed into one database for consistent lifecycle tracking.
Example: A digital agency with five service websites embeds distinct HubSpot forms connected to separate workflows while keeping the lead database centralized.
Common Setup Errors and Wrong Assumptions
- Missing HubSpot tracking code: The form submits, but visitor tracking, session attribution, and behavioral triggers fail. Include the code before the </body> tag.
- Embedding in an iframe: HubSpot forms rely on top-level access to cookies and DOM. Paste embed code directly into the main HTML.
- Using raw HTML expecting live updates: Raw HTML is static; JavaScript embed keeps your form synced with HubSpot changes.
- Forgetting hidden UTM or source fields: Without hidden fields, paid campaign leads may appear untagged. Add hidden fields and auto-fill using URL parameters.
Step-by-Step Setup or Use Guide
- Ensure you can edit both HubSpot forms and the external site’s code. Verify the HubSpot tracking snippet is on the destination page.
- In HubSpot, go to Marketing > Lead Capture > Forms.
- Create a new form or open an existing one.
- After setting up fields, click Share in the top right.
- Choose Embed code and copy the JavaScript snippet (includes portal ID and form GUID).
- Paste the embed code into the external site’s HTML where you want the form to appear.
- Confirm the HubSpot tracking code is included.
- Test by submitting sample data and verify the contact is created/updated in HubSpot.
- Optionally, adjust styling via site CSS (fonts, buttons, spacing).
- For advanced tracking: use the onFormSubmit callback to trigger redirects, pixels, or custom confirmation messages. Include hidden UTM fields and auto-populate them with URLSearchParams.
Done correctly, this provides full CRM connectivity with a seamless user experience wherever your form lives.
Measuring Results in HubSpot
Monitor performance through HubSpot reporting tools:
- Marketing > Lead Capture > Forms > Performance tab: total submissions, conversion rates, and activity
- Automation > Workflows: ensure workflow triggers
- Custom Reports Builder: segment contacts by form activity, source, lifecycle stage, or campaign tag
- Build a dashboard comparing external and internal forms to optimize funnel performance
Quick checklist:
- Verify total views and submissions
- Confirm UTM/source values for accurate attribution
- Compare page visits to conversion rates
- Track which external URLs deliver the most leads
- Audit workflows for proper automation
This ensures leads aren’t just collected, they’re meaningful and trackable.
Short Example That Ties It Together
A SaaS marketing team wants trial signups from a WordPress pricing page to feed directly into HubSpot. Fields include email, company name, and hidden utm_source/utm_campaign fields.
After pasting the JavaScript embed code and confirming tracking, signups flow into the CRM, and a tailored welcome email sequence triggers automatically. HubSpot analytics allow the team to review conversion rates by traffic source, showing which channels perform best.
How INSIDEA Helps
Embedding external forms into HubSpot can be deceptively complex. At INSIDEA, we work with developers and marketers to ensure embedded forms deliver accurate, actionable data.
If your team lacks time or technical expertise, it’s often best to hire HubSpot experts who know how to integrate forms, workflows, and reporting efficiently.
Our HubSpot consulting services include:
- Expert onboarding for portal and form setup
- Full-service HubSpot management, including data cleaning and workflow optimization
- Advanced automation support for multi-step journeys
- CRM and reporting alignment to translate submissions into pipeline growth
Visit INSIDEA to connect with our team and ensure external forms are fully integrated.
Embedding HubSpot forms correctly ensures no compromise on data, tracking, or design. Set them up once, and your forms become a powerhouse for clean, connected lead capture at every touchpoint.
