To style your embedded HubSpot form, you'll need to first remove the default styling. You can then target and apply styling to the embedded form in the stylesheet for your external site or in the embed code itself.
Please note: the ability to customize the CSS of your embedded form and embed code is only available for Marketing Hub Basic, Professional and Enterprise accounts.
- In your HubSpot Marketing Hub Basic, Professional, or Enterprise account, navigate to Contacts > Forms.
- Click the name of the form to edit.
- Click Actions at the upper right of the form editor and select Embed code.
- In the dialog box that appears, uncheck Include default styling.
- Click Copy and 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 has Include default styling unchecked. Learn more about embedding HubSpot forms here.
- Once you have embedded your HubSpot form with the default styling removed on your external site, you can style the form in your external CSS file. For a list of selectors used in HubSpot forms, check out this article.