Confirm?

Are you sure you want to proceed?
J
Jędrzej Szczerbal

Contact Page Design

Clone & Customize via AI

MudBlazor Contact Page that displays contact details and a two-column MudForm with MudTextField bindings. Uses MudGrid for responsive layout and MudForm validation.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Two-column contact layout: left column shows contact cards and service area; right column contains a contact form. - Validated form using MudForm and DataAnnotations on a ContactFormModel (Required, EmailAddress). - Inputs include MudTextField, MudSelect, and a full-width MudButton submit control. - Informational footer and a CTA stripe styled via custom CSS. ## Key components - MudContainer, MudGrid, MudItem - MudPaper, MudStack, MudText - MudForm (referenced via @ref), MudTextField, MudSelect, MudSelectItem - MudButton - ContactFormModel class with [Required] and [EmailAddress] attributes ## How it works - The form uses a MudForm instance (private MudForm Form) and a ContactFormModel bound with @bind-Value on each MudTextField/MudSelect. - OnSubmitAsync calls await Form.Validate(); and checks Form.IsValid before resetting the form via Form.ResetAsync(); and instantiating a new ContactFormModel. - Validation rules come from System.ComponentModel.DataAnnotations on ContactFormModel; validation messages are provided via attributes. - MudGrid xs/md breakpoints create a responsive two-column layout; MudPaper groups contact details into card-like blocks. ## Styling - UI uses MudBlazor components and theming. No Tailwind or Bootstrap classes detected. - Custom CSS in app.css provides page-level styling: .contact-page-container, .contact-area-paper, .contact-cta-section, .contact-footer. - Layout is responsive via MudGrid and MudItem (xs="12" md="6"). Buttons and inputs use MudBlazor variants (Outlined, Filled). ## Reuse steps 1. Add the MudBlazor NuGet package and register services (e.g., builder.Services.AddMudServices(); in Program.cs). 2. Import MudBlazor namespaces (_Imports.razor) and include MudBlazor CSS/Fonts in index.html or host page. 3. Copy ContactPage.razor, ContactFormModel.cs and app.css into the project and adjust routes if needed. 4. Implement backend wiring: post form data to an API or send email in OnSubmitAsync instead of just resetting the model. 5. Optionally add server-side validation handling, anti-spam (reCAPTCHA), and success/failure UI states. ## Limitations & next steps - No backend or API integration is implemented; OnSubmitAsync resets the model locally. Server-side submission and error handling must be wired. - No anti-spam or rate limiting is present; add reCAPTCHA or server checks for production. - Accessibility touches and localization are minimal; consider aria attributes, tabindex, and resource files for translations. - Authentication, logging, and email delivery are out of scope and require application service wiring. This component was generated by Instruct UI and is editable for integration into .NET projects.