Implement customised Stepper

Vote:

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.

Thanks.

#283158

Jul 05, 2022 8:17

Scott Reed

Vote:

You can override Optimizely Forms views as shown here https://docs.developers.optimizely.com/content-cloud/v1.2.0-forms/docs/configuring-optimizely-forms 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

#283166

Jul 05, 2022 11:52

Vote:

Thanks so much, Scott.

#283331

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

Vote:

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>
                            @Html.Translate("/episerver/forms/viewmode/stepnavigation/previous")
                        </button>

                     @{
                    // 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>
                            </div>
                        </div>
                        <button type="submit" name="submit" value="@SubmitButtonType.NextStep.ToString()" class=" btn btn-warning"
                                @nextButtonDisableState data-f-navigation-next>
                            @Html.Translate("/episerver/forms/viewmode/stepnavigation/next")
                        </button>
                    </nav>
                }

#288607

Edited, Oct 04, 2022 2:03

Try our conversational search powered by Generative AI!

Implement customised Stepper