Create HubSpot Forms with two columns that are responsive

PYoganathan
Contributor

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?

0 Upvotes
2 Replies 2
Teun
Guide | Diamond Partner

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.



Did my answer solve your issue? Help the community by marking it as the solution.
erod
Contributor

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