Horizontal Form Styling

[sydalexandria]

Is it possible to create a horizontal form in Hubspot COS? Can I apply classes to the fields to create this?

[llegault]

Discovered a solution for desktop; may still need to add a media query for mobile.

The solution: 

- Add this to the Head HTML of the page containing a HubSpot form:

<style> 
.field { 
float:left; 
padding:5px; 
} 
a.hs-button.large.primary { 
text-align:center; 
} 
.horform{
    position: relative;
}
.btn-primary, .hs-button.primary {
    position: absolute;
    top: 40px;
    left: 510px;
}
</style> 

- The 'left: 510px' for the submit button is the distance from the left side of the form to where you want the the submit button to appear all the way to the right of the fields. You can increase or decrease the pixels if you want the button closer or farther from the last field.

- The 'padding:5px;' is the distance between the fields themselves which can also be increased or decreased.

- Please note: this will work best when the overall width of the form can comfortably fit in the column it is placed in. In other words, if you have two columns and the form is in the left column with some content in the right column, realize that the form will be quite narrow and this custom coded solution may not look that great so narrow. If you just have one field (the Email field) and a submit button, that may look fine in a 2 column layout, whereas if you have 3-4 fields + submit button, that will likely not look great in a multi-column page where the form won't have room, width-wise to look good as horizontal.

[DJuilfs002]

Hi llegault,

I tried this on 4neighborhood.com's homepage and the button wouldn't show. The form fields showed up horizontally but no button. Any ideas why?

[DaniellePeters · Accepted solution]

This Doc has the markup for HubSpot forms and selectors you can use for stying the forms with css:

http://designers.hubspot.com/docs/cos/hubspot-form-markup

In most cases, adding "float:left;" to ".hs-form .hs-form-field" and applying an appropriate percentage based width will resut in the fields appearing horizontally next to each other, but it may depend on the length of the form and the other styles on the page.