Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Resources
    • Docs & Support
    • Blog
    • Community
  • Solutions
    • Web Applications
    • Calculators
    • Surveys
    • Directories
    • Payments
    • Contact forms
  • Login
  • Get Formidable Forms

Formidable Team / Last Updated May 11, 2022

How to Create an Inline Form in WordPress

An inline form can be a simple way to get great, professional looking results. Learn how to create a horizontal layout!

how to create an inline form in WordPress


Online forms are a great way to collect customer information and get more leads. However, it isn't always easy to create attractive and professional forms that encourage conversions.

Fortunately, by opting for an inline form layout, you can improve your designs and make them more user-friendly. A tool such as our own Formidable Forms layout builder can help you to do this quickly and easily.

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!

In this article, we’ll cover why you might want to use inline forms on your website. We’ll also take a look at how you can create them in just two steps. Let’s get started!

Why you might want to use an inline form

If you’re asking ‘what is an inline form?’, you’re in the right place. An inline form contains elements that are all neatly aligned with each other. In other words, they're 'in line'! Basically, you get a contact form with two fields on same line.

Inline formatting can help improve the flow of your forms and get higher form conversion rates. When using an inline layout, your form labels will appear next to each field instead of stacked on top. Similarly, an inline submit button will be placed next to the relevant field instead of beneath it.

This can be a great design choice for certain features like datepicker calendars. For example, to view dates in a non-inline calendar, users will have to select the field before they can choose the date. However, an inline calendar will automatically display these dates:

An inline calendar example.

To beginners, this kind of formatting may look complicated. However, it's actually easier than you might think to apply it to your own forms. With the help of Formidable Forms, you can add inline forms to your WordPress website faster and easier than ever before.

How to create an inline form (2 steps)

Before you begin this walkthrough, be sure to install and activate Formidable Forms on your WordPress site.

Step 1: Use the layout builder to create inline fields

First, you’ll need to build your basic form. You can start by going to Formidable → Forms → Add New and choosing a Blank Form. Alternatively, you can start with a template:

A few template choice options for a new form.

When you create your form, you’ll then be presented with our editing interface. Click to add a Name field and an Email field. By default, the fields will be stacked instead of inline.

Next, we’ll add inline formatting. Mouse over the field you want to edit. Then click and hold the directional arrows:

The symbol to drag-and-drop fields into a row to get a contact form with two fields on same line

Now you can simply drag the Email field next to the Name field:

inline form builder example for contact form two fields on same line

Repeat these steps for each field that you'd like to make inline.

Now, to make room for the submit button, we'll need to size down the fields so they don't take up the whole row in our 12 column grid. To do so, hover over the row and click the layout icon right above the row. Then, click Custom Layout:

The field proportion options for each column.

We'll change each field from 4 to 3. That will leave 3 for the submit button too.

Step 2: Change your button settings

Next, you can also make an inline submit button. This can make a form more compact, so it fits in small spaces and is easier for your users to fill out.

While on the form builder screen from the last step, click on the Settings tab and select Stylings & Buttons.

Under Buttons, find the Submit Button Alignment option. Choose Inline from the drop-down menu:

The settings to make a Submit button for an inline form.

Afterward, save your work. You can then preview your form or make other adjustments as necessary.

For example, the newly inline email field will look like this for our final contact form:

An example of a contact page inline form using an inline email field and inline submit button

These are the formatting basics. However, there's a lot of potential! You can add inline formatting to many advanced fields. Consider using this feature along with other formatting tools like a slide-in contact form.

Here's another inline form example used as an email subscription form.

Subscription form with email and submit box inline for a horizontal layout

The above example takes a couple extra tweaks. We set the button width to 100% on the Formidable → Styling page.

Then, in the Settings → Customize HTML → Submit Button box for the form, we replaced class="frm_submit" with class="frm_submit frm6". The frm6 class makes the button take 6 of the 12 columns in the form grid layout. Since Formidable supports HTML changes, you can really create whatever vertical or horizontal layout you need.

Make HTML changes in the form

You can use features like these to create a complex form that meets your exact needs. The form can be even more compact if you use the placeholder option and hide the labels.

Wrapping up inline forms

If you want your website's forms to attract attention and drive conversions, they have to look good and be easy to use. Fortunately, Formidable Forms makes it easy to create inline forms.

To do this, you can:

  1. Use our drag-and-drop layout builder to add fields in a row.
  2. Adjust your settings to generate an inline submit button.

Inline formatting is just the beginning of what Formidable Forms can help you achieve. Check out some of our other powerful features today!

Read more about form design in WordPress

  • How to Change the WordPress Block Background Color How To Change the WordPress Block Background Color
    Read More
    How to Change Contact Form Button Color in WordPress
    Read More
    Conversational Form Design Conversational Form Design: Everything You Need to Know
    Read More

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Comments

  1. [email protected] says

    September 15, 2021 at 10:21 am

    Thanks! This is a very helpful tutorial!

    Reply
  2. milkboy31 says

    September 27, 2021 at 10:04 am

    Wow! We've been using CSS to inline fields for years.. this is a game changer with the drag-and-drop form builder! Nice work!

    Reply
    • srwells says

      September 27, 2021 at 11:21 am

      Thanks for the kind words. We are really excited about this new feature. It makes building forms so much faster and easier. Glad you like it as well.

      Reply
  3. Christina Nelson says

    September 27, 2021 at 7:00 pm

    Coincidentally, FF Pro Support had been helping me on an inline form I have on a client site 🙂 This will be great to peruse to tweak the form. Thanks for the 'How to' article on this.

    Reply
  4. trishacupra says

    September 29, 2021 at 12:41 am

    I love how easy it is to do this with Formidable.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Get Email Updates

Popular Resources

    • How to Create a Searchable Database on a WordPress Site
    • Create a WordPress Custom Calculator: Easy, Powerful Results
    • How to Create a Fitness Tracker in WordPress
    • Formidable Views: The Best WordPress Custom Application Plugin
    • How To Require Email To Download Files in WordPress
    • How to Create Conditional Drop Down Lists in WordPress Forms
    • Best Gravity Forms Alternative for WordPress: Formidable Forms vs. Gravity Forms
    • How to Make a Quiz in WordPress
    • WPForms Alternative: Formidable Forms vs. WPForms Compared

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Forms
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directories
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • WP Tasty
  • Nutrifox

Copyright © 2023 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews