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.
- 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.
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.