---
title: Style your embedded form on external pages
description: Learn how to style your embedded HubSpot form on external pages in the form editor or with CSS in your external stylesheet.
---

[HubSpot Knowledge Base ](https://knowledgeqa.hs-sites.com)

# [Style your embedded form on external pages](https://knowledgeqa.hs-sites.com/forms/how-do-i-style-my-embedded-form_ga2.176747749.191986143.1584724426-486886461.1582655209)

 Written by [HubSpot Support](https://knowledgeqa.hs-sites.com/author/hubspot-support) | Sep 28, 2018 4:00:00 AM

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](https://knowledgeqa.hs-sites.com/articles/kcs_article/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site#add-the-form-embed-code) or [standalone form page](https://knowledgeqa.hs-sites.com/articles/kcs_article/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site#create-a-standalone-form-page). The themes add more customization options to your forms, in addition to any [global form style settings](https://knowledgeqa.hs-sites.com/articles/kcs_article/forms/set-global-form-colors-and-fonts).

- 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](https://knowledgeqa.hs-sites.com/articles/kcs_article/forms/set-global-form-colors-and-fonts).

**Please note:** themes and styles set in the form editor will only apply to [embedded forms](https://knowledgeqa.hs-sites.com/articles/kcs_article/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site#add-the-form-embed-code) or [standalone form pages](https://knowledgeqa.hs-sites.com/articles/kcs_article/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site#create-a-standalone-form-page). Forms on your HubSpot pages can only be [styled ](https://knowledge.hubspot.com/articles/kcs_article/forms/style-forms-on-your-hubspot-pages)[with the form module style options](https://knowledge.hubspot.com/articles/kcs_article/forms/style-forms-on-your-hubspot-pages) in the content editor.

 

## With CSS in your external stylesheet (***Marketing Hub ****Professional*, *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.

- In the upper right, click **Share**.
- In the dialog box, click **Copy** to copy the form embed code.
- [Add the form embed code](https://knowledgeqa.hs-sites.com/articles/kcs_article/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site#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](https://designers.hubspot.com/docs/cos/hubspot-form-markup#styling-forms) in HubSpot's designers documentation.
- Alternatively, you can [modify the form embed code](https://developers.hubspot.com/docs/methods/forms/advanced_form_options) 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.

[View full post](https://knowledgeqa.hs-sites.com/forms/how-do-i-style-my-embedded-form_ga2.176747749.191986143.1584724426-486886461.1582655209)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "HubSpot Support"
  },
  "dateModified" : "2020-06-26T04:06:18.122Z",
  "datePublished" : "2018-09-28T04:00:00Z",
  "headline" : "Style your embedded form on external pages",
  "image" : {
    "@type" : "ImageObject",
    "height" : 60,
    "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
    "width" : 60
  },
  "mainEntityOfPage" : "https://knowledgeqa.hs-sites.com/forms/how-do-i-style-my-embedded-form_ga2.176747749.191986143.1584724426-486886461.1582655209",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "HubSpot Knowledge Base"
  }
}
```