Confirm?

Are you sure you want to proceed?
m
mohsen taheri

Newsletter Signup Form Design

Clone & Customize via AI

Blazor Newsletter Subscription provides a two-step sign-up form with selectable newsletter cards and email capture using EditForm validation and InputRadioGroup. Uses Bootstrap card layout and responsive form-control styles.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Two-step newsletter signup form (select newsletter, enter email and consent). - Card-style radio list for newsletter options with images and action link. - Email input with DataAnnotations validation and consent checkbox. - Validation messages shown via ValidationMessage components. - Submit button styled as full-width Bootstrap warning button. ## Key components - EditForm, DataAnnotationsValidator - InputRadioGroup, InputRadio - InputText, InputCheckbox - ValidationMessage, @bind-Value for two-way binding - Custom component-scoped CSS (NewsletterSubscription.razor.css) ## How it works - Model-driven form uses a NewsletterModel with DataAnnotations for required fields and email format checks. - InputRadioGroup binds to model.SelectedNewsletter; each option renders a card with an InputRadio Value. - InputText binds to model.Email and InputCheckbox binds to model.AcceptTerms using @bind-Value. - DataAnnotationsValidator validates on submit; OnValidSubmit invokes HandleSubmit where submission logic can be implemented. - ValidationMessage components display field-level errors from the model. ## Styling - Uses Bootstrap utility and component classes (container, card, btn, form-control, text-muted, mb-*). - Component-scoped CSS adjusts .form-control padding and adds hover styles to .card (border and box-shadow highlight). - Layout is responsive through Bootstrap card and flex utilities; images sized inline for consistent card height. ## Reuse steps 1. Add the .razor and .razor.css files to a Blazor WebAssembly or Server project (no extra NuGet required for core components). 2. Ensure namespace imports: @using System.ComponentModel.DataAnnotations in the component or _Imports.razor. 3. Adapt NewsletterModel and NewsletterOption to the application domain and localization as needed. 4. Replace Console.WriteLine in HandleSubmit with a service call to persist subscription or call an API; inject services via [Inject] or constructor in a code-behind. 5. Include or adjust Bootstrap CSS in the host app (wwwroot/index.html or _Host.cshtml) if not already present. ## Limitations & next steps - This is a single UI component generated by Instruct UI and does not include backend wiring, API integration, storage, or email delivery. - Authentication, rate limiting, spam protection (CAPTCHA) and server-side validation enforcement must be added in the application layer. - Consider adding ARIA attributes, focus management for radio cards, and client-side feedback (success/failure states) after submission. - Extend to support remote option loading, unsubscribe flows, and telemetry for analytics.