Contact Form Example

A comprehensive contact form example showcasing Form Engine's capabilities including validation, responsive design, conditional fields, and action handling.

Interactive Demo

Contact Form Example
A comprehensive contact form with conditional fields, validation, and responsive design. Try selecting different inquiry types to see conditional budget fields appear.

Key Features Demonstrated

This contact form example showcases several advanced Form Engine features:

1. Conditional Field Logic

  • Dynamic Budget Fields: Only show when inquiry type is 'sales' or 'partnership'
  • Operator Support: Uses in operator to check multiple values
  • Smart UX: Reduces form complexity by hiding irrelevant fields

2. Responsive Grid Layout

  • Mobile-First Design: Single column on mobile, two columns on desktop
  • Flexible Spanning: Some fields span full width even on desktop
  • Automatic Adaptation: Grid automatically adjusts based on screen size

3. Advanced Validation

  • Required Fields: First name, last name, email, inquiry type, subject, message, and terms
  • String Length: Minimum/maximum character requirements
  • Email Format: Built-in email validation
  • Custom Messages: Specific error messages for each validation rule

4. Multiple Field Types

  • Text Inputs: First name, last name, subject
  • Email Input: Dedicated email field with validation
  • Select Dropdowns: Inquiry type, priority, budget
  • Textarea: Message field with row configuration
  • Checkboxes: Newsletter subscription and terms agreement

5. Form Actions

  • Submit Button: Custom styling and loading states
  • Async Handling: Simulated API call with loading feedback
  • Success Messages: User feedback on successful submission

Implementation Tips

When building similar forms, consider:

  1. Start Mobile-First: Design for mobile screens first, then enhance for larger devices
  2. Group Related Fields: Use logical grouping and spacing to improve user experience
  3. Progressive Enhancement: Show advanced options only when relevant
  4. Clear Validation: Provide immediate, helpful feedback on validation errors
  5. Accessible Labels: Ensure all fields have clear, descriptive labels

Next Steps