Set up and style a HubSpot form on an external site

After creating a form in HubSpot, you can add it to HubSpot pages or pages you’ve created outside of HubSpot. If your content is hosted outside of HubSpot, you can add forms with the following methods:

• Embed the form by copying the embed code and adding it onto your external page.
• Use the form share link, which offers a standalone web page for your form that you can link to.

With either method, changes made to the form will automatically be updated on the live form on your external site. You can style your embedded HubSpot form within the form editor or with CSS in your external stylesheet.

Before you get started

• If you want to set your form as a raw HTML form, this option is not available in the updated form editor. Only forms built using the legacy form editor can be set as raw HTML.
• If you’re embedding your HubSpot form onto an external page, you must install the HubSpot tracking code to track analytics. Learn how to install the HubSpot tracking code. 

Style your form 

Customize the text, input fields, button, and background for your form and form steps. Style options configured in the Global Styling tab will be 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. You can customize the style for the following form 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. 

Copy the form embed code

You can embed your HubSpot 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 access 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.

Use the share link to share a standalone form page 

You can share your form with the share link, which will display the form on a standalone web page. This share link cannot be hidden or made private. Anyone with the share link will be able to access the form. 

To access 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 form page’s web address to your clipboard.
7. In your browser, open a new window or tab and paste your form 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.

Style your embedded form with CSS in your external stylesheet 

Users in a Marketing Hub or Content Hub Professional or Enterprise account can embed forms and style them using CSS in the 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.