Last updated: April 30, 2025
Available with any of the following subscriptions, except where noted:
All products and plans
|
After creating a form in HubSpot, you can add it to HubSpot pages or pages you’ve created outside of HubSpot. Forms can be shared on your external, non-HubSpot-hosted site by either:
- Embedding the form code onto an existing page.
- Creating a standalone form page that you can link to.
With either method, changes made to the form in HubSpot's forms tool will automatically be reflected on the live form on your external site. After adding your form, you can style your embedded HubSpot form on your external pages in the form editor or with CSS in your external stylesheet.
Please note: it's not possible to set your form as raw HTML in the updated editor. Only forms built using the legacy editor can be set as raw HTML.
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.
- In your HubSpot account, navigate to Marketing > Forms.
- Create a new form or hover over an existing form and click Edit.
- On the left side, click the Styling icon.
- When customizing your Text, Input fields, or Button, you can choose from existing styles using the Quick field input styles. Alternatively, you can manually customize the style for each component of your form:
- 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.
Add the form embed code
To access the form embed code:
- In your HubSpot account, navigate to Marketing > Forms.
- Hover over a form and click Actions > Share.
- Click the Embed code tab.
- In the dialog box, if you want to add contacts who submit the form to a Salesforce campaign, click the Add contacts to a Salesforce campaign dropdown menu and select a campaign. If you associate a Salesforce campaign with your form, the form's embed code will be changed. In this case, you must re-add the embed code to your external site.
- Click Copy.
- Paste the embed code into the HTML module on your external page. To track analytics for your form, your HubSpot tracking code must be installed on the external page where you place a HubSpot form.
Create a standalone form page
You can also share your form via the Share link. In a Share link, the form will display on a standalone page at its own URL. This share link cannot be hidden or made private. Anyone with the share link will be able to access the form.
- In your HubSpot account, navigate to Marketing > Forms.
- Hover over a form and click Actions > Share.
- In the dialog box, click the Share link tab.
- Click Copy to copy the form page's URL to your clipboard.
- 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
If you have a Marketing Hub or Content Hub Professional or Enterprise subscription with your HubSpot account, you can embed forms and style them using CSS in your external stylesheet.
You can override default styles and apply granular styling to specific form elements, as well as set global rules to maintain consistent styling across all embedded forms.
Learn more about definining custom styling for embedded forms using CSS.
To access the developer code:
- In your HubSpot account, navigate to Marketing > Forms.
- Hover over a form and click Edit.
- In the form editor, click Review and update in the top left.
- In the dialog box, click Get embed code.
- Click the Developer code (Advanced) tab.
- Select the I understand the risks, show me the code checkbox.
- Click Copy.
- 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.
- The 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.
Learn more about defining custom styling for embedded forms using CSS.
