The best way to display your WP form on a single line

Would you like all of your form fields to appear in a single line? By displaying your form in a single-line layout, you can place it in key areas of your site (like the top of your home page) for maximum exposure.
We will show you how to display your form in a single line in this tutorial.


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

The best way to display your WP form on a single line or inline kawsarMahmud-com
Step 1

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

The best way to display your WP form on a single line or inline kawsarMahmud-com step 2
step 2

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 Enter your Email as the placeholder text for our Email field.

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

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


MD Kawsar Mahmud
MD Kawsar Mahmud
Web Design and Developer
kawsarmahmud.com

Hi and welcome, I am Kawsar Mahmud seasoned WordPress designer & Developer, Responsive Web, E-commerce Pioneer, and founder of KM Studio. At "KM Studio" we aim to provide the best Digital Services, website designing and developing, E-commerce solutions, WordPress Solutions, Graphic design services, Digital marketing, and many more. Over the years our work is appreciated across the globe. Looking forward to working with you. if you want any assist, Feel free to message me anytime.

Related Posts
1 Comment

Good post. I learn something totally new and challenging on blogs I stumbleupon every day. It will always be interesting to read through articles from other writers and use a little something from other sites.

Leave a Reply