Confirm?

Are you sure you want to proceed?
E
Eirik Lund

Modern Contact Information Form

Clone & Customize via AI

Bootstrap Contact Form shows company support information alongside a validated message form. Uses EditForm validation and Bootstrap form-control/InputText components for model binding.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Two-column contact layout: company/support info card and a modern contact form card. - Validated form using EditForm, DataAnnotationsValidator, ValidationSummary and ValidationMessage. - Inputs: InputText for Name/Email, InputRadioGroup for Topic, InputTextArea for Message. - Submit flow placeholder (HandleSubmit) where API/email integration belongs. ## Key components - EditForm, DataAnnotationsValidator, ValidationSummary, ValidationMessage - InputText, InputTextArea, InputRadioGroup, InputRadio - JetCarrierContactFormModel (DataAnnotations attributes for validation) - Standard Bootstrap markup: container, row, col-*, card, btn, form-control ## How it works - The UI binds the form model via @bind-Value to a JetCarrierContactFormModel instance. - DataAnnotations drive server-side and client-side validation through DataAnnotationsValidator and ValidationMessage. - On successful validation the EditForm triggers OnValidSubmit -> HandleSubmit (currently a placeholder async Task). - Topic selection uses InputRadioGroup with styled label badges; inputs use Bootstrap form-control classes for consistent styling. ## Styling - Visual layout and spacing rely on Bootstrap classes (container, row, col-12 col-lg-*, card, shadow-sm). - Form fields use Bootstrap form-control and form-control-sm for compact inputs; badges use rounded-pill and bg-light. - Responsive behavior is provided by the grid (two-column on lg and stacked on smaller screens). ## Reuse steps 1. Copy JetCarrierContact.razor and JetCarrierContactFormModel.cs into a Blazor project. 2. Ensure Bootstrap CSS is included (wwwroot or CDN) and FontAwesome icons if icons are required. 3. Import namespaces (if placed in folders) or add @using where needed. 4. Adjust models and validation attributes to match backend requirements. 5. Implement submission logic in HandleSubmit to call an API, send email, or post to a server endpoint. ## Limitations & next steps - This is a single page scaffold generated by Instruct UI; backend wiring (API endpoints, mail service, logging) is not included. - No client-side anti-spam (CAPTCHA) or rate limiting is implemented; consider adding server-side validation and CAPTCHA. - Authentication/authorization and server-side persistence must be added by the host application. - Consider adding success/error UI feedback (toast or inline message) after HandleSubmit completes.