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

Edit and style your form submit button

Last updated: November 21, 2018

free

Edit your form submit button text

The default submit button text on a HubSpot form is Submit. To edit the submit button text:

  • In your HubSpot account, navigate to Marketing > Lead Capture > Forms.
  • Click the name of the form.
  • In the form editor, click the Submit button.

  • In the left pane, enter the new submit button text in the Label field.

  • In the top right, click Publish to update the live form.

 

Style your form submit button on HubSpot pages (Marketing Hub Basic, Professional, and Enterprise only)

  • In the content editor, hover over the form module and click the edit styles icon.

  • In the left pane, click the dropdown menu and select Form button.
  • Style the form submit button with the options, such as changing the button background color or text font size.

  • In the bottom left, click Save and go to module list.
  • In the upper right, click Publish or Update.
This updates the style of your form submit button on an individual page basis. Learn how to customize your global style settings for forms.

 

Style your form submit button on external pages (Marketing Hub BasicProfessional, and Enterprise only)

To style your form submit button on your external pages, add the element submitButtonClass with the value of a CSS class to your form embed code. For example:

<!--[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: 'hs-form-submit-button'
});
</script>

This will strip all default styling from the form submit button. In your external stylesheet, add the CSS class and corresponding style attributes. For example:

.hs-form-submit-button { background: #ff0000; padding:10px; }

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

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

Learn more about customizing the form embed code in HubSpot's developers documentation.

New Call-to-action

Was this article helpful?

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