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

    Difficulty Level: Intermediate. This post assumes a solid understanding of HubSpot tools and some technical knowledge. Instructions are detailed and can be applied as they appear on the post.

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

    HubSpot form - mandatory field

    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

    Thank you! I appreciate the feedback 😊

    Sorry to hear that! 🙁

    I'd appreciate if you could take a moment to let me know how I can improve this article.

    💻

    Looking for a HubSpot website developer?

    I can help you with website themes, templates, page setup and custom modules. 

    Get in touch

    Stephanie O'Gay Garcia

    Hi! 👋 I'm a freelance HubSpot Website Designer & Developer based in Toronto (Canada). Give me a shout if you have questions about this post or there's anything I can help you with.