Styling forms to display in a horizontal format is a common requirement and here is some basic CSS for making the form fields horizontal.

The name, email and submit button are inline with labels on the fields. If you don’t show labels, just remove “margin-top: 25px;”. Copy and paste this in to the styles for you form.

If you add any other fields, the width and padding of the first two rules will need to be tweaked but should always equal 100%. You’ll also need to change the number in “nth-child()”. The number will be the number of fields you have plus one.

The styles you add are applied directly to the form and these are the selectors you need to apply CSS to basic form elements within the ‘Styles’ tab:

/* Sample CSS

* This works with a form with name, email and a submit button using Bootstrap.
*/

form div {
    float: left;
    display: inline-block;
    width: 43%;
    padding-right: 1%;
}

form div:nth-child(3) {
    margin-top: 25px; /* Adjust depending on font size in labels. Remove if no labels. */
    width: 14%;
}

input.btn {
    width: 100%;
}


Did this answer your question?