Dynamic Forms

Capture leads and collect data effortlessly. Build beautiful, multi-language forms without coding — contact forms, surveys, registrations, and more.

Features

🎨 Visual Form Builder

Create forms visually in the admin panel:

• Drag-and-drop field arrangement
• Live preview as you build
• Conditional logic — show/hide fields based on responses
• Styling options — match your brand

🌍 Multi-Language Support

Forms are fully translatable:

• Translate labels, placeholders, help text
• Per-locale success messages
• Language-specific button text
• Automatic locale detection

📊 Submission Management

Track and manage all submissions:

• Inbox view — see all responses
• Status tracking — new, read, spam, archived
• Search & filter — find submissions quickly
• CSV export — download for analysis
• Email notifications — get notified of new submissions

🔒 Spam Protection

Built-in protection:

• Honeypot fields — invisible spam traps
• Rate limiting — prevent abuse
• CAPTCHA support — optional reCAPTCHA
• IP tracking — monitor suspicious activity

Creating a Form

1. Go to Forms in the sidebar
2. Click + New Form
3. Add fields using the builder
4. Configure settings and notifications
5. Save as draft or Publish

Field Types

Field Type	Description
Text	Single line input
Email	Email with validation
Phone	Phone number input
Textarea	Multi-line text
Select	Dropdown menu
Radio	Single choice
Checkbox	Multiple choices or agreement
File	File upload (images, PDFs)
Date	Date picker
Number	Numeric input
Hidden	Hidden values (tracking, source)

Embedding Forms

In Pages (Puck Editor)

1. Add a Form Block to your page
2. Select the form by slug
3. Style as needed

In Custom Code

import { FormRenderer } from "@/components";
import { getForm } from "@/lib/forms";

export default async function ContactPage({ params }) {
  const form = await getForm("contact", params.locale);
  return <FormRenderer form={form} locale={params.locale} />;
}

Direct API

// Fetch form
const form = await fetch('/api/forms/contact?locale=en');

// Submit form
await fetch('/api/forms/contact/submit', {
  method: 'POST',
  body: JSON.stringify({ data: formData })
});

Email Notifications

Configure notifications for each form:

• To addresses — who receives submissions
• Subject line — customizable per form
• Reply-to — set to submitter's email
• Confirmation emails — send thank-you to submitter

Per-Organization SMTP

Each organization can configure their own SMTP settings:

1. Go to Settings → SMTP
2. Enter server details (host, port, credentials)
3. Test connection
4. Forms will use org-specific settings

Analytics

Track form performance:

• Submission count — total, today, this week
• Conversion rate — views to submissions
• Drop-off analysis — where users abandon
• Response time — avg. time to complete

---

💡 Pro Tip

Use hidden fields to track marketing campaigns by adding UTM parameters automatically.