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.

Package Osirion.Blazor.Core, namespace Osirion.Blazor.Components. Source on GitHub.

@using Osirion.Blazor.Components
@using Osirion.Blazor.Core.Models

@* A demo: it hands the address to nothing, and says so after you subscribe. *@
<OsirionSubscriptionCard Id="demo-newsletter"
                         Title="Release notes by email"
                         Description="One message per release, nothing else."
                         SuccessMessage="This demo does not store addresses."
                         OnSubscribe="IgnoreAsync" />

@code {
    private static Task IgnoreAsync(SubscriptionModel subscription) => Task.CompletedTask;
}

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 requires the privacy agreement, so the card shows the checkbox. If PrivacyPolicyText is null or empty the checkbox is left out and the card submits without it: AgreeToPrivacyPolicy is set to true so the model validates, which means it records no consent and OnSubscribe must not store it as consent.
• The card thanks the visitor only after OnSubscribe returns. Without a handler, or with UseBuiltInEmailService on, nothing stores the address, so the card shows ErrorMessage and logs a warning instead. Available from the release after 4.1.0; before it, both cases showed SuccessMessage.
• 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