CMS Development

IReynolds
Member

Blank Form Fields Hightlight

SOLVE

Hi,

 

I do not know if I have the right category, but I wanted to know if it is possible to have the required form fields to be highlighted when someone forgets certain fields. I have searched the internet and tried to find a simple solution. I have people who visit my site often but are not internet savvy.  They say that they completed everything on the form and nothing happened.  Trying to get to the bottom of it, hard to speak internet terms over the phone trying to figure out what they are doing wrong or not on my end. The error messages are too small to see with decent eyesight it is even worse when someone is over 60! I want to have fields highlightedThe it is now.The it is now.Desired outcome #1Desired outcome #1Desired outcome # 2Desired outcome # 2 and or display what fields are not completed like in the photos

0 Upvotes
1 Accepted solution
IReynolds
Solution
Member

Blank Form Fields Hightlight

SOLVE

I got it to work, awesome! I have one more question I have checkboxes and an upload button how do I get them to highlight too?

View solution in original post

4 Replies 4
BarryGrennan
Top Contributor

Blank Form Fields Hightlight

SOLVE

Something like the following css should do the trick

.hs-input.invalid.error {
   background:#ffd2d2;
border: 2px solid #ef6b51;
}

 


profile2022aBarry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

 

 

IReynolds
Member

Blank Form Fields Hightlight

SOLVE

looks simple, where should I place this code? One page with the form embedded? I am still learning where everything in Hubspot.

 

Thanks!

0 Upvotes
BarryGrennan
Top Contributor

Blank Form Fields Hightlight

SOLVE

Hi @IReynolds

You'd need to place it in your site's css. If you're using a custom theme you can edit this Design Tools

 

If you're not super familar with any of this, the easiest way about it might be to:

 

Click on the cog in your dashboard, scroll down on the sidebar to "Website" and under website click "Pages"

Then in the Site Header HTML section you could paste.

<style>
.hs-input.invalid.error {
   background:#ffd2d2;
border: 2px solid #ef6b51;
}
</style>

profile2022aBarry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

 

 

 

IReynolds
Solution
Member

Blank Form Fields Hightlight

SOLVE

I got it to work, awesome! I have one more question I have checkboxes and an upload button how do I get them to highlight too?