Form Error Messages

SOLVE
roy
Participant

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?

0 Upvotes
1 Accepted solution

Accepted Solutions
roy
Solution
Participant

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.

View solution in original post

4 Replies 4
Anonymous
Not applicable

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

0 Upvotes
roy
Solution
Participant

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.

View solution in original post

visti
Member

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
Participant

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?

remove hubspot default styling.PNG