Create HubSpot Forms with two columns that are responsive

[PYoganathan]

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?

[erod]

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

[Teun · Accepted solution]

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.