ContactForm Component

The ContactForm component provides a form for collecting contact information and messages from users.

Basic Usage

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

export default function ContactPage() {
  return (
    <div className="container mx-auto p-4">
      <ContactForm 
        formId="your-form-id"
        title="Get in Touch"
        description="Have questions? We'd love to hear from you."
        customSubmitText="Send"
      />
    </div>
  );
}

Customizing Field Labels

You can customize all field labels and placeholders:

<ContactForm
  formId="your-form-id"
  nameLabel="Full Name"
  namePlaceholder="John Doe"
  emailLabel="Email Address"
  emailPlaceholder="john@example.com"
  subjectLabel="Message Topic"
  subjectPlaceholder="Support Request"
  messageLabel="Your Message"
  messagePlaceholder="Tell us how we can help you..."
/>

Event Handlers

<ContactForm
  formId="your-form-id"
  onSubmitSuccess={(data) => {
    // Handle successful submission
    console.log('Form submitted:', data);
    // Trigger analytics or other actions
  }}
  onSubmitError={(error) => {
    // Handle submission error
    console.error('Submission failed:', error);
  }}
/>

Post-Submission Redirects

After form submission, you can specify a redirect URL (STANDARD and PRO plans only):

<ContactForm
  formId="your-form-id"
  redirectUrl="/thank-you" // Custom redirect URL (premium feature)
/>

Note: Free plan users will always be redirected to Mantlz's hosted thank-you page.

Available Core Props

Prop	Type	Description
formId	string	Required. The ID of the form in your Mantlz dashboard.
customSubmitText	string	Text for the submit button. Default: 'Send Message'
title	string	Form title text. Default: 'Contact Us'
description	string	Form description text. Default: 'Fill out the form below...'
nameLabel	string	Label for name field. Default: 'Name'
namePlaceholder	string	Placeholder for name field.
emailLabel	string	Label for email field. Default: 'Email'
emailPlaceholder	string	Placeholder for email field.
subjectLabel	string	Label for subject field. Default: 'Subject'
subjectPlaceholder	string	Placeholder for subject field.
messageLabel	string	Label for message field. Default: 'Message'
messagePlaceholder	string	Placeholder for message field.
onSubmitSuccess	function	Callback fired on successful submission.
onSubmitError	function	Callback fired on submission error.
redirectUrl	string	URL to redirect to after successful submission (premium).

For appearance customization options, see the Appearance section.