HubSpot Contact Form - How to solve some spacing issues?

Hi there,

We are using HubSpot on our contact page, but when resizing the screen, we notice a large space between the contact form and the text that is on the right side.

We wonder if there is any way to reduce that space between the contact form and the text. We can probably make the fields longer but, how?

If there is a way, your help will be very appreciated.

**I share the URL in private.

Many thanks!

Hi,

To make it closer, add a max width to your row element where the form resides.

Change 1000px to adjust

Thanks

Hi @paul.r,

Many thanks for your reply.

I will test and will let you know if it works.

One more thing, do you know how can we get rid of the black line below the image?

It only appears on the contact page, and we don’t know why.

If possible, let us know, please.

Thanks!

Hi there,

There is a default CSS code that is adding the black line before the slider.

Please add this code to the Global CSS to remove it:

.x-slider-container.below {
    border-bottom: 0;
}

Here are some reference links related to the suggestions above:

Hope this helps.

Thanks, @Jade. It works!

In regards to our previous question about the HubSpot form, I added the max width and It looks a bit better.

Now, we have another HubSpot form on another page, and we would like to know how to position the form in the center. Also, how can we make the fields longer?

**I share the URL in private.

Many thanks for your support!

Hello There,

To make things easier when you create another page with a Hubspot form, since you are using raw content element, please use this code format when inserting the code. You need to wrap the hubspot form code inside this div:

<div style="max-width: 500px; margin: 0 auto;">

  <!-- you can place the hubspot form code in this area -->

</div>

This will set a container with a maximum of 500 pixel width and it will always be at the center.

Hope this helps. Please let us know how it goes.

@RueNel

Perfect! It works.

One last thing,

Is there any way we can make the fields longer? So we have less empty space on the sides.

Thank YOU!

Hello There,

The form is coming from an iframe and we cannot style any element inside an iframe because it is residing in a 3rd party site. The form has a maximum width of 500 pixel which is also roughly the width of the fields.

Hope this explains it.

Hi @RueNel,

Okay. No problem. We understand.

Thank you very much.

You’re welcome!
We’re glad we were able to help you out.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.