SaaS CMS has officially launched! Learn more now.

Implement customised Stepper


Hi experts,

May I ask if we can implement a fancy stepper on Step Forms.

Like this:

Linear Step-by-Step Flow – Bootstrap Steps

Do we have any instructions or references? The default style was really unacceptable.


Jul 05, 2022 8:17

You can override Optimizely Forms views as shown here by extracting the zip from the Nuget package EPiServer.Forms in to the ~/Views/Shared/ElementBlocks location. From here there's a FormStepBlock.cshtml which you should be able to rework to your liking

Jul 05, 2022 11:52

Thanks so much, Scott. 

Jul 07, 2022 4:11
Abeer - Oct 03, 2022 18:09
Hi KK, 
Thank you for asking this cause that's what I was searching for, so did you implement this customized stepper? And I appreciate it if you could just tell me some details on how did you apply this, like was it enough to update only this view FormStepBlock.cshtml, or you did add more custom functionalities for it to work?

Thank you

Hi @Abeer,

FormStepBlock is only for rendering the title and desc of each step.

 <h3 class="FormStep__Title">@Model.Label</h3>
 <aside class="FormStep__Description">@Model.Description</aside>

But If we want to customize the whole stepper, for example like a stepbar or progressing bar, you have to change 'FormContainerBlock.cshtml' localed in ElementBlocks\Components\FormContainerBlock\FormContainerBlock.cshtml.

Checkout the code block around this part:

                if (Model.ShowNavigationBar)
                    <nav role="navigation" class="Form__NavigationBar"  data-f-type="navigationbar" data-f-element-nondata>
                        <!-- btn default class Form__NavigationBar__Action FormExcludeDataRebind btnPrev -->
                        <button type="submit" name="submit" value="@SubmitButtonType.PreviousStep.ToString()" class="btn btn-warning"
                                @prevButtonDisableState data-f-navigation-previous>

                    // calculate the progress style on-server-side
                    var currentDisplayStepIndex = currentStepIndex + 1;
                    var progressWidth = (100 * currentDisplayStepIndex / currentDisplayStepCount) + "%";
                        <div class="Form__NavigationBar__ProgressBar" style="width:800px; ">
                            <div class="Form__NavigationBar__ProgressBar--Progress" style="width:@progressWidth; background-color: #f47320; border-color: #f47320;" data-f-navigation-progress></div>
                            <div class="Form__NavigationBar__ProgressBar--Text">
                                <span class="Form__NavigationBar__ProgressBar__ProgressLabel">@Html.Translate("/episerver/forms/viewmode/stepnavigation/page")</span>
                                <span class="Form__NavigationBar__ProgressBar__CurrentStep" data-f-navigation-currentstep>@currentDisplayStepIndex</span>/
                                <span class="Form__NavigationBar__ProgressBar__StepsCount" data-f-navigation-stepcount>@currentDisplayStepCount</span>
                        <button type="submit" name="submit" value="@SubmitButtonType.NextStep.ToString()" class=" btn btn-warning"
                                @nextButtonDisableState data-f-navigation-next>
Edited, Oct 04, 2022 2:03
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.