Style and embed HubSpot forms on an external site

Use HubSpot forms on your external website to capture leads and automatically sync contact data to your HubSpot account. You can style your form in HubSpot and use the form embed code to add it to your site. Or use a share link to send a standalone form to your audience. 

Embedding a form ensures submissions sync directly to your HubSpot account, where you can manage contacts, trigger automation, and analyze performance. For example, you can add a HubSpot form to a product page on your company’s website to capture demo requests and follow up with an automated email. 

If your form was created in the legacy form editor, learn how to set up and style a legacy form on an external site.

Before you get started

Before you begin working with this feature, review the technical requirements and considerations for using forms on external sites.

Requirements

• When embedding a HubSpot form on an external site, you'll need to add the site domain to your tracking settings. Form submissions from domains that aren't added will be marked as spam. 
• To track analytics on your embedded form, you must install the HubSpot tracking code on your external page. 
  

Limitations and considerations

• Setting your form as a raw HTML form is not available in the updated form editor. Only forms built using the legacy form editor can be set as raw HTML.
• Customizing a form's embed code requires the help of a developer who knows how to work with JavaScript. More advanced customization can be done with a custom-built form and the HubSpot Forms API.

Style your form 

Customize the text, input fields, buttons, and background for your form and form steps. Form style customizations are applied to all form steps. You cannot style individual form steps separately. 

1. In your HubSpot account, navigate to Marketing > Forms.
2. Create a new form or hover over an existing form and click Edit. 
3. In the left sidebar menu, click the styles Styling icon.
4. From the Form styles panel, you can customize the following components:
   • Fields: customize the field, including background and borders. You can also customize the font, font-size and colors for your labels, as well as the colors for your help text, placeholders, and error text. 
   • Buttons: customize the button's height, corner rounding, background, gradient, and add a drop shadow to the button. You can also customize the font, font-size, and color for the button text. 
   • Paragraph (Rich Text): customize the font, font size, and color for your body text. 
   • Heading: customize the font and text color of your heading. You can choose to add drop shadow to your header text. 
   • Background: customize the background for your form and form steps. You can choose to set a background color or use an image for the background. You can use AI assistants to generate images. You can also choose to set a border for your form.
   • Progress bar: customize the progress bar on your form, including the color of the progress line and the font of the progress bar. 

Share a standalone form page 

Use a share link to display your form on a standalone page. Anyone with the share link can access the form. The share link cannot be hidden or made private.

To copy the share link:

1. In your HubSpot account, navigate to Marketing > Forms.
2. Hover over a form, and click Edit.
3. In the top right, click Review and update.
4. In the right panel, at the bottom, click Update.
5. In the dialog box, click Copy a share link.
6. At the bottom, click Copy. This will copy the page’s web address to your clipboard.
7. In your browser, open a new window or tab and paste your page's URL in the address bar to load it. You can also share the form page URL directly with others to give them access to the form.

Copy the form embed code

Embed your form onto your external page by copying the form embed code and pasting it on your external page. To track analytics for your embedded form, your HubSpot tracking code must be installed on the external page where you embed the HubSpot form.

To copy the embed code: 

1. In your HubSpot account, navigate to Marketing > Forms.
2. Hover over a form and click Edit. 
3. In the top right, click Review and update.
4. In the right panel, at the bottom, click Update.
5. In the dialog box, click Get embed code.
6. On the Embed code tab, click Copy.
7. Paste the embed code into the HTML module on your external page.

Access the form developer code

Embed your form and customize the style using CSS in your external stylesheet. With this method, you can override default styles, apply granular styling to specific form elements, and set global rules for consistent styling across your embedded forms. Learn more about how to define custom styling for embedded forms using CSS. 

To access the developer code: 

1. In your HubSpot account, navigate to Marketing > Forms.
2. Hover over a form and click Edit. 
3. In the top right, click Review and update.
4. In the right panel, at the bottom, click Update.
5. In the dialog box, click Get embed code.
6. Click the Developer code (Advanced) tab.
7. To accept the risk that changes made externally to CSS or JavaScript may cause your form to break, select the I understand the risks, show me the code checkbox.
8. At the bottom, click Copy.
9. Add the form embed code to your external page. After embedding your form, you'll be able to style the form in your external stylesheet with CSS.
   • The CSS variables you can override are listed in this article.
   • Global styles will override top-level styling across all your embedded forms. You can also target individual elements of your forms, such as a form element row, submit buttons, or form headings.