When you enable the "Make this field required" setting on a HubSpot form field, it should 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; }
Check out the section below on where to addd the code.
Style the required field asterisk
You can also style the asterisk by using CSS.
Changing the colour
You can update the colour of the asterisk above by using the following CSS snippet:
.hs-form-required { color: #0171b2; }
You can replace the above colour (#0171b2) with your own.
Check out the section below on where to addd the code.
Where to add the code snippets above
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 stylesheet
Ideally you should find the stylesheet with your form styling and add the code there.
The stylesheet could be in your global settings (under Settings > Website > Pages > CSS & Stylesheets), applied to your template(s) (you can find it under the "Linked sylesheets" section on your template) or in the advanced settings of your page.
It very much depends on your setup so I wouldn't recommend updating this unless you're comfortable with CSS. Note that it will also 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 <head> markup" section of your template or the "Head HTML" settings of your page (details 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>
Last Updated: September 22, 2019
