ContactForm Component

Contact form with validation, email integration, and responsive design. Handles user inquiries with proper form validation and email delivery.

Overview

The ContactForm component provides a professional contact form for your landing pages. It includes field validation, spam protection, and direct integration with your email system.

Preview

Basic Usage

<template>
  <section class="contact-section">
    <ContactForm />
  </section>
</template>

<script setup lang="ts">
import ContactForm from '@/components/ContactForm.vue'
</script>

Features

📝 Form Fields

• Name field with validation
• Email field with format validation
• Subject selection dropdown
• Message textarea with character count
• Required field indicators

✅ Validation System

• Real-time field validation
• Email format verification
• Required field checking
• Error message display
• Success confirmation

📧 Email Integration

• Direct email sending capability
• Template-based email formatting
• Spam protection measures
• Delivery confirmation

🎨 Modern Design

• Clean, professional styling
• Responsive layout design
• Focus states and animations
• Accessibility features

Component API

Props

Prop	Type	Default	Description
title	string	'Contact Us'	Form section title
subtitle	string	undefined	Optional subtitle text
showSubject	boolean	true	Show subject field
required	string[]	['name', 'email', 'message']	Required fields

Events

Event	Payload	Description
submit	{ formData }	Emitted on form submission
success	{ response }	Emitted on successful submission
error	{ error }	Emitted on submission error

Form Fields

Field Structure

interface ContactFormData {
  name: string
  email: string
  subject: string
  message: string
  consent: boolean
}

Validation Rules

• Name: Required, minimum 2 characters
• Email: Required, valid email format
• Subject: Optional or required based on props
• Message: Required, minimum 10 characters
• Consent: Required for GDPR compliance

Styling Details

The component uses modern form styling with:

• Clean input fields with focus states
• Responsive grid layout
• Professional typography
• Consistent spacing and alignment

Integration Examples

With Custom Validation

<template>
  <ContactForm 
    @submit="handleSubmit"
    @success="handleSuccess"
    @error="handleError"
  />
</template>

<script setup lang="ts">
const handleSubmit = (formData) => {
  // Custom validation logic
}

const handleSuccess = (response) => {
  // Success handling
  toast.success('Message sent successfully!')
}

const handleError = (error) => {
  // Error handling
  toast.error('Failed to send message')
}
</script>

With Custom Fields

<ContactForm 
  :required="['name', 'email', 'phone', 'message']"
  :show-subject="false"
  title="Get in Touch"
  subtitle="We'd love to hear from you"
/>

Related Components

• RegisterForm - User registration form
• Toast - Form feedback notifications
• Button - Form submit button