November Happy Hour will be moved to Thursday December 5th.
AI OnAI Off
November Happy Hour will be moved to Thursday December 5th.
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.