Contact Form

A modern, production-ready contact form component built for flexibility and great user experience. It supports real-time validation, async submissions, toast feedback, file uploads, and multiple layout variants like default, background, and split views.

Designed to be composable, accessible, and easy to integrate into any application.

Example Usage

Preview

Contact Us

We would love to hear from you

Name

Email

Subject

Enter your message

Drag & drop files here or click to browse

All file types supported • Max size: 10 MB

0 selected

Code

import { ContactForm } from "@ignix-ui/contact-form";
import { ToastProvider } from "@ignix-ui/toast";

<ToastProvider>
    <ContactForm
      variant="default"
      onSubmit={async (data) => {
        console.log(data);
      }}
    >
    <ContactForm.Header />
    <ContactForm.Content>
      <ContactForm.Field name="name" label="Name" />
      <ContactForm.Field name="email" label="Email" />
      <ContactForm.Field name="subject" label="Subject" />
      <ContactForm.Textarea name="message" />
      <ContactForm.FileUpload />
    </ContactForm.Content>
    <ContactForm.Actions />
  </ContactForm>
</ToastProvider>

---

📦 Installation

CLI

ignix add component contact-form

---

Props

ContactForm Props

Prop	Type	Default	Description
children	React.ReactNode	Required	Form content (Header, Content, Fields, etc.)
variant	"default" | "background" | "split"	"default"	Layout variant of the form
backgroundImage	string	—	Background image URL (used in background variant)
sideImage	string	—	Side image URL (used in split variant)
sideImagePosition	"left" | "right"	"left"	Position of the side image in split layout
onSubmit	(data: FormData) => Promise<void> | void	—	Called when form is submitted successfully
onError	(err: unknown) => void	—	Called when submission fails
onSuccess	() => void	—	Called after successful submission (overrides default toast)

---

ContactForm.Header Props

Prop	Type	Default	Description
title	string	"Contact Us"	Form title
description	string	"We would love to hear from you"	Subtitle/description text

---

ContactForm.Content Props

Prop	Type	Default	Description
children	React.ReactNode	Required	Form fields and content

---

ContactForm.Field Props

Prop	Type	Default	Description
name	"name" | "email" | "subject"	Required	Field name used for validation and data
label	string	Required	Input placeholder/label
type	string	"text"	Input type (e.g. text, email)

---

ContactForm.Textarea Props

Prop	Type	Default	Description
name	"message"	Required	Field name
maxMessageLength	number	—	Maximum allowed message length

---

ContactForm.FileUpload Props

Prop	Type	Default	Description
—	—	—	Uses underlying FileUpload component props

ℹ️ This component internally uses the FileUpload component. You can extend or customize it by modifying the source if needed.

---

ContactForm.Actions Props

Prop	Type	Default	Description
—	—	—	Submit button section (no configurable props currently)

---

ContactForm.Base Props

Prop	Type	Default	Description
children	React.ReactNode	Required	Form content
onSubmit	(data: FormData) => Promise<void> | void	—	Submit handler
onError	(err: unknown) => void	—	Error handler
onSuccess	() => void	—	Success handler

---