OsirionSubscriptionCard

OsirionSubscriptionCard is a newsletter signup form in a card: an email field, an optional name field, a privacy consent checkbox and optional topics to choose from. It posts as a normal form, so it works on static SSR pages without a circuit or WebAssembly. Your code receives the validated data in OnSubscribe and stores it wherever your mailing list lives.

Usage

@using Osirion.Blazor.Core.Models

<OsirionSubscriptionCard Id="newsletter" OnSubscribe="SaveAsync" />

@code {
    private Task SaveAsync(SubscriptionModel subscription)
    {
        // Send subscription.Email to your mailing list provider here.
        // Throwing an exception shows ErrorMessage instead of SuccessMessage.
        return Task.CompletedTask;
    }
}

A card with a name field and topics, where one topic cannot be turned off:

@using Osirion.Blazor.Core.Models

<OsirionSubscriptionCard Id="blog-signup"
                         Title="Get new articles by email"
                         Description="One email when a new article is published."
                         ShowNameField="true"
                         ShowSubscriptionCategories="true"
                         SubscriptionCategories="topics"
                         PrivacyPolicyText="@PrivacyText"
                         OnSubscribe="SaveAsync" />

@code {
    private const string PrivacyText = "I agree to the <a href=\"/privacy\">privacy policy</a>";

    private readonly SubscriptionCategory[] topics =
    [
        new() { Id = "articles", Name = "New articles", IsRequired = true },
        new() { Id = "releases", Name = "Release notes", Description = "About one email a month", IsDefault = true }
    ];

    private Task SaveAsync(SubscriptionModel subscription)
    {
        // subscription.Name, subscription.Email and subscription.SubscriptionCategories (the chosen ids)
        return Task.CompletedTask;
    }
}

Parameters

SubscriptionCategory (namespace Osirion.Blazor.Core.Models) has Id, Name, Description, IsDefault (checked at first) and IsRequired (checked, disabled and always included). SubscriptionModel carries Name, Email, AgreeToPrivacyPolicy and SubscriptionCategories, the list of chosen ids.

Behavior

• The form is an enhanced EditForm with FormName set to Id. Under static SSR it posts to the same page; in an interactive page it submits through the circuit. In both cases the card then navigates to the current URL with a SubmissionResultValue query value and shows the matching message above the form.
• Topic choices are read from the posted form, so they arrive only under static SSR. In an interactive page the topic checkboxes are not bound, and OnSubscribe receives only the required topics.
• Validation uses data annotations: the email is required, must be a valid address and at most 255 characters.
• The model always requires the privacy agreement. If PrivacyPolicyText is null or empty the checkbox is not rendered, and the form can never pass validation, so keep a consent text.
• A hidden honeypot field catches simple bots. When it is filled in, OnSubscribe is not called and SpamMessage is shown.
• Title, Description and PrivacyPolicyText are written as raw HTML without sanitizing. Use text you wrote; never pass text from visitors or unreviewed content.
• The drop-down uses the native details element, so it opens without script.
• The labels "Name" and "Email", "Select your preferences:" and "Required" are fixed English text.
• With the EnhancedNavigation component on the page, the redirect after posting can scroll to the top; set its ResetScrollOnNavigation to false if that matters for a card low on the page.

Styling

The root element has osirion-subscription-card and, by setting, osirion-subscription-card-compact, osirion-subscription-card-dark, osirion-subscription-card-bordered and osirion-subscription-card-shadow. Inputs, labels, checkboxes, the button and the result message take the class names of the CSS framework set in the theming options (for example form-control, btn btn-primary and alert alert-success with Bootstrap). These custom properties are defined on the card:

Related

• OsirionContactForm
• Cards overview