Problem
While Gravity Forms has had support for building inline forms since version 2.5, it hasn’t always been as easy as it is now in version 2.8+. Especially for multi-column inline forms.
Creating inline forms in version 2.5 requires using CSS, and in 2.6, things got more accessible when the submit button settings were moved back into the form builder.
However, some people are unaware that building a multi-column inline form is drag-and-drop easy with Gravity Forms.
Solution
To create your inline form, follow the steps below.
There is a slight limitation here: Gravity Forms only supports four columns out of the box. So you can only use three fields, and the button will count as the fourth column.
- Add your desired fields.
- Move them side by side in the desired order.
- Change the button location to ‘end of the last row‘.
- Embed your form.
Here is a quick demonstration of how to complete the steps above.
Take a look at this tutorial if you want to see how to create an inline form with a consent field.
Taking Your Inline Form One Step Further
You might have noticed that the form did not look all that symmetrical or nicely designed in the video above. Here is a quick snapshot.
This is what it looks like when using the Gravity Forms 2.5 Theme, which is fine if you prefer to use it. It will just require a little CSS to improve the style.
It wouldn’t take much; you could just adjust the button padding:
/* replace 624 with your form ID */
#gform_submit_button_624 {
padding: 6px 0;
}
If you instead use the default Orbital Theme, the form will look this way once it is embedded.
Need More Help?
If you still need help, please use the comments or chat options below.
You can also open a support ticket here if you have an active Gravity Forms license.
