Easily build and embed forms on your site. Try HubSpot Forms for free.  
Forms

Style your embedded form on external pages

Last updated: January 14, 2019

You can style your embedded HubSpot form on your external pages in two ways:

  1. Style your embedded form in the form editor
  2. Style your embedded form with CSS in your external stylesheet

 

Style your embedded form 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.

  • Select one of four themes.

 

Style (Marketing Hub Starter, Basic, Professional, and Enterprise 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 pagesForms on your HubSpot pages can only be styled with the form module style options in the content editor.

 

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

  • In your HubSpot account, navigate to Marketing > Lead Capture > Forms.
  • Click the name of the form.
  • In the form editor, click the Options tab.
  • Click to toggle the Unstyled 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.

  • 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. Learn more about styling HubSpot forms with standard attribute selectors in HubSpot's designers documentation.
  • 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.
New Call-to-action
Free Inbound Marketing Training Learn inbound marketing techniques that range from creating content, using  social promotion, converting and nurturing leads, and all the way to marketing  to your customers. Start the course