How do I remove or style the asterisk (*) for required fields on HubSpot forms?

Technical Difficulty: Intermediate

Written by Stephanie O'Gay Garcia

First Published:

September 22, 2019

Last Updated:

October 22, 2023

⚠️ Note that this post hasn't been updated for at least a year and the information may be outdated, proceed with caution! (Last updated: October 22, 2023)

When you enable the "Make this field required" setting on a HubSpot form field, it will show an asterisk (*) next to the field label:

You can remove or style this on your portal using CSS.

Remove the required field asterisk

You can remove the required field asterisk using the following CSS snippet:

.hs-form-required { display: none; }

Scroll down to learn where to add this code.

Style the required field asterisk

Alternatively, instead of removing the asterisk completely, you can also style the asterisk using CSS.

Changing the colour

You can update the colour of the asterisk above with the following CSS snippet:

.hs-form-required { color: #0171b2; }

where you can replace the above colour (#0171b2) with your own.

Where to add your code

There are a few places you can add this code depending on your comfort level and which forms you'd like to hide the asterisk on.

Add the code to your theme's stylesheet

The best practice would be to update your website theme's stylesheet. You can find your theme by going to Marketing > Files & Templates > Design Tools and locating your theme in the sidebar.

In most HubSpot themes that follow the CMS boilerplate structure, you can go into css > elements and open the _forms.css file which will already have a "Validation" section with the .hs-form-required CSS class:

However, themes vary a lot. Also, if you're using a Marketplace theme, you'll need to create a child theme to make any changes, so I wouldn't recommend updating this unless you're comfortable with CSS.

Note that updating the styling from your theme's stylesheet will affect all forms on your website.

Add the code to your template or page

You can style the form on a specific template or page in the "Additional markup" section of your template or the "Head HTML" settings of your page (read HubSpot's help article here).

If you are doing this, you'll want to add the opening <style> tag before your CSS and the ending </style> tag after your CSS, like this:

<style>
.hs-form-required { display: none; }
</style>

If you found this helpful, buy me a coffee! ❤️

Buy me a coffee