# Styling forms

**URL:** <https://community.hubspot.com/t/styling-forms/60806>\
**Category:** CMS Development\
**Created:** [July 12, 2022, 5:21pm UTC](https://community.hubspot.com/t/styling-forms/60806 "2022-07-12T17:21:05Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![EStratton](https://avatars.discourse-cdn.com/v4/letter/e/df788c/32.png) [@EStratton](https://community.hubspot.com/u/EStratton)\
**Post date:** [July 12, 2022, 5:21pm UTC](https://community.hubspot.com/t/styling-forms/60806/1 "2022-07-12T17:21:05Z")

</div>

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](http://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](https://www.propertyradar.com/privacy-policy) and [User Agreement](https://www.propertyradar.com/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!

 ![Screen Shot 2022-07-12 at 7.49.59 AM.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/3/c/3c6cde0201e0f1e026ddcdfe6de50a1b67712fd9.png)

---

<div class="post-metadata">

**Author:** ![Stephanie-OG](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stephanie-og/32/73267_2.png) [@Stephanie-OG](https://community.hubspot.com/u/Stephanie-OG)\
**Post date:** [July 12, 2022, 5:41pm UTC](https://community.hubspot.com/t/styling-forms/60806/2 "2022-07-12T17:41:49Z")

</div>

@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:

 ![form-on-one-row.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/b/b/bb63e254fe3c89e156447422d3930c2a2a4b24b2.jpeg)

And uses this CSS:

```lia-code-sample
@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](http://www.stephanieogaygarcia.com?utm_source=HubSpotCommunity)

[Website](http://www.stephanieogaygarcia.com?utm_source=HubSpotCommunity) | [Contact](http://www.stephanieogaygarcia.com/contact?utm_source=HubSpotCommunity)

---

<div class="post-metadata">

**Author:** ![EStratton](https://avatars.discourse-cdn.com/v4/letter/e/df788c/32.png) [@EStratton](https://community.hubspot.com/u/EStratton)\
**Post date:** [July 12, 2022, 5:47pm UTC](https://community.hubspot.com/t/styling-forms/60806/3 "2022-07-12T17:47:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![EStratton](https://avatars.discourse-cdn.com/v4/letter/e/df788c/32.png) [@EStratton](https://community.hubspot.com/u/EStratton)\
**Post date:** [July 14, 2022, 10:56pm UTC](https://community.hubspot.com/t/styling-forms/60806/4 "2022-07-14T22:56:50Z")

</div>

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?

 ![Screen Shot 2022-07-14 at 3.55.42 PM.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/7/8/784d5e50c13eac4f8a47594f3b4e698701ca4b9c.png)