<layout:stepper>
AJAX
ajax:delayedload ajax:event ajax:navigation ajax:region
Data
data:calendar data:column data:eventrepeater data:postrepeater data:productbrandrepeater data:productcategoryrepeater data:productrepeater data:repeater data:table data:template data:tree
Forms
forms:address forms:captcha forms:checkbox forms:checkboxgroup forms:codeeditor forms:combobox forms:datepicker forms:dialogbox forms:editbox forms:fileupload forms:form forms:hidden forms:money forms:officeuseregion forms:option forms:password forms:paymentmethod forms:radiobutton forms:radiobuttongroup forms:row forms:searchbox forms:signature forms:slider forms:spinbox forms:submitbutton forms:submitimage forms:submitlink forms:successcontent forms:textarea forms:timepicker
Layout
layout:gallery layout:productgallery layout:rotator layout:stepper
DESCRIPTION
ATTRIBUTES
alignItems
id
linearProgression
transition
validateForms
EXAMPLES
Form in Stepper Layout
layout:stepperpanel layout:tablist layout:tablistitem
Logic
logic:dependency logic:else logic:if logic:include logic:parse logic:variable
Navigation
navigation:breadcrumbs navigation:item navigation:primary navigation:secondary
Personalisation
personalisation:firstname personalisation:fullname personalisation:lastname personalisation:other
Standard
standard:embed standard:icon standard:image standard:link standard:script standard:tooltip standard:video
Templates
templates:button templates:card templates:column templates:fancybox templates:faq templates:flexlayout templates:header templates:row templates:section templates:styles templates:teammember templates:testimonial
Regions
regions:content regions:contentadditional regions:security regions:togglable
Third Party
thirdparty:googlemap thirdparty:googlemapmarker

`<layout:stepper>` </...>

Define content as a series of 'panels' that that can be stepped through.

Content

<layout:stepperpanel>
At least 1 Stepper Panel.

Attributes

- `alignItems`
string
Align Items

Vertical alignment of rotator items where items are of different heights. Follows CSS spec for Flex containers in the row direction.
Possible values are flex-start and flex-end

Default = stretch
- `id`
string
Give this control a unique id. Can be accessed in the client DOM (eg, document.getElementById('myid') or in the server DOM using [? $myid ?] or [? $('myid') ?]).
- `linearProgression`
bool
When true, requires validation before moving to incomplete panels
- `transition`
string
Rotator transition

Possible values are instant, fade, and slide

Default = slide
- `validateForms`
string
Whether to validate on change

Examples

Form in Stepper Layout

Adding stepper layout on a sample feedback form.

HTML:

 <forms:form id="feedback_form" recordsubmissions="true" contactmode="store" onsubmitemailsubject="Feedback Form" onsubmitemail="true" method="ajax"> <layout:stepper id="stepper_feedbackform" transition="fade"> <layout:stepperpanel> <forms:row label="First Name"> <forms:editbox id="contact_first_name" validations="mandatory" /> </forms:row> <forms:row label="Last Name"> <forms:editbox id="contact_last_name" validations="mandatory" /> </forms:row> <forms:row label="Email Address"> <forms:editbox id="contact_email" validations="mandatory,email" transformations="tolower" /> </forms:row> <forms:row type="one_column" align="center"> <forms:submitbutton onclick="document.getElementById('stepper_feedbackform_progresslinks').moveNext(); return false;">Next</forms:submitbutton> </forms:row> </layout:stepperpanel> <layout:stepperpanel> <forms:row type="two_column" label="Did you like our service"> <forms:radiobuttongroup name="question1" align="horizontal"> <forms:radiobutton valuechecked="Yes" label="Yes" /><forms:radiobutton valuechecked="No" label="No" /><forms:radiobutton valuechecked="Undecided" label="Undecided" /> </forms:radiobuttongroup> </forms:row> <forms:row type="two_column" label="Did you enjoy the food?"> <forms:radiobuttongroup name="question2" align="horizontal"> <forms:radiobutton valuechecked="Yes" label="Yes" /><forms:radiobutton valuechecked="No" label="No" /><forms:radiobutton valuechecked="Undecided" label="Undecided" /> </forms:radiobuttongroup> </forms:row> <forms:row type="two_column" label="Did you enjoy the venue?"> <forms:radiobuttongroup name="question3" align="horizontal"> <forms:radiobutton valuechecked="Yes" label="Yes" /><forms:radiobutton valuechecked="No" label="No" /><forms:radiobutton valuechecked="Undecided" label="Undecided" /> </forms:radiobuttongroup> </forms:row> <forms:row type="one_column" align="center"> <forms:submitbutton onclick="document.getElementById('stepper_feedbackform_progresslinks').movePrevious(); return false;">Previous</forms:submitbutton> <forms:submitbutton onclick="document.getElementById('stepper_feedbackform_progresslinks').moveNext(); return false;">Next</forms:submitbutton> </forms:row> </layout:stepperpanel> <layout:stepperpanel> <forms:row label="Comments / Suggestions / Feedback" type="one_column"> <forms:textarea id="message" height="150" validations="mandatory" /> </forms:row> <forms:row type="one_column" align="center"> <forms:submitbutton onclick="document.getElementById('stepper_feedbackform_progresslinks').movePrevious(); return false;">Previous</forms:submitbutton> <forms:submitbutton>Submit Feedback</forms:submitbutton> </forms:row> </layout:stepperpanel> </layout:stepper> <forms:successcontent> <p><br /></p> <standard:icon library="fontawesome" size="4" style="width: 131px; height: 131px; margin-left: auto; margin-right: auto; display: block; color: #75d776" iconname="circle-check" iconstyle="regular" /> <p><br /></p> <h2 style="text-align: center;">Thank you! We've received your feedback.</h2> <p style="text-align: center;"> We appreciate your effort and the time you devoted to filling the questionnaire. Your answers will help us improve our service. </p> </forms:successcontent> </forms:form>