Create HubSpot Forms with two columns that are responsive

Develop, Build & Integrate CMS Development
1

When creating forms from HubSpot, creating two-column forms such as adding First and Last Name side by side is causing responsive issues. The forms are not matching the full width with the full-width input fields
Is there a way to create forms that can have input fields side by side?

2

Hi @PYoganathan ,

Try adding this CSS to the pages that you show your forms on:

.hs-form .form-columns-0 .input,
.hs-form .form-columns-1 .input,
.hs-form .form-columns-2 .input {
 margin-right: 0 !important;
}

.hs-form .form-columns-2 .hs-form-field {
 width: calc(100% / 2 - 0.5rem) !important;
 float: left;
}
@media screen and (max-width: 650px) {
 .hs-form .form-columns-2 .hs-form-field {
 width: 100% !important;
 }
}
.hs-form .form-columns-2 .hs-form-field:last-child {
 float: right !important;
}

This only works if you set it as ‘Raw HTML Form’ in the styling options.

3

Hi @PYoganathan, it’s definitely possible but it can be messy. What @Teun suggested could work so I’d try that first but you could run into problems if you have other CSS already working in the background. Do you have a link to the page you could share with us.

Cheers,

Edgar