Summary on mobile

Updated 16 September 2026

What is it?

On small screens there is no room for a summary next to the form. Since v2.2 you can choose how the side summary behaves on mobile devices (screens up to 768px wide):

• Bar at the bottom of the screen
  A small bar stays at the bottom of the screen while the user fills in the form. It shows the total of the form, or the number of answered fields when the form has no products, and you choose what else it says. Tapping the bar opens the summary in a sheet that slides up from the bottom. This is the default for new forms.
• Above the submit button
  The whole summary is placed inside the form, just above the submit button. This is how it worked before v2.2 and existing forms keep this behaviour.

How to use it?

Open the Live Summary settings of your form. On the General tab, in the Side summary panel, pick one of the two options under “Summary on mobile” and save the form settings. The setting only shows when the side summary is turned on.

What the bar says

Right below “Summary on mobile” you find the Bar text setting. It only shows when the bar is selected. Pick what the bar should say:

• Total and items
  The total and the number of items, e.g. “Total $24.00 · 3 items · View summary”. This is the default.
• Total
  Just the total, e.g. “Total $24.00 · View summary”.
• Total and answered fields
  The total and how far the user got, e.g. “Total $24.00 · 3 of 12 answered · View summary”.
• “View summary” only
  No total and no numbers, only the “View summary” text and the arrow. Handy when the price is not the point of your form, for example a quote request.

The total is there from the start, so before anything is selected the bar says “Total $0.00”. It uses the total label of your form. A form without products (or other pricing fields) has no total to show. With one of the three total options, the bar then shows “X of Y answered” in its place.

The “View summary” text

Don’t need it? Turn off “Show the View summary text” and the bar only shows the total and the arrow. With “View summary” only this switch is hidden, otherwise the bar would be empty.

Want different wording for one form? Type it in the “View summary” wording field, for example “Review your order”. Leave the field empty to use the default text. The default wording of the bar can be translated or changed for all forms with the gotrls_default_labels hook, these are the keys:

add_filter( 'gotrls_default_labels', function( $labels ) {
	$labels['mobile_bar_view']     = 'Bekijk overzicht';        // "View summary"
	$labels['mobile_bar_item']     = '%d item';                 // Keep the %d, it becomes the number
	$labels['mobile_bar_items']    = '%d items';
	$labels['mobile_bar_answered'] = '%1$d van %2$d ingevuld';  // "%1$d of %2$d answered"
	return $labels;
} );

Developers can change the complete text with the JavaScript filter gotrls_mobile_bar_text.

Style the bar

Go to the Style tab and open the Mobile bar panel. You only see this panel when “Summary on mobile” is set to the bar. These are the settings:

• Bar background colour
  The background of the bar.
• Bar text colour
  The colour of the text and the arrow. With “inherit” the bar uses the text colour of the page around your form.
• Bar border colour
  The thin line along the top of the bar. Use “transparent” if you don’t want a line.
• Bar padding
  The space inside the bar. The top and bottom padding decide how tall the bar is.
• Sheet background colour
  The background of the sheet that slides up with the summary when the bar is tapped.

The style presets style the bar as well: Dark gives you a dark bar and sheet, Receipt a cream one. A custom preset keeps your bar settings too. Just like the other colour settings, you can also type a CSS value such as var(--gf-color-primary).

The bar sits on top of the page, above sticky headers of most themes and below the WordPress admin bar. Is it hidden behind something else, like a chat button? Raise it with this CSS, for example in Appearance > Customize > Additional CSS:

/* Put the mobile bar above elements with a higher z-index (the default is 99990) */
body {
	--gotrls-mobile-z: 1000000;
}