README

Build production-ready Laravel forms without writing frontend code

A comprehensive Laravel package featuring a visual drag-and-drop form builder, 28 premium field types, advanced conditional logic, and a schema-driven architecture that makes extending effortless.

Form Builder Interface

Drag-and-drop interface: field palette, canvas, and schema-driven properties panel, fully functional out of the box

What Makes Slick Forms Badass?

✨ Zero Frontend Code Required

Build complex, production-ready forms through a visual interface. No Vue, React, or HTML knowledge needed. Pure Laravel and Livewire magic.

📦 Self Contained

Although we integrate best-in-class libraries (Tom Select, Flatpickr, Quill, Ace Editor), you don't need to install them as dependencies. The entire package works right out of the box on any Laravel project that uses Livewire - zero configuration required.

🧩 32 Premium Field Types

Integrated with best-in-class libraries:

Tom Select v2.3.1 - Searchable, keyboard-navigable dropdowns
Flatpickr v4.6.13 - Powerful date/time pickers with multiple formats
Quill v1.3.6 - Rich WYSIWYG editor for paragraph content
Ace Editor v1.32.2 - Code editor with syntax highlighting
Signature Pad v4.1.7 🆕 - Canvas-based signature capture
Leaflet v1.9.4 🆕 - Interactive maps with location picking
Plus: Password strength indicators, phone fields with country codes, dual-range sliders, rating matrices, and more

What Makes It Badass-er

🎨 Advanced Conditional Logic

Visual Field Picker - Eyedropper tool to select target fields
91 Operator Mappings - Field-type specific operators (text contains, number greater than, date after, etc.)
AND/OR Logic - Build complex conditional rules
Real-time Evaluation - Instant show/hide with Livewire

📊 Built-in Analytics & Reporting

Form Performance Tracking - Views, starts, completions, conversion rates
Field-Level Analytics - Completion rates, drop-off points
Device & Browser Breakdown - User agent tracking
Validation Error Analysis - Most common validation failures
Time-Based Metrics - Average completion time, submissions over time
Visual Dashboards - Chart.js integration for data visualization

📱 Bootstrap 5 Grid System

6 Responsive Breakpoints - xs, sm, md, lg, xl, xxl
Advanced Components - Cards, tabs, accordions with full customization
Layout Elements - Containers, rows, columns with offsets and ordering
Table Layout - Grid-based structured data display

🔌 Three Integration Methods

Choose the approach that fits your workflow:

