<layout:stepper> </...>

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

Content

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

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>