How to Set Up and Style Hubspot Forms on an External Site

Using Hubspot on your external website lets you capture leads, track submissions, and sync data directly into your CRM without complex development work.

This guide walks you through how to embed, customize, and style forms so they look native on any page outside the main Hubspot-hosted environment.

Understanding Hubspot Form Embeds

When you publish a form in your Hubspot account, the system generates an embed code. You add this code to your external site so the form can load, collect data, and send it back to your CRM.

There are a few common places where you might embed a form:

• Landing pages built in a CMS like WordPress, Webflow, or Wix
• Static HTML pages hosted on your own server
• Web applications or product pages that need direct Hubspot data capture

No matter where you place the code, the basic approach is the same: configure the form in your portal, copy the embed, then paste it into your site’s HTML.

Prepare Your Hubspot Form

Before embedding anything, you need to configure the form in your Hubspot tools so it collects the right information and behaves correctly when visitors submit it.

Create or Edit a Form in Hubspot

1. Sign in to your Hubspot account.
2. Navigate to your marketing or forms tool, then open the forms dashboard.
3. Click to create a new form or select an existing form you want to use on an external page.
4. Use the drag-and-drop editor to add fields such as email, name, and any custom properties your team tracks.

As you design the form, keep the final placement in mind. Short forms usually perform better on external pages, especially when embedded in sidebars, pop-ups, or narrow content areas.

Configure Form Options

Still within your Hubspot editor, configure essential options before you embed the form:

• Submission behavior: Choose whether to show an inline thank-you message or redirect to a separate thank-you page after submission.
• Follow-up options: Enable follow-up emails or connect the form to automation workflows if needed.
• Notifications: Set up internal email alerts so stakeholders know when new submissions arrive.
• Language and labels: Adjust the form’s language, field labels, and error messages to match the rest of your site.

Once your settings are finalized, save and update the form so the latest version is ready to embed.

Get the Hubspot Embed Code

After your form is configured, you can grab the embed code that will insert it into your external website.

Copy the Standard Embed Code

1. In the forms dashboard, locate your form.
2. Open the options or “share” menu associated with that form.
3. Choose the option to embed the form.
4. Copy the standard JavaScript embed code provided by Hubspot.

The embed code usually includes a script tag that loads the forms library and a configuration block referencing the specific form and your account. Keep the code intact when you paste it into your site’s HTML.

Where to Paste the Code on Your Site

The exact placement depends on how your external site is built, but common approaches include:

• Adding the embed code into an HTML block or widget in your CMS page builder
• Pasting it directly in the page template where you want the form to appear
• Inserting it within a custom code component in your front-end framework

Make sure the code is pasted into the body area of the page, not inside an HTML head tag, so the form can render correctly.

Style Hubspot Forms on External Pages

By default, the form uses the styling configured in your Hubspot account. You can also override aspects of the design to better match your external website’s brand.

Adjust Form Styles in Hubspot

Within the form editor, adjust basic styles before embedding:

• Form width and alignment
• Field label position and font settings
• Button color, shape, and text
• Spacing between fields and groups

These global settings help ensure a consistent look across every page where you embed the form, including external domains.

Apply Custom CSS on Your Site

If you need more control, add custom CSS on your external website targeting the classes rendered by the form. Typical use cases include:

• Matching form typography to your main site fonts
• Adjusting margins so the form fits sidebars or narrow columns
• Styling error messages and success messages to align with your brand
• Changing field border colors or focus states

Place your CSS in your external site’s main stylesheet or within a custom code block. Test changes to confirm they do not conflict with built-in Hubspot behaviors.

Manage Behavior and Tracking in Hubspot

Once your form is live on an external site, you can monitor performance and manage data directly in Hubspot.

Track Submissions and Contacts

Every submission on the external page syncs back to your CRM. You can:

• Review new contacts created from the form
• Analyze conversion rates and submission metrics
• Segment contacts based on form properties
• Trigger automation workflows after a successful submission

Because the embed uses your form configuration, you get the same reporting and automation capabilities that you have on forms hosted directly by Hubspot.

Update Forms Without Editing Your External Site

One major benefit of using an embedded form is that most updates happen within your portal, not in your site’s codebase:

• Add or remove fields in the form editor
• Change button text, labels, or language settings
• Modify follow-up messages or redirect URLs
• Adjust internal notifications or workflows

After saving, these changes propagate automatically to any external page where the form is embedded. You do not need to replace the existing embed code unless you switch to a different form or embed method.

Troubleshooting Hubspot Form Embeds

Occasionally, forms might not display or behave as expected on external pages. Typical causes include script conflicts or incorrect placement of the embed code.

Check Script and Placement Issues

If a form does not appear:

• Verify that the embed code from Hubspot has been pasted exactly as provided.
• Confirm that JavaScript is allowed and not blocked by your CMS or security plugins.
• Ensure the code is within the body of the page and not in a restricted area.
• Look for errors in your browser console related to script loading or conflicts.

Also test the page in an incognito window or another browser to rule out caching issues or local extensions blocking scripts.

Confirm Form Publishing Status

If you recently changed the form:

• Open the form in Hubspot and confirm that it is published.
• Make sure you are embedding the correct form, especially if you have multiple versions.
• Allow a short delay for changes to propagate across your external site’s caching layer or CDN.

When in doubt, republish the form, clear any caching plugin on your external site, and refresh the page.

Additional Resources for Hubspot Forms

To dive deeper into official documentation and best practices for embedding forms on external pages, review the original help article on the Hubspot knowledge base here: set up and style your form on an external site.

If you need expert help integrating forms into complex websites or optimizing conversion paths, you can also consult an implementation partner such as Consultevo for strategic and technical support.

By configuring your form correctly in Hubspot, embedding the generated code on your external pages, and applying thoughtful styling and tracking, you can create a seamless lead capture experience that fits any site design while staying fully connected to your CRM and automation workflows.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`