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

Change the color of a form submit button

Last updated: October 3, 2018

Applies to:

Marketing Hub
Basic, Professional, Enterprise

Edit the color of your form submit button in the landing page editor, or within the embed code on your externally embedded form. 

Edit the form submit button on your landing pages

  • In your HubSpot account, navigate to Marketing > Website > Landing Pages.
  • Hover over the landing page where the form is located and click Edit
  • Click the Edit styles button within the form module.
  • In the module editor that opens on the left, click the Styles tab.
  • Select Form Button from the dropdown menu and use the style options in the window to make your changes.
If you want to edit the form button color for all of your HubSpot forms, learn how to edit the form button styles in your global style settings

Edit the form submit button on your 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>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
portalId: '118xxx',
formId: '41tgif309-ok74-xxxx-xxxx-xxxxxxxxxx',
submitButtonClass: 'my-awesome-submit-button'

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.

View HubSpot's developers documentation for more information about customizing the form embed code.

New Call-to-action

Was this article helpful?

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