Contact Form

The ContactForm component provides a ready-to-use contact form with inputs for name, email, subject, and message.

It includes:

Name field
Email field
Subject field
Message textarea
Submit button
Lucide icons
Responsive layout
Accessible labels

Import the component using:

import ContactForm from "@/components/forms/contactForm";

Preview

Basic Usage

<ContactForm />

Fields Included

Name
Email
Subject
Message
Send Message Button

Form Structure

┌─────────────────────────┐
│ Name                    │
├─────────────────────────┤
│ Email                   │
├─────────────────────────┤
│ Subject                 │
├─────────────────────────┤
│ Message                 │
│                         │
│                         │
├─────────────────────────┤
│     Send Message        │
└─────────────────────────┘

Icons Used

import {
  User,
  Mail,
  PencilLine,
  MessageSquare,
  Send,
} from "lucide-react";

Submit Button

The form uses the Button component for submission.

<Button
  rightIcon={Send}
  variant="primary"
  className="w-full"
>
  Send Message
</Button>

Custom Form Handling

Attach your own submit handler.

<form onSubmit={handleSubmit}>
  <ContactForm />
</form>

Example:

const handleSubmit = (e: React.FormEvent) => {
  e.preventDefault();
 
  // Send form data
};

Connecting to a Backend

You can connect the form to:

Next.js Server Actions
API Routes
Resend
Formspree
Web3Forms
EmailJS
Supabase
Firebase

Example:

const handleSubmit = async () => {
  await fetch("/api/contact", {
    method: "POST",
    body: JSON.stringify(formData),
  });
};

Styling

The component uses:

Tailwind CSS
Lucide Icons
Custom Button Component

and automatically adapts to mobile and desktop screen sizes.

Common Use Cases

Contact pages
Support forms
Lead generation pages
Agency websites
SaaS websites
Portfolio websites
Landing pages