Post-Submission Redirects

After a user submits a form, they can be redirected to a thank-you page. How this redirection works depends on your Mantlz subscription plan.

Plan-Based Redirection

Mantlz offers different redirect behavior based on your subscription plan:

• Free Users: Always redirected to Mantlz's hosted thank-you page
• Paid Users (STANDARD/PRO): Can specify custom redirect URLs or use the default Mantlz thank-you page

Implementation

Basic Usage (Free Plan)

Free users' forms are automatically redirected to Mantlz's hosted thank-you page:

// Free user form (uses Mantlz's hosted thank-you page)
<FeedbackForm 
  formId="customer-feedback"
/>

Custom Redirect (STANDARD/PRO plans only)

Paid users can specify a custom redirect URL to their own thank-you page:

// Paid user form with custom redirect
<FeedbackForm 
  formId="customer-feedback"
  redirectUrl="/thank-you"  // Redirects to your custom page
/>

How It Works

1. After form submission, the server checks the user's plan
2. If a redirectUrl is provided and the user is on a STANDARD or PRO plan, they're redirected to their custom URL
3. Otherwise, all users get redirected to the Mantlz hosted thank-you page
4. Free users who try to use a custom redirectUrl will see a toast message explaining that it's a premium feature

Example Custom Thank-You Page

// pages/thank-you.js or app/thank-you/page.tsx
export default function ThankYouPage() {
  return (
    <div className="max-w-md mx-auto py-16 text-center">
      <img src="/your-logo.svg" alt="Your Company" className="mx-auto mb-6 h-10" />
      
      <h1 className="text-3xl font-bold mb-4">Thank You!</h1>
      
      <p className="text-lg mb-6">
        We've received your feedback and appreciate your input.
      </p>
      
      <div className="bg-green-50 border border-green-100 rounded-lg p-6 mb-8">
        <p className="text-green-800">
          Our team will review your submission and may reach out if needed.
        </p>
      </div>
      
      <a 
        href="/" 
        className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
      >
        Return to Home
      </a>
    </div>
  );
}

API Reference

The redirectUrl prop is available on all form components:

// Available on FeedbackForm
<FeedbackForm 
  formId="customer-feedback"
  redirectUrl="/thank-you"
/>

// Available on ContactForm
<ContactForm 
  formId="contact-form"
  redirectUrl="/message-received"
/>

// Available on WaitlistForm
<WaitlistForm 
  formId="waitlist-form"
  redirectUrl="/joined"
/>

Technical Notes

• Redirects happen server-side for improved performance
• Local development redirects work for all users regardless of plan for testing purposes
• The URL must be a valid URL that exists on your application
• Redirects also work with the REST API by passing the redirectUrl parameter in the request body