Blank Form Fields Hightlight

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 highlighted


The it is now.

Desired outcome 1

Desired outcome # 2 and or display what fields are not completed like in the photos

Something like the following css should do the trick

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

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

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

Thanks!

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>

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

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?