Creating a Form with an Inline Submit Button in Gravity Forms 2.5

If you’re a long time user of Gravity Forms, you know that pre version 2.5 Gravity Forms relied heavily on CSS Ready Classes. However, with the release of 2.5 and the new drag and drop form builder, many of those CSS Ready classes have been deprecated (they no longer work).

If you wanted to create a form with an inline submit button in version 2.4, you would use the gf_simple_horizontal class.

The semi-good news is, the gf_simple_horizontal ready class has NOT been deprecated and can still be used in Gravity Forms version 2.5.

That said, the not so good news, you might not like how your forms look when using the gf_simple_horizontal class in to 2.5.

I don’t believe they spent a lot of time ensuring this class would still work well with forms in 2.5. It appears to be more of an after thought. Realizing that they cant eliminate all of these classes without having an alternative solution.

But there is a solution for forms built in 2.5, just keep reading!

Let’s Build a Form with an Inline Submit Button

I want to be clear with you upfront, this solution is also not perfect, but it works better than the gf_simple_horizontal class in version 2.5.

Gravity Forms has a doc with the necessary code and instructions here: Adding an inline Submit Button in Gravity Forms 2.5

However, I’m still going to walk you through it.

Step 1: Building the Form

1. Go to Forms > New Form
2. Give your form a Title & click “Create Form”

3. Add the following fields:
   1. Name Field
   2. Email Field
   3. HTML Field

4. Configure each field (shown in the video below)
5. Copy the code below and past it into the HTML field content area
6. Change the form ID in the code to your forms ID (shown in the video)
7. Click “Save Form”
8. Click “Preview” to check your form

Step 2: Add the Form to a Page

There are different was of embedding your form, however I am going to show you how to do this using the Block Editor.

We also have tutorials on how to embed the form using the Elementor, Divi, or Beaver Builder page builders, in case you need a little extra help.

1. Go to Pages
2. Add New or Edit an existing page
3. Click the block + symbol
4. Search for Gravity Forms
5. Click the Gravity Forms block
6. Use the dropdown to add your form
7. Click Publish or Update

Step 3: Modifying the Form

Now that you have the form added to your page you can see how it looks from the frontend. This is important because in some cases your theme style is going to mess up the way the form looks and you will need to make some modifications to the code we added in step one.

Unlike the other videos, this video does have audio so that I can better explain how to modify the form and why you might need to.

Sample Form

The Wrap Up

As you can see adding an inline submit in Gravity Forms 2.5 is still relatively easy, and works out pretty nicely.

I do want to point out one more point about the gf_simple_horizontal class, there appears to be a bug (as of this writing) that keeps the style enabled on mobile. The fields and buttons should stack like you saw in the video above, however that is not the case. This just means your fields are really tiny on a mobile device with a smaller screen.

I would suggest that you adopt the method taught in this tutorial, for now. There might be a day when you can add the button to the form from the form editor, but we will see.