Skip to main content
This guide will take you from zero to your first working form in just a few minutes. By the end, you’ll have a fully functional form embedded in your application.
1

Create Your Account

Sign up for a free Mantlz account at mantlz.app.Your account includes:
  • Unlimited forms
  • Real-time analytics dashboard
  • Form submission management
  • API access
The free plan includes access to all core features with generous limits. Custom redirects require a STANDARD or PRO plan.
2

Get Your API Key

After signing in, navigate to your dashboard and locate your API key:
  1. Go to Settings → API Keys
  2. Copy your API key (starts with mk_)
  3. Store it securely - you’ll need it in the next step
Keep your API key secure! Never commit it to version control or expose it in client-side code. Use environment variables instead.
3

Install the SDK

Install the Mantlz SDK in your Next.js project:
npm install @mantlz/nextjs
The SDK requires the following peer dependencies (likely already in your project):
  • next >= 15.0.0
  • react >= 19.0.0
  • react-dom >= 19.0.0
  • zod >= 3.0.0
4

Configure the Provider

Wrap your application with the MantlzProvider in your root layout:
app/layout.tsx
import { MantlzProvider } from '@mantlz/nextjs';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <MantlzProvider apiKey={process.env.NEXT_PUBLIC_MANTLZ_API_KEY}>
          {children}
        </MantlzProvider>
      </body>
    </html>
  );
}
Add your API key to .env.local:
.env.local
NEXT_PUBLIC_MANTLZ_API_KEY=mk_your_api_key_here
The provider injects necessary styles and creates a client instance that all Mantlz components can access.
5

Create a Form in Dashboard

Before you can embed a form, create one in your Mantlz dashboard:
  1. Navigate to Forms → Create New Form
  2. Choose a form type (Waitlist, Contact, Feedback, etc.)
  3. Configure your fields and settings
  4. Copy the Form ID (e.g., form_abc123xyz)
Your form is now ready to be embedded in your application.
6

Embed Your First Form

Add the Mantlz component to any page in your application:
app/waitlist/page.tsx
import { Mantlz } from '@mantlz/nextjs';

export default function WaitlistPage() {
  return (
    <div className="container mx-auto py-12">
      <h1 className="text-4xl font-bold text-center mb-8">
        Join Our Waitlist
      </h1>
      
      <Mantlz formId="form_abc123xyz" />
    </div>
  );
}
That’s it! Your form is now live and collecting submissions.

​
Next Steps

Now that you have your first form working, explore these features:

Customize Your Forms

Learn about themes and styling options

Form Types

Explore all available form types

Analytics

Track form submissions and insights

Advanced Features

Discover advanced SDK features

Form Types

Explore different form types for various use cases

Analytics

Track submissions and analyze form performance

Theming

Customize your forms with themes and styles

​
Quick Examples

​
Waitlist Form with User Count

Display how many people have already joined: 
import { Mantlz } from '@mantlz/nextjs';

export default function Waitlist() {
  return (
    <Mantlz
      formId="form_abc123xyz"
      showUsersJoined={true}
      usersJoinedCount={1250}
      usersJoinedLabel="developers have joined"
    />
  );
}

​
Themed Contact Form

Apply a pre-built theme for instant styling: 
import { Mantlz } from '@mantlz/nextjs';

export default function Contact() {
  return (
    <Mantlz
      formId="form_contact456"
      theme="neobrutalism"
    />
  );
}

​
Form with Custom Redirect

Redirect users after successful submission (requires STANDARD or PRO plan): 
import { Mantlz } from '@mantlz/nextjs';

export default function SignupForm() {
  return (
    <Mantlz
      formId="form_signup789"
      redirectUrl="/thank-you"
    />
  );
}
Free plan users will be redirected to Mantlz’s hosted thank-you page. Upgrade to STANDARD or PRO for custom redirect URLs.

​
Troubleshooting

​
API Key Not Found

If you see an error about missing API key:
  1. Verify the key is in your .env.local file
  2. Restart your development server
  3. Check that the key starts with mk_

​
Form Not Loading

If your form doesn’t appear:
  1. Verify the formId matches your dashboard
  2. Check browser console for errors
  3. Ensure the MantlzProvider wraps your component tree
  4. Confirm your API key is active in the dashboard

​
CORS Errors

The SDK automatically handles CORS with mode: 'cors' and credentials: 'include'. If you encounter CORS issues:
  1. Verify your API key is valid
  2. Check your domain is allowed in dashboard settings
  3. Ensure you’re using HTTPS in production

​
Getting Help

Need assistance? We’re here to help:

Build docs developers (and LLMs) love

Get started for freeTalk to us