●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Contact form with Name, Email, Subject select, Message textarea, and newsletter checkbox
- Company information panel (address, email, phone, business hours, map embed)
- Client-side validation using DataAnnotationsValidator, ValidationSummary, and messages
- Responsive Bootstrap layout with grid, cards, and form controls
## Key components
- EditForm for validation and submitting
- InputText, InputSelect, InputTextArea, InputCheckbox for user inputs
- DataAnnotationsValidator for validation
- ValidationSummary and ValidationMessage for error display
## How it works
- Model-bound form fields (@bind-Value), with required and format validation via annotations
- On form submit, disables button and shows spinner while simulating async server interaction
- Upon completion, resets form model
- Static company info and Google Maps iframe are presented in side panel
## Styling
- Bootstrap classes: container, row, col-lg-6, card, form-control, btn, alert
- Responsive split layout adapts for desktops/mobile
## Reuse steps
1. Add Bootstrap CSS to project
2. Copy EditForm, ContactFormModel, and panel code
3. Register any services required for backend in Program.cs
4. Adjust validation or fields as needed
5. Wire up actual backend/API for message send logic
## Limitations & next steps
- Demo does not connect to a service/API for message delivery
- Auth, spam protection, and real data handling should be added
- Page can be nested or reused as standalone. Extend for customizable company info.