Saturday, May 21st, 2022

How to Display Your Form in a Single Line in WordPress (The Easy Way)

Do you want to display your form in a single line?

Single line forms give you more flexibility with form placement. This means you can easily add forms to high-traffic areas of your site and improve your conversions.

In this article, we will show you how to easily display your form in a single line in WordPress.

Why Display Single Line Form in WordPress?

Single row forms give you more flexibility when choosing where to place your forms. Since this style of form is only one line, they don’t take up much space and can be easily integrated with your existing content.

Email newsletter sign up forms are often displayed in a row above or below the blog post content. Single-line forms also work well on landing pages, contact pages, and other important pages on your website.

Apart from generating more subscribers and leads, you can convert any type of form into a single line form. For example, it makes sense to display your contact form in one line to save space on the page.

That being said, let us show you how to display a single line form on your WordPress website.

Creating Your Single Line Form in WordPress

For this tutorial, we will be using the WPForms plugin to create a single line form. It is the best lead generation plugin for WordPress used by over 5 million websites.


You can use the drag and drop builder to quickly create any form for your site. Plus, it integrates with popular email marketing tools so that you can easily grow your email list.

There is a premium version of the plugin with many more features, but we will be using the lite version for this tutorial as it lets you create a simple form and connect it to Constant Contact for lead generation.

The first thing you need to do is to install and activate the plugin. For more details, check out our beginners guide on how to install a WordPress plugin.

After that, go to WPForms » Add New In your WordPress admin panel and give a name to your form. Then, you need to choose your form template.

We will select the ‘Opt-in Form’ template. Simply hover over the template and click the ‘Use Template’ button.

Select form template

This brings up the drag and drop form builder.

You’ll notice that the template we selected automatically includes name and email fields and submit buttons.

Drag and Drop WPForms Form Builder

Each of the fields can be edited by clicking on them and making changes in the left-hand column.

You can also drag and drop the fields to change the order of them.

WPForms create editor panel

Once you’ve customized the fields, you can display your form in a single line.

To do this, go to Settings » General And then click on the ‘Advanced’ drop down tab.

go to advanced setting

Next, type ‘inline-fields’ (without the quotes) in the ‘Form CSS Class’ box.

This will apply that CSS class to the form. Since WPForms includes styling for the ‘inline-field’ class, it will automatically display your entire form neatly on a single line.

add inline css class

After that, you can make your form even smaller by hiding the field labels.

Simply click on the ‘Fields’ navigation option, then select the ‘Advanced’ menu option, and click the ‘Hide Labels’ toggle to toggle it on.

Toggle hide form labels

Then, you need to do the same thing for all the form field labels.

After that, in the same ‘Advanced’ section, you can enter text in the ‘Placeholder’ box.

It tells your users what each form field is for.

Add form placeholder text

Once you have customized your form, be sure to click the ‘Save’ button to save your changes.

If you are using your form to generate leads, you can connect your form to your email marketing provider. For more details, check out our guide on how to create an email newsletter the right way.

Adding Your Single Line Form to Your WordPress Website

Now, it’s time to add your single line form to your website. You can add it to any page, post or widget area.

We are going to add this to an existing page, but if you are adding it to any other area of ​​your WordPress blog then the process will be similar.

Simply open the page where you want the single line form to be displayed, click the ‘plus’ ad block icon, and search for ‘WPForms’.

Add WPForms Block

Then, click on the ‘WPForms’ block to add it to your site.

This brings up a drop down box to select the single line form you created earlier.

Select Single Line Form from the drop down

Once you have selected your form, the plugin will load a preview of your form inside the content editor. Then, click on the ‘Update’ or ‘Publish’ button to make your new form live.

Now, you can visit their website to see your new form in action.

single line form example

We hope this article helped you learn how to display your form in a single line in WordPress. You’ll want to check out our guide on how to get a free email domain, and our expert picks of the best virtual business phone number apps with free options.

If you liked this article, please subscribe to our YouTube channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

How to Display Your Form in Single Line in WordPress (Easy Way) The post first appeared on WPBeginner.

Source link