Display Page Navigation Buttons Inline With Fields

Displays a form page’s Previous/Next navigation buttons inline with the last row of fields, rather than stacked below them.

Instructions

  1. Install Code Chest: https://gravitywiz.com/gravity-forms-code-chest/

  2. Add this CSS to the form via Code Chest.

  3. Add the button-inline class to the Next button.

Code

Filename: gw-display-navigation-buttons-inline.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/**
 * Gravity Wiz // Gravity Forms // Display Page Navigation Buttons Inline With Fields
 * https://gravitywiz.com/
 *
 * Displays a form page's Previous/Next navigation buttons inline with the
 * last row of fields, rather than stacked below them.
 *
 * Instructions:
 *
 * 1. Install Code Chest: https://gravitywiz.com/gravity-forms-code-chest/
 *
 * 2. Add this CSS to the form via Code Chest.
 *
 * 3. Add the `button-inline` class to the Next button.
 */
.gform_page.button-inline {
	display: flex;
	align-items: flex-end;
	gap: 20px;
}

.gform_page.button-inline .gform_page_fields {
	flex: 1;
}

.gform_page.button-inline .gform_page_footer {
	flex-shrink: 0;
	margin-top: 0 !important;
	padding-bottom: 0;
}

Leave a Reply

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

  • Trouble installing this snippet? See our troubleshooting tips.
  • Need to include code? Create a gist and link to it in your comment.
  • Reporting a bug? Provide a URL where this issue can be recreated.

By commenting, I understand that I may receive emails related to Gravity Wiz and can unsubscribe at any time.