📦 View in Marketplace • 📖 Documentation • ⭐ GitHub

@djangocfg/ext-leads

Lead capture and management extension with dynamic form builder for DjangoCFG.

Part of DjangoCFG — modern Django framework for production-ready SaaS applications.

Features

• 🎯 Lead Management - Capture, organize, and track leads
• 📝 Form Builder - Create custom contact forms dynamically
• 📊 Lead Analytics - Track conversion rates and sources
• 🔔 Notifications - Real-time lead alerts
• 📋 Custom Fields - Add custom fields to lead forms
• 🔄 CRM Integration - Export leads to external CRM systems
• 📧 Auto-Response - Automated email responses to submissions

Install

pnpm add @djangocfg/ext-leads

Usage

Provider Setup

import { LeadsExtensionProvider } from '@djangocfg/ext-leads/hooks';

export default function RootLayout({ children }) {
  return (
    <LeadsExtensionProvider>
      {children}
    </LeadsExtensionProvider>
  );
}

Lead Management

import { useLeadsContext } from '@djangocfg/ext-leads/hooks';

function LeadsPage() {
  const {
    leads,
    isLoadingLeads,
    createLead,
    updateLead,
    deleteLead,
  } = useLeadsContext();

  const handleCreate = async () => {
    await createLead({
      email: '[email protected]',
      first_name: 'John',
      last_name: 'Doe',
      company: 'Acme Corp',
      phone: '+1234567890',
      source: 'website',
    });
  };

  return (
    <div>
      <button onClick={handleCreate}>Add Lead</button>
      {leads.map(lead => (
        <div key={lead.id}>
          <h3>{lead.first_name} {lead.last_name}</h3>
          <p>{lead.email}</p>
          <p>Source: {lead.source}</p>
          <button onClick={() => updateLead(lead.id, { status: 'contacted' })}>
            Mark as Contacted
          </button>
        </div>
      ))}
    </div>
  );
}

Contact Form

import { useContactFormContext } from '@djangocfg/ext-leads/hooks';

function ContactPage() {
  const { submitForm, isSubmitting } = useContactFormContext();

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);

    await submitForm({
      email: formData.get('email') as string,
      first_name: formData.get('name') as string,
      message: formData.get('message') as string,
      source: 'contact_page',
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" placeholder="Your Name" required />
      <input name="email" type="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" required />
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Sending...' : 'Submit'}
      </button>
    </form>
  );
}

Custom Form Builder

import { useContactFormContext } from '@djangocfg/ext-leads/hooks';

function FormBuilder() {
  const { createForm, forms } = useContactFormContext();

  const handleCreateForm = async () => {
    await createForm({
      name: 'Product Demo Request',
      fields: [
        { name: 'email', type: 'email', required: true },
        { name: 'company', type: 'text', required: true },
        { name: 'employees', type: 'select', options: ['1-10', '11-50', '51+'] },
      ],
      success_message: 'Thank you! We will contact you soon.',
      redirect_url: '/thank-you',
    });
  };

  return (
    <div>
      <button onClick={handleCreateForm}>Create Form</button>
      {forms.map(form => (
        <div key={form.id}>
          <h3>{form.name}</h3>
          <p>{form.fields.length} fields</p>
        </div>
      ))}
    </div>
  );
}

API Reference

Leads Context

• leads - List of all leads
• createLead(data) - Create new lead
• updateLead(id, data) - Update lead information
• deleteLead(id) - Delete lead
• getLeadById(id) - Get lead details
• exportLeads(filters) - Export leads as CSV

Contact Form Context

• forms - List of custom forms
• createForm(data) - Create new form
• submitForm(data) - Submit form data as lead
• updateForm(id, data) - Update form configuration
• deleteForm(id) - Delete form
• isSubmitting - Form submission state

License

MIT

Links

• DjangoCFG Documentation
• GitHub