Forms

How do I change the color of a form submit button?

Last updated: September 5, 2017

Available For:

Marketing: Basic, Pro, Enterprise
Sales: N/A

This article will provide instructions on changing the color of a HubSpot form's submit button on a HubSpot landing page, but also on a form that is embedded on an externally hosted page.

For forms on HubSpot landing pages:

  • In your HubSpot Marketing account, navigate to Content > Landing Pages.
  • Locate and hover over the landing page that has the form in question > click Edit.
  • Click on the Edit styles button within the form module.
  • In the edit window that appears, within the Styles tab of your form module, choose Form Button from the dropdown menu and use the style options in the window to make your changes.

Save and update the landing page

For forms embedded on external pages:

You will need to modify the embed code to change the the color of your HubSpot form's submit button by adding a custom CSS class to the form embed code. This can be done by adding the attribute 'submitButtonClass' to the existing embed code.

Example code:

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: '118xxx',
formId: '41tgif309-ok74-xxxx-xxxx-xxxxxxxxxx',
submitButtonClass: 'my-awesome-submit-button'
});
</script>

This will strip all default styling from the form submit button. You then have to add CSS to the head of the page or a stylesheet that styles that new attribute:

.my-awesome-submit-button {background-color:red; padding:10px;}

As an alternative, you can disable HubSpot's default styling and use a CSS selector in your stylesheet without modifying the embed code:

For example:
input[type="submit"]{ background: #ff0000; }

This would make the submit button red.

Please reference HubSpot's developers documentation for more information on customizing the form embed code.

Was this article helpful?