How to use the Go Prev / Go Next buttons?

Last updated Jan 05 2018
Giving the page break element more flexibility. 

Before talking about these buttons we will need to explain something about the page break. And what the Go prev / go next are for.

In order to create a multi page form you need to use a page break element. This element allows you to  break your forms into pages. Once you drag it onto your canvas a panel will appear at the bottom of your form. This panel will appear in every page you add to your form and will display a pager - to show the user on which page he is on. In addition this strip contains back/next/finish buttons to allow the user to go move from page to page.

The position of the page break panel is fixed. It can be either stuck to the bottom of screen Or it can be stuck to the bottom of the page. You can of course control the alignment of this strip (left/center/right) and add margins/paddings as well as control its other styles. However, some users want to be able to place the buttons freely in their form and not be restricted - this is where the ‘Go prev’ ‘Go next’ buttons come in.

So how do you use these buttons? Follow the next example to see how easy it is:
1- Create a new form from blank
2- delete the default "Submit" button - you will not be needing it.

2- Drag a textbox (so you will have some content in your pages)


3- Drag a page break element

You will immediately see the page break panel added at the bottom of the canvas.


4- Once the page break element is selected on canvas add a new page
‘Properties’ panel > ‘element’ > ‘settings’ > Press on "Add" button
You will now be located on page 2 and will be able to go back and forth between the pages using the bottom page break panel.


5- Drag a numeric element in the second page. - again, so you will have content in the page
6- Now this is where the prev/next buttons come in:
- Go back to page 1 (using the default page break panel).
Drag a button element into this page.


- Change its type to to “Go Next” and its label to “Next”.


- Now move to Page 2 (using the default page break panel).
- Drag another button element and change its type to “Go Prev” and its label to “Back”.

- Since the second page in this example is the last page, we will need to add a "Finish" button to it. 
So drag another button and change its label to 'Finish'. Leave its type as is "Submit".


These buttons can be placed anywhere in your form.

7- All that's left is to hide the default page break panel (which is no longer needed).
Go to 'Properties panel' > 'Element' > 'Style' > turn on the 'Hide per device' checkbox.

CommentsLogin Required
Didn’t find what you were looking for?
Try the following for assistance or Use the Search box.