Can I move * for form required field

[wlyu9248]

As we know, hubspot form required fields will have an asterisk * after the label. Can we move this asterisk below the input box or remove it completely but we want to keep the field mandatory?

Appreciate your help!

[stefen]

@wlyu9248 you can hide it with CSS like so:

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

[michaelhartzell]

This worked like a charm Stefen! Great!

[tmattocks]

I would like to change the following to allow for red *  is there a way to make them red within this statement?

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

Thanks

[mdenning]

Is it possible to remove the asterisk on just one field? For example, if you look at this page, you will see the required asterisk in the side column sitting by itself on it's own line which looks kind of silly. If I add the display:none class to the CSS it will remove it from all required fields.

[ndwilliams3]

based on this page, you can selectively remove the asterisk form this form only using:

#hsForm_6dbd0b1a-86d0-4534-8040-6083708265a9_8893 .hs_email .hs-form-required {
display:none;
}

[stefen]

@mdenning sure, just use the parent element's ID to narrow it to just that one.

[mdenning]

@stefen I guess my question is more so, how do I edit the HTML for that sidebar that houses the Blog Email Subscription module? I'm not seeing it within the Blog template.

[stefen]

@mdenning you'll need to edit the hubspot form. If you want full control of the hubspot form, then you'll need to use HubSpot's API with your own markup.

[ndwilliams3 · Accepted solution]

To add to @stefen. If you also want to style required fields differently.

for example make border red:

.hs-input[required] {
    border: 1px solid red;
}

 or add asterisk after input:

.hs-input[required]:after {
content="*";
{

[OlgaK]

Hi there,

I tried using the custom CSS below and it didn't work for me. I need to position the asterisks after the input area like shown below. How can I do that? Thanks!

[asarna]

This is not correct:

.hs-input[required]:after {
  content="*";
{

It is not possible to add :after to input elements or any other non-container elements.