How to use the Carousel to create a multi-page form?
From version 5.2 it is possible to use the Carousel as a form. This makes it easy to create multi-page forms.
In this tutorial we will use the Carousel to create a multi-page form with wizard-like layout.
Note: Before starting with this tutorial, make sure you have read the other Carousel related tutorials to understand the basics.
Add the Carousel object to the page.
This demo uses external buttons to control the Carousel slide, so first lets disable the built-in navigation and pagination.
In the properties of the Carousel, check 'Enable Form' so it behaves like a form. The settings are the same as a standard form so we will not get into details about that. The focus of this tutorial is on the multi-page layout of the form.
Add 3 buttons below the Carousel to control the slides: Previous, Next and Submit (or Finish).
Add an event to the Previous button: onclick -> Slideshow Previous -> Target: Carousel1
Add an event to the Next button: onclick -> Slideshow Next -> Target: Carousel1
This makes the button a submit button for the Carousel/Form without being part of Carousel itself.
To give the buttons a different appearance for when they are enabled/disabled, we can use Styles.
Open the Style Manager and create two new styles: btnEnabled, btnDisabled.
Style name: btnEnabled
Style name: bntDisabled
custom style: cursor: not-allowed; pointer-events: none;
In the "Style' section of the buttons select 'btnDisabled' for all 3 buttons.
Next we will dynamically enable/disable the buttons based on the current slide using Carousel Events.
activate - First slide
bntNext: SetStyle -> btnEnabled
btnPrevious and btnSubmit: SetStyle -> btnDisabled
activate - Second slide
bntNext and btnPrevious: SetStyle -> btnEnabled
bntSubmit: SetStyle -> btnDisabled
activate - Third slide
btnPrevious and btnSubmit: SetStyle -> btnEnabled
bntNext: SetStyle -> btnDisabled
Finally we have to add some form controls for the user input, like editboxes, checkboxes etc.
For this demo we just added some random input fields...