Forms

Set up and style a HubSpot form on an external site

Last updated: November 6, 2020

Applies to:

All products and plans

With the forms tool, you can gather information from visitors to your website, allowing you to market, sell, and serve those visitors as they engage with your business. When you create a form in HubSpot, you can add it to HubSpot pages or pages you’ve created outside of HubSpot. Forms can be shared in two ways on your external, non-HubSpot-hosted site: by embedding the form code onto an existing page or by 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

If you're working with WordPress, learn how to insert a form on your WordPress post or page.

Add the form embed code

Please note: 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.

  • In your HubSpot account, navigate to Marketing > Lead Capture > Forms.
  • Create a new form or hover over an existing form, click the Actions dropdown menu, and select Edit form. 
  • Click the Options tab to choose what will happen after a visitor submits your form. You can choose to redirect your visitors to a thank you page or display an inline thank you message when a visitor submits your form.
  • In the form editor, in the upper right, click Share.
  • 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.
  • Click Copy.
    forms-editor-share-form-copy-form-embed
  • In the top right, click Publish
  • 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. HubSpot will collect form submissions without the HubSpot tracking code installed but no analytics will be recorded. 

If you are working with WordPress, learn how to insert a form on your WordPress post or page.

Create a standalone form page 

You can share your form via a form page so it will exist on its own page at its own URL.  

  • In your HubSpot account, navigate to Marketing > Lead Capture > Forms
  • Create a new form or hover over an existing form, click the Actions dropdown menu, and select Edit form. 
  • In the upper right, click Share
  • In the dialog box, click the Share link tab. 
  • Click Copy to copy the form page's URL to your clipboard.

share-form-own-page

  • In the top right, click Publish.
  • 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.
If you are embedding a form on your WordPress site, you may need to apply additional CSS declarations within your external stylesheet to make the form responsive. 

If you notice your form not working in WordPress or the embed code being altered when you view the live page, you may need to insert the form using a plugin to make sure the embed code stays intact. If you're using the latest version of Gutenberg, which removes inline JavaScript, use the Inline JS Block for Gutenberg plugin to embed forms and CTAs onto your page.

Style your embedded form on external pages

Style your embedded HubSpot form on your external pages in two ways in the form editor or with CSS in your external stylesheet.

In the form editor

Theme

If you want to style your forms without writing any custom code, you can apply preset themes to your embedded form or standalone form page. The themes add more customization options to your forms, in addition to any global form style settings.

  • In your HubSpot account, navigate to Marketing > Lead Capture > Forms.
  • Click the name of a form.
  • In the form editor, click the Style & Preview tab.
  • In the left pane, Theme section, clear the Keep old theme checkbox.

Please note: clearing the Keep old theme checkbox will remove the former default HubSpot styling applied to this form. Any custom CSS or JavaScript you have added to the form will no longer work. This checkbox is only available for legacy forms and will not be available in any new forms created in your account. 

  • Select one of four themes.

 

Style (Marketing Hub Starter, Professional, Enterprise, or Legacy Marketing Hub Basic only)

In addition to themes, you can style embedded forms on a more granular level.

  • In your HubSpot account, navigate to Marketing > Lead Capture > Forms.
  • Click the name of a form.
  • In the form editor, click the Style & Preview tab.
  • In the left pane, click the > Style section to expand it. Here, you can style the form field width, font family, font sizes, font colors, and form button.

These styles are set on an individual form basis and will override global form style settings.

Please note: themes and styles set in the form editor will only apply to embedded forms or standalone form pages. Forms on your HubSpot pages can only be styled with the form module style options in the content editor.

Style your form with CSS in your external stylesheet (Marketing Hub and CMS Hub Professional or Enterprise, or Legacy Marketing Hub Basic only)

  • In your HubSpot account, navigate to Marketing > Lead Capture > Forms.
  • Click the name of the form.
  • In the form editor, click the Style & preview tab.
  • Click to toggle the Set as raw HTML form switch on. The form will render as a raw HTML element on your external page as opposed to inside an iframe, and any default HubSpot styling applied to the form will be removed.

options-unstyled-form

  • In the upper right, click Share.
  • In the dialog box, click Copy to copy the form embed code.
  • Add the form embed code to your external page. If you've already embedded your form, you must replace the existing embed code with this new, unstyled version.
  • After embedding your form, you can style the form in your external stylesheet with CSS. 
  • Alternatively, you can modify the form embed code to make additional form customizations. As HubSpot forms are built with JavaScript, not HTML, customizing the form embed code requires the help of a developer who knows how to work with JavaScript.