### [Displaying Your Form in a Single Line](https://wpforms.com/docs/how-to-display-your-form-in-a-single-line/)

**Published:** November 23, 2023
**Author:** Umair Majeed

**Excerpt:** Learn how to display all of your form fields on one line.

**Content:**

Would you like 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 key areas of your site (like the top section of your home page) to get maximum exposure.

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

![Inline form](https://wpforms.com/wp-content/uploads/2023/06/inline-form.gif "Inline Form")**Note:** If you prefer a simple drag-and-drop option to customize your form’s layout, we suggest using the [Layout field](https://wpforms.com/docs/how-to-use-the-layout-field-in-wpforms/). However, the `inline-fields` class covered in this tutorial is still supported and is recommended if you’d like to align the submit button in the same line with your form fields.

---

For our example, we’ll be creating a form with three form fields: **Name**, **Phone**, and **Email**.

To display the form fields 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.

**Note:** Please be aware that using the `inline-fields` class in WPForms can sometimes conflict with your WordPress theme’s styles. As a result, the appearance might not align with your expectations.

![Inline fields CSS](https://wpforms.com/wp-content/uploads/2021/07/Inline-fields-CSS.png)Then, to reduce the height of your form, open up each field’s **Advanced** section and select the **Hide Label** option.

![Hide label for field](https://wpforms.com/wp-content/uploads/2021/07/Hide-Label-for-field-1.png)Next, we’ll set up some placeholder text to provide guidance to users. For our example, we’ll add **Email** as the placeholder text for our Email field.

![Add placeholder text](https://wpforms.com/wp-content/uploads/2021/07/add-placeholder-text.png)**Note:** If you’d like to change the appearance of the submit button to fit the style of your form, you can follow [our guide on customizing the submit button](https://wpforms.com/docs/how-to-customize-the-submit-button/).

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

Please enable JavaScript in your browser to complete this form.

Name

Email

Phone

Submit![Loading](https://wpforms.com/wp-content/plugins/wpforms/assets/images/submit-spin.svg)

 **Note:** If you’re looking for another example or a ready-to-use template for a single-line form, check out our [Inline Newsletter Signup Form Template](https://wpforms.com/templates/inline-newsletter-signup-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 [setting up form notifications](https://wpforms.com/docs/setup-form-notification-wpforms/ "How to Set Up Form Notifications in WPForms") for more details.

**Categories:** Styling, Styling and Customization

---