How to Display Your Form in a Single Line

Would you like all of your form fields to be displayed in a single line? Having your form in a single line layout can help you to place it in the key areas of your site (like the top section of your home page) in order to get maximum exposure. 

In this tutorial, we’ll show you how to display your form in a single line.

In this example, we’ll be creating a form with three form fields: Name, Phone, and Email.

To display the form in a single line, navigate to Settings » General in your form builder and add the CSS class inline-fields to the Form CSS Class field.

add form css class inline-fields

Next, to reduce the height of your form, open up each field’s Advanced Options and set up some placeholder text. From there, go ahead and select the Hide Label option.

hide form label

Note: If you’d like to change the appearance of the submit button to fit the form, you can follow our guide on how to customize the submit button.

Here’s how the form will look on the front end of the site:

Single line form

That’s it! Now you can create forms that will be displayed in a single line.

Next, would you like to receive a copy of the information submitted by your users through your forms? Be sure to check out our tutorial on how to up form notifications for more details.