Topics

All topics

Sitefinity renderers

    Sample: Registration widget with custom fields
    ASP.NET Core

    This article contains
    NEW TO SITEFINITY?

    Overview

    This sample demonstrates how to add your own custom fields to the default template of the Registration form widget. You do this by modifying the Default.cshtml of the Profile widget 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 form widget in the following way:

    1. Open your project in Visual Studio.
    2. In folder Views/Shared/Components, create a new folder and name it SitefinityRegistration
    3. In the context menu of folder SitefinityRegistration, click Add » New Item…
    4. Name the file RegistrationWithCustomFields.cshtml
    5. Paste the code in the template and build your solution

    @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>
    }
    view raw RegistrationWithCustomFields.cshtml hosted with ❤ by GitHub

    Apply the CAPTCHA template

    Perform the following:

    1. Open the page where the Registration form widget is located for editing.
    2. In the page editor, hover over the Registration form widget.
    3. Click the toggle menu in the widget label.
    4. Click Edit (Edit).
    5. In the Registration template dropdown box, select the new template.
    6. Save your changes.

    Want to learn more?

    Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

    Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

    This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

    Web Security for Sitefinity Administrators

    This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its 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 .NET Core and leverage its decoupled architecture and new way of coding against the platform.

    Was this article helpful?

    Next article

    Sample: Profile widget with custom fields