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

Style your embedded form on an external page

Last updated: October 10, 2018

free

You can style your embedded HubSpot form with preset themes in the form editor, or with custom CSS in your external stylesheet.

Style the form using themes

If you want to style your forms without writing any custom code, you can use preset themes on your embedded form or a form used on a standalone URL. The themes add more customization options to your forms, in addition to any fonts and colors you already have applied.  

  • 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 Style pane, 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 available themes. themes-in-forms

These themes are specific to each individual form and will only affect forms that are embedded externally or used in a standalone URL. 

Style the form using CSS

Please note: the ability to customize the CSS of your embedded form and embed code is only available for Marketing Hub BasicProfessional and Enterprise accounts.

  • 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 website as opposed to inside an iFrame, and any default HubSpot styling applied to the form will be removed.
  • When this setting is enabled, click Share in the top-right corner of the editor. 
  • In the dialog box, click Copy.
  • Add the form embed code to your external site. If you have already embedded your form on your external page, you will need to replace the existing code with this new version that does not have the default form styling applied. 
New Call-to-action

Was this article helpful?

If you still need help you can get answers from the , or to contact support.