Gravity Forms inline submit button with consent field

Since Gravity Forms version 2.6, the submit button and settings were moved into the form editor. If you have a simple form with one or two fields, you can easily create an inline form as demonstrated in this tutorial, Creating a Form with an Inline Submit Button in Gravity Forms 2.6.

However, if you want to add a consent field, below the email field, and the submit button, like the example below, you’re going to need a little CSS to make that happen.

Step 1 – Building the form

In this step, I will show you how to layout the fields in your form and the settings you need to configure.

1. Add the following fields to your form
   • Email
   • Checkbox
2. Set the submit button location to End of the last row
3. Save your form

Step 2 – Adding the CSS

I have provided the CSS you will need below, however, you will need to make a simple modification to the code for it to work with your form.

1. Copy the CSS below
2. Add it to Additional CSS within the Customizer
   • Go to Appearance > Customize > Additional CSS
3. Change the 1 in the code snippet with your forms ID number
4. Change the 4 with the Email field ID number
5. Change the 3 with the Checkbox field ID number

//Code snippet courtesy of Josh from GravityHopper.

div#gform_fields_1 {
    grid-template-columns: repeat(2,1fr);
    grid-template-areas: "gfemail gfsubmit" "gfcheck gfcheck";
}
div#gform_fields_1 #field_1_4 {
    grid-area: gfemail;
}
div#gform_fields_1 #field_submit {
    grid-area: gfsubmit;
}
div#gform_fields_1 #field_1_3 {
    grid-area: gfcheck;
}

I’ve demonstrated these steps in this video:

The Wrap Up

That’s it, just like that you have a beautiful inline form with a content field. Gravity Forms is a power form builder with a ton of potential.

You can also do this using the solution we wrote about in this tutorial, Creating a Form with an Inline Submit Button in Gravity Forms 2.5, but it does require that you enable the legacy markup feature and use the old CSS Ready Classes.

As always, if you run into any issues with the solution demonstrated in this tutorial, be sure to use the comments below.