How to make a HubSpot form display in a horizontal layout?

Other Questions HubSpot
1

I’m trying to customize a HubSpot form to display horizontally instead of vertically. The default layout stacks the form fields one above the other, but I want them side by side in a single row.

I’ve already used the embed code feature from HubSpot, which includes their JavaScript. However, I can’t figure out how to change the layout.

I’ve looked at the HubSpot form markup documentation and played around with different parameters, but nothing seems to work. The form still displays vertically.

Has anyone successfully changed a HubSpot form to a horizontal layout? What CSS or JavaScript tweaks did you use to achieve this? Any tips or code examples would be really helpful.

/* Example of what I've tried */
.hs-form-field {
  display: inline-block;
  width: 30%;
  margin-right: 10px;
}

This CSS didn’t work as expected. What am I missing?

2

I’ve tackled this issue before, and it’s not as straightforward as one might hope. The key is to override HubSpot’s default styles with more specific CSS selectors. Here’s what worked for me:

.hs-form .hs-form-field {
    display: inline-block;
    vertical-align: top;
    width: calc(33.33% - 10px);
    margin-right: 10px;
}

.hs-form .hs-submit {
    display: inline-block;
    vertical-align: bottom;
    width: auto;
}

This CSS targets the form fields more precisely and adjusts their widths to fit three in a row. You might need to tweak the percentages based on your specific form layout. Also, ensure your form container has sufficient width to accommodate the horizontal layout. If you’re still having issues, check if there are any conflicting styles or JavaScript that might be overriding these changes.

3

I’ve found that modifying HubSpot forms can be tricky, but there’s a solution that worked well for me. Instead of relying solely on CSS, I used a combination of CSS and JavaScript to achieve a horizontal layout. Here’s what I did:

  1. First, I added a custom class to the form container:
window.addEventListener('message', event => {
    if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
        document.querySelector('.hs-form').classList.add('horizontal-form');
    }
});
  1. Then, I applied this CSS:
.horizontal-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

.horizontal-form .hs-form-field {
    flex: 1 1 200px;
    margin-right: 15px;
}

.horizontal-form .hs-submit {
    flex: 0 0 auto;
}

This approach gives you more control over the form’s behavior and appearance. It’s responsive and works well across different screen sizes. Just remember to adjust the flex values as needed for your specific form layout.

4

hey liam, i’ve dealt with this before. try using flexbox instead of inline-block. something like this might work:

.hs-form {
  display: flex;
  flex-wrap: nowrap;
}
.hs-form-field {
  flex: 1;
  margin-right: 10px;
}

adjust the flex values as needed. good luck!

5

I’ve grappled with this exact issue before, and I found that a combination of CSS Grid and media queries works wonders. Here’s what I implemented:

.hs-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

@media (max-width: 768px) {
  .hs-form {
    grid-template-columns: 1fr;
  }
}

This approach automatically adjusts the form layout based on available space, creating a responsive horizontal layout on larger screens while reverting to a vertical layout on mobile devices. It’s been quite effective in my projects, providing a clean, adaptable solution without the need for extensive JavaScript modifications.

Remember to test thoroughly across different devices and screen sizes to ensure optimal display. You might need to fine-tune the ‘minmax’ values depending on your specific form fields and desired layout.