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 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.
Note: We recommend using the Layout field for a simpler, drag-and-drop approach to building advanced form layouts. However, the inline-fields class covered in this tutorial is still supported.
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.
Then, to reduce the height of your form, open up each field’s Advanced section and select the Hide Label option.
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.
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.
Here’s how the form will look on the frontend of the site:
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 for more details.