Multi-Step Contact Form

A minimal two-step contact form demonstrating navigation, validation and a custom success message.

Live demo

multi-step-contact.tsx

import { z } from "zod";
import { FormFactory } from "@enlolab/forms";

export const MultiStepContact = FormFactory({
  formId: "multi-step-contact",
  fields: {
    name: {
      type: "text",
      label: "Name",
      placeholder: "John Doe",
      schema: z.string().min(2, "Name too short")
    },
    email: {
      type: "email",
      label: "Email",
      placeholder: "john@example.com",
      schema: z.string().email()
    },
    message: {
      type: "textarea",
      label: "Message",
      placeholder: "Your enquiry...",
      rows: 4,
      schema: z.string().min(10)
    }
  },
  steps: {
    contact: { id: "contact", fields: ["name", "email"], defaultNext: "message" },
    message: { id: "message", fields: ["message"] }
  },
  layout: { columns: { default: 1 }, gap: { default: 4 } },
  submit: { type: "default-no-recaptcha", endpoint: { url: "/api/echo", clientId: "docs" } },
  successMessage: "<strong>Thank you!</strong> We will reply soon."
});