How do I create a multi page form?

Last updated Jan 14 2018

What is a Multi Page Form? 
The multi page form, contrary to the Single page form, is a form that is broken down into a few pages. The form filler has to go through
the pages until he reaches the "Finish" button on the last page - only then can he submit the form.
In order to create a multi page form with FormTitan you will need to use the Page Break element, which resides inside the "Elements" panel.
Read more about the Multi Page Form.

Following is a step by step instruction of how to create a multi page form:

1- Enter the form builder

2-

Go to the "Element" panel > "Widgets" category 
Drag a PageBreak element - this will add a special panel, containing a pager and advancement buttons (Back, Next and finish) that allow the user to go back and forth between the form pages.
This panel will be placed in the bottom left corner of your canvas and its position will be fixed - You will not be able to drag it freely inside your form, instead you will get 2 positioning options: Either it is stuck to bottom of screen Or it is placed at the bottom of the page.


If you wish to have your back/next buttons placed somewhere else in your form - this can be done, but you will need to hide your default page break strip and use spacial 'Go Prev' and 'Go Next' button elements instead. 
Read about how to use 'Go Prev' and 'Go Next' buttons.


This is how it looks on canvas:

3-

The page break element has five parts to it, as well as the element as a unit. You can change the style of each part by going to:
"Properties" panel > "Element" category > "Style" tab  > choose part in  "Apply style to" listbox > and choosing the part.
When you choose each part you will be able to edit its style in the same categories as always: Font, Background, Size & Position, Margin, Padding, Alignment, Border and CSS class.
* Please notice that there is a new category called  'Specific page size', which will enable you to set a different width & height for each page in your multi-page form. 
Read more about the 'Specifc page size'


4- 

 


You can also add a header and a footer that will be displayed on all the pages by going to
Properties" panel > "Element" category > "Settings" tab  > Advanced > Edit Header / Edit Footer
Press on "Change" button and configure the header or footer in the editor.



For example : set a header. Add a table with 2 cells inside the editor. Place an image in the left cell (a logo) and text in the right cell (Contact Us)


5-

Drag an element from this "Elements" panel (on the left) and drop it on the canvas. For example: drag a textbox for "Name field and another textbox for "Company" field

6-

Now add another page:
Properties" panel > "Element" category > "Settings" tab  > Basic > Press on "Add" button
The second page will open on canvas - it will be empty except for the header and pagebreak that appear in all pages.

7-

In Page 2 - Drag an image element and an email element


You can move between the pages by using the "Current page" listbox.
Properties" panel > "Element" category > "Settings" tab  > Basic > Current page

8-

Save your form This is what it will look like when published:
 
 
 



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