ContactForm Component

ContactForm Component

A complete contact form molecule that combines multiple UI atoms to create a functional contact form with validation and API integration.

Live Example

Get In Touch

Have a project in mind? Let's discuss how we can work together.

Or reach out directly at hello@sergiovazquez.dev

<ContactForm />

Component Structure

The ContactForm is a molecule component that combines several UI atoms to create a complete contact form experience:

Used Atoms

  • Card - Container wrapper
  • Input - Name and email fields
  • Textarea - Message field
  • Button - Submit button

Features

  • Client-side form validation
  • API integration (/api/contact)
  • Success/error message handling
  • Loading state management

Props

Prop Type Default Description
class string '' Additional CSS classes for the form container

Note: This component is self-contained and handles all form logic internally.

Form Fields

Field Type Required Validation Description
name text Yes Min 2 characters Full name of the contact
email email Yes Valid email format Contact email address
message textarea Yes Min 10 characters Message content

Functionality

Form Validation

Client-side validation ensures data quality before submission:

  • • Name field requires at least 2 characters
  • • Email field validates proper email format
  • • Message field requires at least 10 characters
  • • All fields are required and cannot be empty
  • • Real-time validation feedback

API Integration

Form submits to the contact API endpoint:

  • • POST request to /api/contact
  • • JSON payload with form data
  • • Handles success and error responses
  • • Loading state during submission
  • • Form reset on successful submission

User Feedback

Provides clear feedback to users:

  • • Success message on successful submission
  • • Error messages for validation failures
  • • Loading indicator during submission
  • • Button state changes (disabled during loading)
  • • Auto-hide messages after 5 seconds

Form States

Default State

Initial form state with empty fields and enabled submit button.

• All fields are empty
• Submit button is enabled
• No validation messages shown
• Placeholder text visible

Loading State

State during form submission to the API.

• Submit button shows "Sending..."
• Submit button is disabled
• Form fields remain editable
• Loading indicator visible

Success State

State after successful form submission.

• Green success message displayed
• Form fields are cleared
• Submit button returns to normal
• Message auto-hides after 5 seconds

Error State

State when validation fails or API returns an error.

• Red error message displayed
• Form data is preserved
• Submit button returns to normal
• Specific validation errors shown

JavaScript Implementation

Event Handling

The form uses modern JavaScript for handling user interactions:

Form submission handler with async processing:

  • • Prevents default form submission
  • • Validates form data before submission
  • • Calls API submission function
  • • Handles async operations properly

Validation Logic

Client-side validation ensures data quality:

Validation function checks all form fields:

  • • Name: minimum 2 characters required
  • • Email: validates proper email format
  • • Message: minimum 10 characters required
  • • Shows specific error messages for each field
  • • Returns boolean validation result

API Communication

Handles communication with the contact API:

API submission function handles form data:

  • • Sets loading state during submission
  • • Makes POST request to /api/contact endpoint
  • • Sends JSON formatted form data
  • • Shows success message and resets form on success
  • • Displays error message on failure
  • • Always clears loading state when complete

Styling & Design

Layout Structure

  • • Uses CSS Grid for responsive layout
  • • Two-column layout on larger screens
  • • Single column on mobile devices
  • • Message field spans full width
  • • Consistent spacing between elements

Visual Design

  • • Glass morphism card container
  • • Consistent with design system
  • • Proper focus states for accessibility
  • • Smooth transitions and animations
  • • Color-coded success/error messages

Responsive Behavior

  • • Mobile-first responsive design
  • • Touch-friendly input sizes
  • • Proper viewport scaling
  • • Accessible on all screen sizes

Usage Examples

Basic Usage

<ContactForm />

With Custom Classes

<ContactForm class="max-w-2xl mx-auto" />

In a Section

<section class="py-20">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-bold text-center mb-12">Get In Touch</h2>
    <ContactForm class="max-w-2xl mx-auto" />
  </div>
</section>

With Background Pattern

<div class="relative py-20">
  <BackgroundPattern class="opacity-30" />
  <div class="relative z-10 container mx-auto px-4">
    <h2>Contact Me</h2>
    <ContactForm />
  </div>
</div>

Dependencies

This molecule component depends on the following atoms:

Required Atoms

  • • Card.astro
  • • Input.astro
  • • Textarea.astro
  • • Button.astro

API Dependency

  • • /api/contact endpoint
  • • POST method support
  • • JSON request/response

Import

import ContactForm from '../ui/molecules/ContactForm.astro';