Can I move * for form required field

SOLVE
Occasional Contributor

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?

Capture.PNG

 

Appreciate your help!

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Regular Advisor

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="*";
{
11 Replies 11
Advisor

@wlyu9248 you can hide it with CSS like so:

.hs-form-required {
    display: none;
}
--
Stefen Phelps
Web Developer / Co-founder
Kelp Creative Agency
Twitter — @stefen
Highlighted
Regular Advisor

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="*";
{
Visitor

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.

Occasional Contributor

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!asterisks.jpg

 

Reply
0 Upvotes
New Contributor

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.

Reply
0 Upvotes
Advisor

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

--
Stefen Phelps
Web Developer / Co-founder
Kelp Creative Agency
Twitter — @stefen
Reply
0 Upvotes
New Contributor

@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.

Reply
0 Upvotes
Advisor

@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.

--
Stefen Phelps
Web Developer / Co-founder
Kelp Creative Agency
Twitter — @stefen
Reply
0 Upvotes
Regular Advisor

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;
}

Reply
0 Upvotes
Occasional Contributor

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; } 

 

required.jpg

 

Thanks

Reply
0 Upvotes
Occasional Contributor

This worked like a charm Stefen! Great!

Reply
0 Upvotes