How to Display Your Form in a Single Line in WordPress in Easy Steps

Hey, friends today I will tell you How to Display Your Form in a Single Line in WordPress in Easy Steps. so let get started with our today WordPress guide. Getting different problems is altogether gives a very different experience. today the WordPress guide I am going to share with you is How to Display Your Form in a Single Line in WordPress in Easy Steps.

How to Display Your Form in a Single Line in WordPress in Easy Steps

Do you want your form to be displayed in a single line? Single line forms allow you to be more creative with form placement. This means you can easily add forms to high-traffic areas of your website to increase conversions.

We’ll show you how to easily display your form in a single line in WordPress in this article.

Before starting I know you might also like me other WordPress related guides

Why Display a Single Line Form in WordPress?

Single line forms give you greater adaptability while picking where to put your forms. Since this style of form is just a single line, they don’t occupy a lot of room and can without much of a stretch be incorporated with your current substance.

Email pamphlet joins forms are regularly shown in a single line above or underneath the blog entry content. Single-line forms likewise function admirably on presentation pages, contact pages, and other significant pages on your site.

Past creating more supporters and leads, you can transform any sort of form into a single line form. For instance, it may appear to be legit to show your contact form in a single line to save space on the page.

That being said, we should tell you the best way to show a single line form on your WordPress site.

Creating Your Single Line Form in WordPress

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

WPForms

You can utilize the simplified manufacturer to rapidly make any form for your site. In addition, it incorporates with well known email showcasing devices so you can undoubtedly develop your email list.

There is a top notch adaptation of the module with a lot more highlights, yet we’ll involve the light form for this instructional exercise since it allows you to make a straightforward form and associate it to Constant Contact for lead age.

First thing you really want to do is introduce and initiate the module. For additional subtleties, see our novice’s aide on the most proficient method to introduce a WordPress module.

From that point onward, go to WPForms » Add New in your WordPress administrator board and give your form a name. Then, at that point, you want to pick your form format.

We’ll choose the ‘Pick In Form’ format. Just drift over the format and snap the ‘Utilization Template’ button.

Select form template

This brings up the drag and drop form builder.

You’ll see that the template we chose automatically includes the name and email fields and a submit button.

WPForms drag and drop form builder

Every field 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 their order.

WPForms form editor panel

Once you’re done customizing 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 form advanced settings

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

This will apply that CSS class to the form. Since WPForms includes styling for the ‘inline-fields’ class, it will automatically make your entire form display nicely 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 Label’ toggle to turn it on.

Hide form labels toggle

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

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

This tells your users what each form field is for. 

Add form placeholder text

Once you’re done customizing your form, make sure to click the ‘Save’ button to save your changes.  

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

Adding Your Single Line Form to Your WordPress Website

Presently, it’s an ideal opportunity to add your single line form to your site. You can add it to any page, post, or gadget region.

We will add it to a current page, yet the cycle will be comparable in the event that you’re adding it to one more space of your WordPress blog.

Basically open up the page where you need the single line form to show, click the ‘In addition to’ add block symbol, and quest 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 choose the single line form you created earlier.

Select single line form from drop down

When you pick your form, the module will stack a review of your form inside the substance manager. Then, at that point, click the ‘Update’ or ‘Distribute’ button to make your new form live.

Now, you can visit your 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.

Leave a Comment