Mantlz Form Components

The Mantlz SDK provides React components for creating dynamic forms. All form configurations are managed through the Mantlz dashboard and fetched automatically based on form IDs.

Mantlz Component

The main component that dynamically renders any type of form based on its configuration:

import { mantlz } from '@mantlz/nextjs';

<mantlz 
  formId="your-form-id"
  title="Form Title"
  description="Form description"
/>

Key Features

Dynamic Form Configuration

All forms are dynamically configured through the Mantlz dashboard:

• Form fields and validation rules are fetched automatically
• Update form structure without code changes
• Add, remove, or modify fields through the dashboard
• Maintain consistent form behavior across implementations

Form Type Features

Depending on the form type configured in the dashboard, additional features are available:

Waitlist Forms

For forms configured as waitlist type:

<mantlz
  formId="your-waitlist-form-id"
  showUsersJoined={true} // Show number of users who joined
  usersJoinedLabel="people on the waitlist" // Custom label
  usersJoinedPosition="top" // Position of the counter: "top" | "bottom"
/>

Feedback Forms

For forms configured as feedback type:

<mantlz
  formId="your-feedback-form-id"
  showRating={true} // Show star rating input
  ratingLabel="Rate your experience" // Custom rating label
/>

Event Handlers

Handle form submissions and errors with callback functions:

<mantlz
  formId="your-form-id"

/>

Appearance Customization

While fields are dynamic, you can still customize the form's appearance:

<mantlz
  formId="your-form-id"
  appearance={{
    elements: {
      // Customize button style
      formButtonPrimary: 'bg-slate-500 hover:bg-slate-400 text-sm',
      // Customize input style
      input: 'bg-zinc-100 border-zinc-300',
      // Customize card style
      card: 'shadow-lg rounded-lg',
      // Style users joined counter (for waitlist forms)
      usersJoinedCounter: 'text-xl font-bold text-purple-600',
      usersJoinedLabel: 'text-sm text-gray-600',
    },
  }}
/>

Post-Submission Redirects

Redirect users after successful form submission (STANDARD and PRO plans):

<mantlz
  formId="your-form-id"
  redirectUrl="/thank-you"
/>

Available Props

Getting Started

To get started with dynamic forms:

1. Install the SDK
2. Create and configure your form in the Mantlz dashboard
3. Copy your form ID and implement the mantlz component
4. Add form submission handlers
5. Deploy your form!