[steps] – Steps BBCode

[steps type="progress" bar_color="#1e90ff" bg_color="#ddd" text_color="#fff"]
    [step title="Step 1" next="Next" align="corners"]
        Text
    [/step]
    [step title="Step 2" prev="Previous" next="Next" align="corners"]
        Text
    [/step]
    [step title="Step 3" prev="Previous" next="Submit" align="corners"]
        Text
    [/step]
[/steps]


[steps] attributes:

AttributeExamplesDescription
typetype="progress"
type="steps"
type="none"
The condition to check.
Default: progress.
Optional.
bar_colorbar_color="#1e90ff"
bar_color="dodgerblue"
bar_color="rgba(0, 0, 255, 1)"
Progress bar color (not applied in progress="none").
Default: #1e90ff.
Optional.
bg_colorbg_color="#dddddd"
bg_color="lightgray"
bg_color="rgba(100, 100, 100, 1)"
Progress background color (not applied in progress="none").
Default: #dddddd.
Optional.
text_colortext_color="#ffffff"
text_color="white"
text_color="rgba(255, 255, 255, 1)"
Progress text color.
Default: #ffffff.
Optional.

[step] attributes:

AttributeExamplesDescription
titletitle="Step Title"
title=""
The step title. If not defined will not display it.
Optional.
prevprev="Previous"
prev="Back"
prev=""
Previous button label. If set as empty (prev="") the button will not get displayed.
Optional.
next*next="Next"
next="Submit"
next=""
Next button label. If set as empty (prev="") the button will not get displayed.
IMPORTANT: In the last step, next button will be used to submit the form.
Required.
alignalign="corners"
align="left"
align="right"
Defines the alignment of previous and next buttons.

corners: Places the buttons at corners (previous at left, next at right).
left: Aligns the buttons at left.
right: Aligns the buttons at right.

Default: corners.
Optional.

This BBCode also supports common HTML attributes.