Sample: Registration widget with custom fields
Overview
This sample demonstrates how to add your own custom fields to the default template of the Registration formwidget. You do this by modifying the Default.cshtml of the Profilewidget and then apply the new template to the widget.
For more information, see Registration widget.
Supported field types
For the Profile widget, Sitefinity supports the following field types:
- Short text
- Long text
- Yes / No
- Date and Time
- Number
Create the custom widget template
Create a custom template for the Registration formwidget in the following way:
- Open your project in Visual Studio.
- In folder
Views/Shared/Components, create a new folder and name itSitefinityRegistration - In the context menu of folder
SitefinityRegistration, click Add » New Item… - Name the file
RegistrationWithCustomFields.cshtml - Paste the code in the template and build your solution
HTML+Razor
@model Progress.Sitefinity.AspNetCore.Widgets.Models.Registration.RegistrationViewModel
@using Progress.Sitefinity.AspNetCore.Widgets.Models.Registration
@using Progress.Sitefinity.AspNetCore.Mvc.Rendering
@using Progress.Sitefinity.AspNetCore.ViewComponents;
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Progress.Sitefinity.AspNetCore
@{
var lbls = Model.Labels;
}
@if (Model.IsAccountActivationRequest)
{
<div class="@(string.IsNullOrEmpty(Model.CssClass) ? null : Model.CssClass)" @Html.BuildAttributes(Model.Attributes)>
<h2 class="mb-3">
@lbls.ActivationMessage
</h2>
</div>
}
else
{
<div data-sf-role="sf-registration-container" class="@(string.IsNullOrEmpty(Model.CssClass) ? null : Model.CssClass)" @Html.BuildAttributes(Model.Attributes)>
@if (Model.ShowSuccessMessage(Context))
{
<h3>@lbls.SuccessHeader</h3>
<p>@lbls.SuccessLabel</p>
}
else
{
var firstNameInputId = Html.GetUniqueId("sf-first-name-");
var lastNameInputId = Html.GetUniqueId("sf-last-name-");
var emailInputId = Html.GetUniqueId("sf-email-");
var passwordInputId = Html.GetUniqueId("sf-new-password-");
var repeatPasswordInputId = Html.GetUniqueId("sf-repeat-password-");
var questionInputId = Html.GetUniqueId("sf-secret-question-");
var answerInputId = Html.GetUniqueId("sf-secret-answer-");
<environment include="Development">
<script src="Scripts/LoginWidgets/registration.js" section-name="Bottom" assembly-ref="Progress.Sitefinity.AspNetCore.Widgets"></script>
</environment>
<environment exclude="Development">
<script src="Scripts/LoginWidgets/registration.min.js" section-name="Bottom" assembly-ref="Progress.Sitefinity.AspNetCore.Widgets"></script>
</environment>
<div data-sf-role="form-container">
<h2 class="mb-3">@lbls.Header</h2>
<div data-sf-role="error-message-container" class="alert alert-danger d-none my-3" role="alert" aria-live="assertive"></div>
<form method="post" action="@Model.RegistrationHandlerPath" role="form" novalidate>
<div class="mb-3">
<label for="@firstNameInputId" class="form-label">@lbls.FirstNameLabel</label>
<input id="@firstNameInputId" type="text" class="form-control" name="FirstName" data-sf-role="required">
</div>
<div class="mb-3">
<label for="@lastNameInputId" class="form-label">@lbls.LastNameLabel</label>
<input id="@lastNameInputId" type="text" class="form-control" name="LastName" data-sf-role="required">
</div>
<div class="mb-3">
<label for="@emailInputId" class="form-label">@lbls.EmailLabel</label>
<input id="@emailInputId" type="email" class="form-control" name="Email" data-sf-role="required">
</div>
<div class="mb-3">
<label for="@passwordInputId" class="form-label">@lbls.PasswordLabel</label>
<input id="@passwordInputId" type="password" class="form-control" name="Password" data-sf-role="required">
</div>
<div class="mb-3">
<label for="@repeatPasswordInputId" class="form-label">@lbls.RepeatPasswordLabel</label>
<input id="@repeatPasswordInputId" type="password" class="form-control" name="RepeatPassword" data-sf-role="required">
</div>
@* Custom fields start *@
<div class="mb-3">
<label for="textfield" class="form-label">TextField</label>
<input id="textfield" type="text" name="TextField" data-sf-role="required" value="true">
</div>
<div class="mb-3">
<label for="boolfield" class="form-label">BoolField</label>
<input id="boolfield" type="checkbox" name="BoolField" data-sf-role="required" value="true">
</div>
<div class="mb-3">
<label for="datefield" class="form-label">DateField</label>
<input id="datefield" type="datetime-local" class="form-control" name="DateField" data-sf-role="required">
</div>
<div class="mb-3">
<label for="numberfield" class="form-label">NumberField</label>
<input id="numberfield" type="number" class="form-control" name="NumberField" data-sf-role="required">
</div>
@* Custom fields end *@
@if (Model.RequiresQuestionAndAnswer)
{
<div class="mb-3">
<label for="@questionInputId" class="form-label">@lbls.SecretQuestionLabel</label>
<input id="@questionInputId" type="text" class="form-control" name="Question" data-sf-role="required">
</div>
<div class="mb-3">
<label for="@answerInputId" class="form-label">@lbls.SecretAnswerLabel</label>
<input id="@answerInputId" type="text" class="form-control" name="Answer" data-sf-role="required">
</div>
}
<input class="btn btn-primary w-100" type="submit" value="@lbls.RegisterButtonLabel" />
<input type="hidden" name="ActivationPageUrl" value="@Model.ActivationPageUrl" />
</form>
@if (!string.IsNullOrEmpty(Model.LoginPageUrl))
{
<div class="mt-3">@lbls.LoginLabel</div>
<a href="@Model.LoginPageUrl" class="text-decoration-none">@lbls.LoginLink</a>
}
@if (Model.ExternalProviders != null && Model.ExternalProviders.Any())
{
<h3 class="mt-3">@lbls.ExternalProvidersHeader</h3>
@foreach (var provider in Model.ExternalProviders)
{
<a data-sf-test="extPrv" class="btn border fs-5 w-100 mt-2 @Model.GetExternalLoginButtonCssClass(provider.Name)" href="@Model.GetExternalLoginPath(Context, provider.Name)">@provider.Title</a>
}
}
<input type="hidden" name="RedirectUrl" value="@Model.RedirectUrl" />
<input type="hidden" name="PostRegistrationAction" value="@Model.PostRegistrationAction" />
<input type="hidden" name="ActivationMethod" value="@Model.ActivationMethod" />
<input type="hidden" name="ValidationRequiredMessage" value="@lbls.ValidationRequiredMessage" />
<input type="hidden" name="ValidationMismatchMessage" value="@lbls.ValidationMismatchMessage" />
<input type="hidden" name="ValidationInvalidEmailMessage" value="@lbls.ValidationInvalidEmailMessage" />
</div>
<div data-sf-role="success-registration-message-container" class="d-none">
<h3>@lbls.SuccessHeader</h3>
<p>@lbls.SuccessLabel</p>
</div>
<div data-sf-role="confirm-registration-message-container" class="d-none">
<h3>@lbls.ActivationLinkHeader</h3>
<p data-sf-role="activation-link-message-container"></p>
<a href="javascript:void(0)" data-sf-role="sendAgainLink" class="btn btn-primary">
@lbls.SendAgainLink
</a>
<input type="hidden" name="ResendConfirmationEmailUrl" value="@Model.ResendConfirmationEmailHandlerPath" />
<input type="hidden" name="ActivationLinkLabel" value="@lbls.ActivationLinkLabel" />
<input type="hidden" name="SendAgainLink" value="@lbls.SendAgainLink" />
<input type="hidden" name="SendAgainLabel" value="@lbls.SendAgainLabel" />
</div>
}
</div>
}Apply the CAPTCHA template
Perform the following:
- Open the page where the Registration form widget is located for editing.
- In the page editor, hover over the Registration form widget.
- Click the toggle menu in the widget label.
- Click
(Edit). - In the Registration template dropdown box, select the new template.
- Save your changes.
Want to learn more?
Enhance your Sitefinity skills by enrolling in free training sessions. Become Sitefinity certified through Progress Education Community to strengthen your professional credentials.
Get started with Integration Hub | Sitefinity Cloud
This free lesson teaches administrators, marketers, and other business professionals how to use Sitefinity Integration Hub to create automated workflows between Sitefinity and other business systems.
Web Security for Sitefinity Administrators
This free lesson teaches administrators the basics about protecting your Sitefinity instance and your sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.
Foundations of Sitefinity ASP.NET Core Development
The free on-demand video course teaches developers how to use Sitefinity ASP.NET Core and take advantage of its decoupled architecture and modern development model.