How to Make a Single-Line WordPress Form ( Three Steps )

Are you on the lookout for a fast and easy way to create a single-line WordPress form for your website?  If so, tell that gate-keeping web developer of yours to shove it and put away that CSS tutorial because I am here to show you that creating a single-line WordPress form is easier than you think.

Single-line, single-row, or horizontal forms, whatever you want to call them, gives your business the competitive “lead conversion” edge.  Why?  Because fewer fields drive conversion and take up less space.  Giving you more freedom to add the single-line WordPress form anywhere you want on your website without affecting your lead conversion.

Our Layout and Styles add-on comes with the brilliant ability to drag and drop fields into place.  This means you can create forms that appear vertical as well as horizontal.  You can even adjust the width of your form fields using drag-and-drop too.  This tutorial will show you how to create a single-line WordPress form in only three steps.

So let’s find out how you can start maximizing your leads with this easy-to-build single-line WordPress form.

Table of Contents

Step 1.  Install and activate Ninja Forms and the Layout and Styles add-on
Step 2: Create your single-line WordPress form with the Layout and Styles drag-and-drop feature
Step 3.  Add the horizontal single-line WordPress form to your WordPress website.

Step 1.  Install and activate Ninja Forms & the Layout and Styles add-on

First, install the Ninja Forms free core plugin by navigating to your WordPress Admin Menu, clicking Plugins > Add New.  Locate the Search Plugins field, type “Ninja Forms,” then click the Install Now button and Activate.

Otherwise, you can upload the plugin by navigating to Plugins > Add New > Upload Plugin  > Choose File.

Next, download the Layout and Styles add-on from your Ninja Forms account, and upload it to Plugins.  For a complete overview, see our installation guide for step-by-step instructions.  Not sure how to activate your license?  Review our licensing guide for a quick refresher.

Step 2: Use the drag and drop tool to create a single-line WordPress form

First, navigate to Ninja Forms > Add New to access the form templates.  Choose the Blank Form template.

Next, you should see an empty form template with the text, ‘Add form fields.  Look for the Email field under the User Information.  You can either click on the Email field or click and drag it to add it to the form template.

Next, add the Submit field located under Common Fields.  Click and hold down on the field to drag it onto your form.  As you do, you will notice that two columns appear to the right and left of the Email field.  Drag the Submit field to the left column until it turns green, and then let go.

That’s it!  See, I told you it was easy.

How do I align the submit button with the email field?

You may have noticed that the Email and Submit fields are not quite aligned.  Let’s solve that.

First, we will need to hide the Email field label.  To do so, open the Advanced dropdown and select Hidden.  If you don’t see this option available, go back to your Ninja Form settings and enable Dev Mode.

After that, open the Display dropdown.  Look for the Placeholder field and type “Email” or “Email Address.” This will provide a visible label to indicate what the field is for.

Tada!  Your form fields are now flush with one another.

How to customize the Submit button if it looks gross

The background color on the submit button isn’t a good look.  It doesn’t stand out, and it just feels kind of blah.  So let’s fix it.  First, head back to the form builder and click on the Submit field to open the field settings.  Locate the Styles dropdown and open it.

Look for the section titled ‘Element Styles’.  Find Background Color and click the Select A Color to bring up the color picker.  From here you can choose any color you want.  Save and Publish.

Your Submit button should now appear with the chosen color.  Are you looking for something a little more flashy?  Consider adding a gradient to your Submit button;  In this quick tutorial, we show you how to add custom CSS to create a sparkly call to action.

Step 3.  Add the single-line WordPress form to your WordPress website.

Now that you have finished building your single-line WordPress form, the final step is to add the WordPress form to your website.  You can do this with either WordPress form shortcode or block.

Shortcode Method

To add the form via shortcode, navigate to Ninja Forms > Dashboard.   The dashboard is where you will find a list of all your forms.  Locate the form, and copy the shortcode ( command + c / ctrl + c).

To apply the shortcode, open up the page or post you wish to add the form to and paste the shortcode into the text editor.  You can add the shortcode to a shortcode block, but it’s not necessary our shortcode will work in the paragraph block just fine.

The form won’t be visible using the shortcode, so you need to update your page/post and preview to view the WordPress form.

Block Method

Within the page or post, click on the Block Inserter icon and search for Ninja Forms.  Click on the Ninja Form icon and then choose your job application form from the Select Form dropdown.  If you do it right, you will see a form preview.   Update the page/post, and that’s it!  You are ready to start collecting job applications.

You’re no dummy; know that you know how to use drag-and-drop to create a single-line WordPress form.

Now that you know how simple it is to create a single-line form with our drag-and-drop tool from our Layout and Styles add-on, why don’t you give it a try?

Unlike our competitors, you can get the Layout and Styles add-on without a membership.  If you need more than one license, we’ve got you covered.  All of our add-ons have 1,5, or 20-site license options.  A 14-day money-back guarantee comes included with all of our products, so give Layout and Styles a try and if you don’t like you can ask for a refund, but something tells me you won’t.

Still not convinced?  Learn how to create row and column layouts just by drag-and-dropping—looking for some quick form styling tips?  Learn how to turn your ugly duckling into a beautiful swan with these easy examples—frustrated by fonts?  Learn how to customize form fonts with this easy-to-follow guide.