Five New Optimizely Certifications are Here! Validate your expertise and advance your career with our latest certification exams. Click here to find out more
AI OnAI Off
Five New Optimizely Certifications are Here! Validate your expertise and advance your career with our latest certification exams. Click here to find out more
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
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>
}
Hi experts,
May I ask if we can implement a fancy stepper on Step Forms.
Like this:
Do we have any instructions or references? The default style was really unacceptable.
Thanks.