Styling forms

[EStratton]

Hello!

I'm trying to style a Hubspot form. I've gotten it most of the way to where I want it to be - but there are still a couple of issues.

On this page: www.propertyradar.com/lp/lp-template

1. I'd like to center the GDPR statement ("By submitting this form, you are agreeing to PropertyRadar’s Privacy Policy and User Agreement.")
2. I am getting two error messages from the form. One if you click in the email box and then click out, and another if you hit enter in the email box without filling in a complete email. I'd like them both to appear under the GDPR statement.

How can I move these items? Thanks!

[EStratton]

Thanks, Stephanie! I've tried switching away from the GDPR code and implementing your solution - and was able to get it so that both error messages have moved on top of each other. 😯

Any suggestions on what to do from here?

[EStratton]

Thanks, Stephanie. I've taken the password off for the moment and will work on trying the absolute option following your example!

[Stephanie-OG · Accepted solution]

@EStratton - your page is password protected so I can't give you the exact code, but you'll likely want to use some absolute positioning to move the error messages below, and then add some extra spacing as well.

It can be tricky to use absolute positioning because you're taking that message out of the flow of the page, so make sure you check it on several screen sizes, and check what happens when different errors appear... etc.

I created a "single line form" module for one of my themes that looks like this: 

And uses this CSS: 

@media (min-width: 768px) {
  .single-line-form__form form {
    position: relative;
  }

  .single-line-form__form form .hs-form-field:first-of-type {
    padding-right: 1rem;
  }

  .single-line-form__form form fieldset:first-of-type .hs-form-field:first-of-type {
    padding-right: 0;
  }

  .single-line-form__form form .hs-form-field {
    margin-bottom: 0;
  }

  .single-line-form__form form {
    margin-bottom: 3rem; /* Accounts for error messages */
  }

  .single-line-form__form form .hs-error-msgs {
    position: absolute; /* Stops error messages from pushing the button down */
  }

  .single-line-form__form form .hs-submit {
    bottom: 0;
    position: absolute;
    right: 0;
  }

  .single-line-form__form form input[type=submit],
  .single-line-form__form form .hs-button {
    font-size: 0.875rem;
    padding-bottom: 0.7rem;
    padding-top: 0.7rem;
  }

}

But I specified that it can only be used with forms with one field and no GDPR, Captcha... etc. or it'll break the styling. So it's not exactly your use case, but it's similar. I think maybe if you set the form field container to be relative instead of the form it'll work.

---

Stephanie O'Gay Garcia

Freelance HubSpot CMS Developer

Website | Contact