Form Error Messages

[roy]

I’m embedding a HubSpot form in Unbounce. I’ve got it inside a green outline. The problem is that when errors pop up, they move the form fields down the page. If there are enough errors, the button gets cut off.

Is there a way to turn that feature off?

[system]

Hey @roy could you please share a screenshot of this issue?

[roy]

I found a workaround. I changed the display to none for the error messages. I don’t know of any way to preserve the error messages without shifting everything else.

[system]

Can you explain exactly how you achieved this?

I find that neither

.hs-form .hs-error-msgs label {display:none;}

or

.hs-form input:focus:required:invalid, 
.hs-form textarea:focus:required:invalid, 
.hs-form select:focus:required:invalid,
.hs-form input:focus:required:invalid:focus, 
.hs-form textarea:focus:required:invalid:focus, 
.hs-form select:focus:required:invalid:focus {display:none;}

does anything. The error messages still appear after clicking out of the email input.

[roy]

Here’s my complete styling for the error labels:

.hs-form .hs-error-msgs label{
 font-size:10px;
 font-style: italic;
 font-family:lato;
 line-height:0;
 padding:0;
 margin: 0;
 display:none;
}

Did you check “Remove HubSpot default styling” in the form’s embed settings?