Built-in Routes - Ready-to-use form management UI at /slick-forms/* (can be overridden)
Livewire Components - Embed <livewire:slick-forms::form-builder /> anywhere
Programmatic API - Build forms via Eloquent models

🚀 What's New in V2

Slick Forms V2 brings enterprise-grade features for advanced form workflows:

📧 Email Notifications

Custom Templates - Design email notifications with Blade templates
Conditional Sending - Send emails based on form data (e.g., only for VIP customers)
Variable Substitution - Insert form values into subject/body with {field_name} syntax
Delivery Tracking - Log all sent emails with timestamps and status
Multiple Recipients - CC/BCC support with dynamic recipient lists

🔗 Webhook Integrations

Real-time POST - Send form submissions to external APIs instantly
Custom Headers - Add authentication tokens, API keys, etc.
Payload Transformation - Map form fields to API structure
Retry Logic - Automatic retries with exponential backoff
Event Logging - Track webhook success/failure with detailed logs

🔒 Advanced Security & Spam Protection

Honeypot Fields - Invisible spam traps that catch bots
Rate Limiting - Prevent abuse with IP-based throttling (configurable per form)
CAPTCHA Integration - Support for Google reCAPTCHA v2/v3 and hCaptcha
Spam Log Analysis - Dashboard showing blocked attempts with IP tracking
IP Blacklisting - Automatically block repeat offenders

🔐 Secure Hashid URLs

All forms use short, non-sequential hashid URLs:

Format - /form/x9kL2p (short, shareable, privacy-friendly)
Custom Salt - Per-form salt option for additional obfuscation
Signed URLs - Add signatures for time-limited, one-time access
Pre-fill Support - Hashid URLs work with pre-filled form data

Hashid URLs hide sequential IDs while remaining compact and shareable. Optional signed URLs add expiration and usage limits - perfect for private forms or surveys.

🗄️ Model Binding

Populate forms from existing database records and save back on submit:

Auto-populate - Fill form fields from Eloquent models
Two-way Binding - Create new records or update existing ones
Dot Notation - Map nested relationships like user.profile.bio
Field Transformers - Apply custom logic before save (e.g., encrypt sensitive data)
Conditional Updates - Only update if user has permission

Perfect for edit profiles, update account settings, or any CRUD operation.

📡 Dynamic Options (Cascading Dropdowns)

Load select options from external sources:

API Integration - Fetch options from REST endpoints
Database Queries - Load from Eloquent models with scopes/filters
Cascading Logic - Child dropdown options based on parent selection
Caching - Configurable TTL to reduce API calls
Placeholder Support - Replace {parent} in URLs for cascading

Example: Country → State → City dropdowns with real-time updates.

🎉 Success Screen Customization

Control what happens after form submission:

Custom Messages - Display personalized thank you messages with variable substitution
Conditional Redirects - Route users to different pages based on their answers
Show Submission Data - Display submitted values with selective field hiding (e.g., hide passwords)
Download Buttons - Offer PDF/CSV downloads of submission data
Edit Links - Allow users to edit their submission after submit
Message Then Redirect - Show a message for X seconds, then auto-redirect
Variable Replacement - Use {{field_name}} and {{submission.id}} in messages/URLs

Perfect for confirmation pages, payment success screens, or multi-step workflows.

🎨 Enhanced Field Types

Three powerful new field types for advanced use cases:

Signature Pad - Canvas-based signature capture with configurable pen colors and canvas size
Location Picker - Interactive maps powered by OpenStreetMap with search, click-to-place, and drag markers
Rating Matrix - Multi-item rating surveys (rate 5 products on same scale) with radio or dropdown input

📚 Form Versioning

Track changes and rollback when needed:

Version Snapshots - Save complete form state (fields, layout, pages, settings)
Version History - View all versions with timestamps and change summaries
One-Click Rollback - Restore any previous version with full data integrity
Nested Element Support - Properly handles complex layout hierarchies
Version Comparison - See what changed between any two versions
Submission Tracking - Know which version collected each submission

Perfect for maintaining audit trails, testing changes safely, or reverting breaking updates.

Quick Start

Get your first form running in under 2 minutes:

# Install the package
composer require itul/slick-forms

# Run migrations
php artisan migrate

# (Optional) Seed with 5 template forms
php artisan db:seed --class=SlickFormsTemplateSeeder

# Visit the builder
open http://your-app.test/slick-forms/manage

That's it! Start building forms immediately.

Key Features

Feature	Description	Learn More
Visual Form Builder	Drag-and-drop interface with real-time preview	Built-in
32 Field Types	Text, email, select, date, signatures, maps, rating matrices, and more	Field Types Reference
Conditional Logic	Show/hide fields with visual picker and 91 operators	Conditional Logic Guide
Advanced Layouts	Bootstrap 5 grid with containers, rows, columns, cards, tabs	Bootstrap Docs
Multi-Page Forms	Wizard-style forms with progress tracking	Multi-Page Forms Guide
Form Analytics	Track submissions, conversions, drop-offs, devices	Analytics Guide
Calculation Fields	Auto-calculate values with formulas (SUM, AVG, etc.)	Calculation Fields Guide
Repeater Fields	Dynamic field groups users can add/remove	Repeater Fields Guide
Input Masks	Format as you type (phone, SSN, credit card)	Input Masks Guide
Email Notifications 🆕	Send custom emails on submission with templates	V2 Feature
Webhook Integrations 🆕	POST submissions to external APIs with retry logic	V2 Feature
Spam Protection 🆕	Honeypot, rate limiting, CAPTCHA, IP blacklisting	V2 Feature
Hashid URLs 🆕	Short, non-sequential URLs with optional signatures	V2 Feature
Model Binding 🆕	Populate forms from database, save back to models	V2 Feature
Dynamic Options 🆕	Cascading dropdowns from APIs or database queries	V2 Feature
Success Screen 🆕	Custom messages, redirects, downloads, edit links	V2 Feature
Signature Pad 🆕	Canvas-based signature capture with pen customization	V2 Field Type
Location Picker 🆕	Interactive maps with search and marker placement	V2 Field Type
Rating Matrix 🆕	Multi-item rating surveys on same scale	V2 Field Type
Form Versioning 🆕	Snapshot, rollback, compare versions, track changes	V2 Feature
Form Templates	5 pre-built professional templates	Templates Guide
Export Submissions	CSV, Excel, PDF export	Exports Guide
Form Submissions	Track, view, and manage submissions with timestamps	Built-in viewer
Extensibility	Create custom field types in minutes with BaseFieldType	Custom Field Types
Production Ready	XSS prevention, CSRF protection, server-side validation	Secure by design

Installation

Requirements

PHP 8.2 or higher
Laravel 11.0 or 12.0
Livewire 3.0
Bootstrap 5 (for styling)
Bootstrap Icons (for field type icons)

Install via Composer

composer require itul/slick-forms

Run Migrations

php artisan migrate

Publish Configuration (Optional)

# Publish config file
php artisan vendor:publish --tag=slick-forms-config

# Publish views for customization
php artisan vendor:publish --tag=slick-forms-views

Seed Template Forms (Optional)

php artisan db:seed --class=SlickFormsTemplateSeeder

This seeds 5 professionally designed templates:

Contact Form
Customer Satisfaction Survey
Product Knowledge Quiz
Client Onboarding (with tabs)
Event Registration

Optional: Export Functionality

Slick Forms supports exporting submissions to CSV, Excel, and PDF formats. These features require optional packages:

# Install export packages
composer require maatwebsite/excel barryvdh/laravel-dompdf

What happens without these packages?

Export buttons are automatically hidden from the submission viewer
The package remains fully functional for form building and submission management
Users see a helpful message explaining how to enable exports

When to install:

You need to export submission data for analysis
Clients require downloadable reports
You want CSV/Excel integration with external tools

Usage Patterns

Choose the integration method that fits your needs:

Option 1: Built-in Routes (Recommended for Quick Start)

Perfect for admins who need a turnkey form management system.

GET  /slick-forms/manage              - List all forms
GET  /slick-forms/manage/create       - Create new form
GET  /slick-forms/builder/{form}      - Build form fields
GET  /slick-forms/form/{form}         - Display form to users
GET  /slick-forms/submissions/{form}  - View submissions

When to use: You want a standalone form builder without custom integration.

Option 2: Livewire Components (For Custom Pages)

Embed form builder, renderer, or submission viewer in your existing Livewire/Blade views.

{{-- Form Builder --}}
<livewire:slick-forms::form-builder :form-id="1" />

{{-- Form Renderer --}}
<livewire:slick-forms::form-renderer :form-id="1" />

{{-- Submission Viewer --}}
<livewire:slick-forms::submission-viewer :form-id="1" />

When to use: You need forms embedded in existing application pages.

Option 3: Programmatic API (For Developers)

Create and manage forms entirely via code.

use Itul\SlickForms\Models\CustomForm;

// Create a form
$form = CustomForm::create([
    'name' => 'Lead Capture Form',
    'description' => 'Collect leads from landing page',
    'is_active' => true,
]);

// Add fields
$form->fields()->create([
    'field_type' => 'email',
    'label' => 'Email Address',
    'name' => 'email',
    'is_required' => true,
    'order' => 1,
]);

// Retrieve submissions
$submissions = $form->submissions()
    ->with('fieldValues')
    ->latest()
    ->get();

foreach ($submissions as $submission) {
    // Process submission data
    $email = $submission->fieldValues
        ->where('field.name', 'email')
        ->first()->value;
}

When to use: You need programmatic form creation or headless usage.

Learn more: Working with Submissions

Field Types Overview

Slick Forms includes 32 field types organized by category:

Category	Fields	Key Features
Input	Text, Email, Number, Password, Phone, URL	Password strength indicator, phone country codes
Selection	Select, Radio, Checkbox, Switch, Tags	Tom Select searchable dropdowns
Date/Time	Date, Time, Date Range	Flatpickr with multiple formats, inline calendar
Files	File, Image, Video	Drag-and-drop upload, image previews
Interactive	Star Rating, Slider, Range, Color Picker	Dual sliders, color palette
Content	Header, Paragraph, Code	Quill WYSIWYG, Ace Editor syntax highlighting
Advanced	Calculation, Repeater, Hidden, Table	Formula evaluation, dynamic rows

→ Full details with examples: Field Types Reference

Documentation

Getting Started

Installation & Setup - (see above)
Building Your First Form - Use the Quick Start guide
Real-World Examples - 10 production-ready form examples
Field Types Reference - Complete catalog of all 32 field types

Configuration

Basic configuration options (config/slick-forms.php):

return [
    // Enable/disable package routes
    'load_routes' => true,

    // Layout to extend for full-page views
    'layout' => 'layouts.app',

    // File upload settings
    'uploads' => [
        'disk' => 'public',
        'max_size' => 10240, // KB
    ],

    // Enable conditional logic
    'conditional_logic_enabled' => true,
];

Environment Variables

SLICK_FORMS_LOAD_ROUTES=true
SLICK_FORMS_LAYOUT=layouts.app
SLICK_FORMS_UPLOAD_DISK=public

Custom Routes

Disable package routes and define your own:

// config/slick-forms.php
'load_routes' => false,

// routes/web.php
use Itul\SlickForms\Http\Controllers\FormBuilderController;

Route::middleware(['auth'])->prefix('admin')->group(function () {
    Route::get('/forms', [FormBuilderController::class, 'index']);
    Route::get('/forms/builder/{form}', [FormBuilderController::class, 'builder']);
});

Analytics & Reporting

Track form performance with built-in analytics:

// Access analytics dashboard
Route: /slick-forms/analytics/{form}

Metrics Tracked:

Form views, starts, completions
Conversion rates and drop-off points
Field completion rates
Device and browser breakdown
Common validation errors
Average completion time
Submissions over time (charts)

Requirements: No additional packages needed - fully built-in.

→ Complete Guide: Analytics Documentation

Multi-Page Forms

Break long forms into steps with progress tracking:

// Enable in form settings
$form->settings = [
    'multi_page_enabled' => true,
    'progress_style' => 'steps', // or 'bar', 'breadcrumb'
];

Features:

Unlimited pages per form
Three progress indicator styles (Steps, Bar, Breadcrumbs)
Per-page validation
Next/Previous navigation
Page-specific fields and layout
Drag-and-drop page reordering

→ Complete Guide: Multi-Page Forms Documentation

Form Templates

Start quickly with 5 professionally designed templates:

# Seed template forms
php artisan db:seed --class=FormTemplatesSeeder

Templates Included:

Contact Form - Basic contact form with name, email, phone, message
Customer Satisfaction Survey - Rating scales and feedback
Product Knowledge Quiz - Multiple choice questions with scoring
Client Onboarding - Multi-page form with tabs
Event Registration - Registration form with attendee details

Browse Templates: /slick-forms/templates (when templates exist)

→ Complete Guide: Templates Documentation

Advanced Features

Calculation Fields

Auto-calculate values based on other fields:

$form->fields()->create([
    'field_type' => 'calculation',
    'name' => 'total',
    'options' => [
        'formula' => '{price} * {quantity}',
        'prefix' => '$',
        'decimal_places' => 2,
    ],
]);

Supported Operations:

Basic operators: +, -, *, /, %, ()
Functions: SUM(), AVG(), MIN(), MAX(), ROUND(), ABS()
Field references: {field_name}
Display formats: Number, Currency, Percentage

→ Complete Guide: Calculation Fields Documentation

Repeater Fields

Let users add/remove groups of fields:

$form->fields()->create([
    'field_type' => 'repeater',
    'name' => 'work_experience',
    'options' => [
        'min_instances' => 1,
        'max_instances' => 10,
        'layout_style' => 'card', // or 'accordion', 'plain'
    ],
]);

Features:

Dynamic add/remove instances
Drag-to-reorder instances
Min/max instance limits
Three layout styles
Nested field support

→ Complete Guide: Repeater Fields Documentation

Input Masks

Format input as users type:

// Available masks: phone, credit_card, ssn, date, time, currency, etc.
$field->options['input_mask'] = 'phone_us'; // (555) 123-4567
$field->options['input_mask'] = 'credit_card'; // 1234 5678 9012 3456
$field->options['input_mask'] = 'ssn'; // 123-45-6789

Mask Types:

Phone (US and International)
Credit Card (auto-detects type)
Date (multiple formats)
Time (12/24 hour)
Currency, Percentage
SSN, ZIP codes
Custom patterns

→ Complete Guide: Input Masks Documentation

Export Submissions

Export form submissions in multiple formats:

# Install optional packages for Excel/PDF
composer require maatwebsite/excel
composer require barryvdh/laravel-dompdf

Export Formats:

CSV - Built-in, no packages required
Excel - Requires maatwebsite/excel
PDF - Requires barryvdh/laravel-dompdf

→ Complete Guide: Exports Documentation

Database Schema

All tables use the slick_ prefix to avoid conflicts:

Core Tables (v1.0)

slick_forms - Form definitions with settings and configuration
slick_form_fields - Form fields with validation and conditional logic
slick_form_layout_elements - Layout structure (containers, rows, columns, cards, tabs, accordions, carousels)
slick_form_submissions - User submissions with IP tracking and metadata
slick_form_field_values - Submitted field values
slick_form_pages - Multi-page form support with progress tracking

Analytics Tables (v1.0)

slick_form_analytics_sessions - User session tracking (device, browser, timing)
slick_form_analytics_events - Analytics events (views, starts, interactions, validations)

Integration Tables (v2.0)

slick_form_email_templates - Email notification templates with variables
slick_form_email_logs - Email delivery tracking and status
slick_form_webhooks - Webhook endpoint configurations
slick_form_webhook_logs - Webhook delivery attempts and responses
slick_form_spam_logs - Spam attempt logging with IP tracking
slick_dynamic_options_cache - Cached dynamic dropdown options
slick_form_model_bindings - Form-to-Eloquent model mappings
slick_form_signed_urls - Signed URL tracking with expiration
slick_form_versions - Form version snapshots and history

Total: 17 tables

Security & Performance

Security Features

XSS Prevention - All user input properly escaped
CSRF Protection - Laravel middleware integration
Server-Side Validation - Never trust client-side validation
File Upload Validation - Type and size restrictions
IP Tracking - Log submission sources

Performance

Optimized Queries - Eager loading to prevent N+1
Livewire Integration - Minimal JavaScript overhead
Asset Management - CDN-ready third-party libraries
Efficient Rendering - Component-based view architecture

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

Note: JavaScript must be enabled for the drag-and-drop builder interface.

Roadmap

V2.1 Planned Features

API endpoints for headless usage (RESTful API for forms and submissions)
Advanced form scheduling (timezone support, recurring availability)
Performance monitoring dashboard (page load times, field render times)
Bulk operations (duplicate multiple forms, bulk delete submissions)

V3.0 Vision

Advanced field types:
- File manager (browse/select existing uploaded files)
- Drawing canvas (free-form drawing with tools)
- Audio recorder (voice memos and audio capture)
Advanced permissions (team collaboration, role-based access)
Advanced automation (Zapier integration, custom workflows)
White-label customization (custom branding, logo, colors)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request to the Bitbucket repository.

Credits

Created by: Brandon Moore

Built with:

Laravel - PHP web framework
Livewire - Reactive components
Bootstrap 5 - UI framework
Tom Select v2.3.1 - Searchable dropdowns
Flatpickr v4.6.13 - Date/time picker
Quill v1.3.6 - WYSIWYG editor
Ace Editor v1.32.2 - Code editor
SortableJS - Drag-and-drop
Signature Pad v4.1.7 - Signature capture
Leaflet v1.9.4 - Interactive maps
Swiper v12 - Carousel/slider functionality
Hashids - URL obfuscation

Inspired By

No source code from the following projects was actually used, but these projects all had features that inspired this project:

formBuilder.online - Form building concepts
VvvebJs - Visual page builder approach
Editor.js - Block-based editing interface

License

Slick Forms is open-source software licensed under the MIT license.

Support

For issues, questions, or feature requests:

Issues: Bitbucket Issue Tracker
Documentation: Complete guides in docs/
Email: brandon@i-tul.com

Star this repository if Slick Forms helps your project!

itul / slick-forms

Maintainers

Details

README

What Makes Slick Forms Badass?

✨ Zero Frontend Code Required

📦 Self Contained

🧩 32 Premium Field Types

What Makes It Badass-er

🎨 Advanced Conditional Logic

📊 Built-in Analytics & Reporting

📱 Bootstrap 5 Grid System

🔌 Three Integration Methods

🚀 What's New in V2

📧 Email Notifications

🔗 Webhook Integrations

🔒 Advanced Security & Spam Protection

🔐 Secure Hashid URLs

🗄️ Model Binding

📡 Dynamic Options (Cascading Dropdowns)

🎉 Success Screen Customization

🎨 Enhanced Field Types

📚 Form Versioning

Quick Start

Key Features

Installation

Requirements

Install via Composer

Run Migrations

Publish Configuration (Optional)

Seed Template Forms (Optional)

Optional: Export Functionality

Usage Patterns

Option 1: Built-in Routes (Recommended for Quick Start)

Option 2: Livewire Components (For Custom Pages)

Option 3: Programmatic API (For Developers)

Field Types Overview

Documentation

Getting Started

Advanced Features

Extending Slick Forms

External Resources

Configuration

Environment Variables

Custom Routes

Analytics & Reporting

Multi-Page Forms

Form Templates

Advanced Features

Calculation Fields

Repeater Fields

Input Masks

Export Submissions

Database Schema

Core Tables (v1.0)

Analytics Tables (v1.0)

Integration Tables (v2.0)

Security & Performance

Security Features

Performance

Browser Support

Roadmap

V2.1 Planned Features

V3.0 Vision

Contributing

Credits

License

Support