Become a HubSpot power user — join us for HubSpot Training Day 2017.

Forms

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

Last updated: December 21, 2015

For forms on COS Landing Pages

  • Navigate to Content > Landing Pages
  • Locate and edit the landing page in question
  • Click on the Style tab of the form
  • Choose Form Button from the drop down to style the submit button
User-added image
Save and update the landing page

For forms embedded on external pages

Modify the embed code:

  • Add a custom CSS class to the form embed code.
  • This can be done by adding the attribute 'submitButtonClass'
  • 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.
      • .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 our developers documentation for more information on customizing the embed code Related Articles:

Was this article helpful?