The Ultimate Toolbox for creating amazing web sites!
How to use the Carousel to create a multi-page form?
From version 12.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.
Step 3 Add 3 buttons below the Carousel to control the slides: Previous, Next and Submit (or Finish).
Step 4 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.
Step 1 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.
Step 2 In the properties of the Carousel, check 'Enable Form' so it behaves like a form. In the Settings you can change the form's properties. These are the same settings 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.
Step 5 In the "Style' section of the buttons select 'btnDisabled' for all 3 buttons.
Step 7 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...
Step 6 Next we will dynamically enable/disable the buttons based on the current slide using Carousel Events.
Add an event to the Next button: onclick -> Slideshow Next -> Target: Carousel1
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