Filament Dynamic Form Builder Laravel Package

Getting Started

Minimal Steps to First Use

1. Installation

   composer require avnsh1111/filament-dynamic-form-builder
   php artisan vendor:publish --tag=filament-dfb-config
   php artisan vendor:publish --tag=filament-dfb-migrations
   php artisan migrate
   php artisan filament:assets
   

   Register the plugin in your PanelProvider:

   public function panel(Panel $panel): Panel
   {
       return $panel->plugin(DynamicFormBuilderPlugin::make());
   }
   

2. Access the Builder Navigate to /admin/forms in your Filament panel to create your first dynamic form.

3. Design a Form

   • Click "Create Form" and define fields (e.g., text, select, checkbox) using the visual builder.
   • Organize fields into sections and adjust layouts (e.g., grid, columns).
   • Add custom HTML attributes (e.g., class="required").

4. First Render Use the runtime renderer in a Blade view:

   <livewire:av-dynamic-form slug="your-form-slug" />
   

   Replace your-form-slug with the slug of your saved form.

First Use Case: Contact Form

1. Create a form with fields: name, email, message (textarea).
2. Enable email notifications in the form settings (specify recipients and template).
3. Embed the form on a frontend page using the Livewire component.
4. Submit the form to trigger storage + email delivery.

Implementation Patterns

Core Workflows

1. Form Design & Management

• Visual Builder: Drag-and-drop fields in the Filament panel (/admin/forms).
  • Supports nested sections (e.g., "Personal Info," "Payment Details").
  • Layout control: Use Grid, Columns, or Stack layouts for responsive design.
• Field Types: Leverage Filament’s native fields (e.g., TextInput, RichEditor, FileUpload) plus custom attributes (e.g., data-validation="required").
• Reusable Forms: Save forms as templates and duplicate them for similar use cases (e.g., "Event Registration" → "Workshop Registration").

2. Frontend Integration

• Livewire Component:

  <livewire:av-dynamic-form
      slug="contact-us"
      submit-button-label="Send Message"
      success-message="Thanks! We'll get back to you soon."
  />
  

  • Props:
    • slug: Required (links to the saved form).
    • submit_button_label: Customize the submit button text.
    • success_message: Override the default success message.
    • honeypot_enabled: Disable if not using spam protection.
• Dynamic Styling: Use custom_html_attributes in the builder to add Tailwind/CSS classes or data-* attributes.

3. Submission Handling

• Storage: Submissions auto-save to the dynamic_form_entries table (with timestamps, IP, user agent).
• Email Notifications:
  • Configure recipients and templates in the form’s "Email" tab.
  • Use Markdown templates for dynamic content (e.g., {entry.name}).
  • Test with the "Send Test Email" button in the panel.
• Webhooks: Extend the package to trigger external APIs on submission (see Gotchas).

4. Data Access

• Admin Panel: View submissions via /admin/forms/{slug}/entries.
• API Access: Query entries via Eloquent:

  use Avnsh1111\FilamentDynamicFormBuilder\Models\Entry;
  
  $entries = Entry::where('form_slug', 'contact-us')->latest()->get();
  

• Frontend Data: Pass submissions to Livewire props or use JavaScript to fetch via API routes (if published).

Integration Tips

With Filament Resources

• Embed Forms in Resources:

  use Avnsh1111\FilamentDynamicFormBuilder\Widgets\DynamicFormWidget;
  
  public static function getWidgets(): array
  {
      return [
          DynamicFormWidget::make('Feedback')
              ->slug('feedback-form')
              ->columnSpanFull(),
      ];
  }
  

• Form-Specific Logic: Use the form_updated event to sync external data:

  event(new \Avnsh1111\FilamentDynamicFormBuilder\Events\FormUpdated($form));
  

Custom Fields

• Extend Field Types: Create a custom field (e.g., PhoneInput) by extending Filament\Forms\Components\Field and register it in the builder:

  // config/filament-dfb.php
  'fields' => [
      \App\Filament\Forms\Components\PhoneInput::class,
  ],
  

Asset Management

• File Uploads: Files are stored in storage/app/public/dynamic-form-uploads/{form_slug}/.
• Asset Registration: Ensure filament:assets is run after publishing migrations.

Gotchas and Tips

Pitfalls

1. Slug Conflicts:

   • Forms rely on slug for routing. Ensure uniqueness across the system.
   • Fix: Use a UUID or append a timestamp to slugs in custom migrations.

2. Email Template Parsing:

   • Issue: {entry.field_name} syntax fails if field_name has spaces or special chars.
   • Fix: Use underscores (e.g., first_name instead of first name) or sanitize in the template:

     // Override the email template logic in a service provider
     Event::listen(FormSubmitted::class, function ($event) {
         $event->template = str_replace(['{entry.' => '{entry->'], $event->template);
     });
     

3. Livewire Component Not Loading:

   • Cause: Missing filament:assets or incorrect Livewire namespace.
   • Fix:

     php artisan filament:assets
     

     Verify the component is registered in resources/js/app.js:

     import './filament';
     

4. File Upload Limits:

   • Issue: Large uploads may hit PHP’s upload_max_filesize or post_max_size.
   • Fix: Configure in .env:

     UPLOAD_MAX_SIZE=20M
     POST_MAX_SIZE=25M
     

5. Honeypot Bypass:

   • Issue: Spam submissions slip through if the honeypot field is visible.
   • Fix: Style the honeypot field with display: none !important; in your form’s CSS.

Debugging

1. Form Not Rendering:

   • Check the browser console for Livewire errors.
   • Verify the slug matches a published form in the database:

     SELECT * FROM `dynamic_forms` WHERE `slug` = 'your-slug';
     

2. Email Not Sending:

   • Test with a local SMTP (e.g., Mailpit) to avoid production issues.
   • Check logs for failed mailers:

     tail -f storage/logs/laravel.log | grep "Swift_"
     

3. Database Issues:

   • Run migrations again if fields are missing:

     php artisan migrate:fresh --env=local
     

Extension Points

1. Custom Entry Model:

   • Extend the Entry model to add fields (e.g., status):

     php artisan make:model DynamicFormEntryExtension --extend=Avnsh1111\FilamentDynamicFormBuilder\Models\Entry
     

   • Add a migration and update the model in config/filament-dfb.php:

     'entry_model' => \App\Models\DynamicFormEntryExtension::class,
     

2. Pre/Post Submission Hooks:

   • Listen to events in a service provider:

     use Avnsh1111\FilamentDynamicFormBuilder\Events\FormSubmitted;
     
     Event::listen(FormSubmitted::class, function ($event) {
         // Log submission or trigger a webhook
         Log::info('Form submitted', $event->entry->toArray());
     });
     

3. Dynamic Form Fields via API:

   • Publish the API routes and create a controller to fetch form schemas:

     Route::get('/api/forms/{slug}', [DynamicFormController::class, 'showSchema']);
     

   • Useful for headless or SPA integrations.

4. Multi-Language Support:

   • Override the Form model to add a locale field and translate field labels:

     use Spatie\Translatable\HasTranslations;
     
     class DynamicForm extends Model
     {
         use HasTranslations;
         public $translatable = ['title', 'description'];
     }
     

Pro Tips

1. Form Versioning:
   • Use