Jasper Real Estate Form
A warm, earthy property inquiry form for luxury real estate listings.
Features
- Split layout — Property info card (left) + inquiry form (right)
- Property card — Gradient terracotta header with property name, address, and type badge
- Stats grid — Beds, baths, and square footage with icon indicators
- Feature badges — Property amenities as outlined badge chips
- Contact buttons — Call Agent and Email quick-action buttons
- Elegant inputs — Bottom-border style inputs with terracotta focus color
- Tour type selector — Radio card toggle between In-Person and Virtual tours
- Date picker — Native date input for preferred tour date
- Textarea — Additional notes with resize-none and matching styling
- Libre Baskerville — Serif font for headings and price display
- Raleway — Clean sans-serif for form labels and body text
- Noise texture — Subtle SVG fractal noise background overlay
- Shadow depth — Drop shadow on cards for elevated appearance
- Dark mode — Dark earth (#0f0d0a) with warm accent preservation
Dependencies
@/components/vue-ui/card — Card, CardHeader, CardTitle, CardDescription, CardContent@/components/vue-ui/button — Button@/components/vue-ui/badge — Badge@/components/vue-ui/separator — Separatorlucide-vue-next — Home, MapPin, Bed, Bath, Square, Send, Phone, Mail
Customization
property object with your listing dataForm fields: Add financing, pre-approval, or agent preference fieldsValidation: Add client-side form validation logicColors: Adjust terracotta (#c96442) to match your brand paletteSubmission: Connect form to your CRM or email notification systemMore from Stow
Explore other blocks from this seller
