Laravel Form Showcase
Discover real-world examples and use cases of Laravel Form in action. See how different applications leverage the fluent builder API to create complex, structured forms with tabs, groups, and custom fields.
Dynamic Admin Panel Forms
Admin Panel Forms
Complex forms with tabs and groups for content management
Overview
Admin panels often require complex forms with multiple sections, tabs, and grouped fields. Laravel Form makes it easy to build these forms programmatically, organize them into logical tabs, and group related fields together. This is perfect for content management systems, e-commerce admin panels, and any application that needs sophisticated form structures.
Key Features
- Tab-based organization
- Grouped field sections
- Automatic validation
- Consistent form structure
- Easy to maintain and extend
Use Cases
- Product management forms
- User profile editing
- Content creation forms
- Settings and configuration
- Multi-step form wizards
Implementation Example
use JobMetric\Form\FormBuilder;
class ProductFormService
{
public function buildCreateForm(): Form
{
return FormBuilder::make()
->action(route('products.store'))
->method('POST')
->enctype('multipart/form-data')
->name('product-form')
->tab(function ($tab) {
$tab->id('basic')
->label('Basic Information')
->selected()
->group(function ($group) {
$group->label('Product Details')
->customField(function ($field) {
$field->text()
->name('name')
->label('Product Name')
->required()
->validation('required|string|max:255')
->build();
})
->customField(function ($field) {
$field->text()
->name('sku')
->label('SKU')
->required()
->validation('required|string|unique:products,sku')
->build();
})
->build();
})
->group(function ($group) {
$group->label('Pricing')
->customField(function ($field) {
$field->number()
->name('price')
->label('Price')
->required()
->min(0)
->validation('required|numeric|min:0')
->build();
})
->customField(function ($field) {
$field->number()
->name('compare_at_price')
->label('Compare at Price')
->min(0)
->build();
})
->build();
})
->build();
})
->tab(function ($tab) {
$tab->id('media')
->label('Media')
->group(function ($group) {
$group->label('Images')
->customField(function ($field) {
$field->image()
->name('main_image')
->label('Main Image')
->required()
->build();
})
->customField(function ($field) {
$field->image()
->name('gallery_images')
->label('Gallery Images')
->multiple()
->build();
})
->build();
})
->build();
})
->tab(function ($tab) {
$tab->id('seo')
->label('SEO')
->group(function ($group) {
$group->label('SEO Settings')
->customField(function ($field) {
$field->text()
->name('meta_title')
->label('Meta Title')
->build();
})
->customField(function ($field) {
$field->text()
->name('meta_description')
->label('Meta Description')
->build();
})
->build();
})
->build();
})
->build();
}
}
Multi-Step Form Wizards
Multi-Step Form Wizards
Step-by-step forms with progress tracking and validation
Overview
Multi-step form wizards break complex forms into manageable steps. Each step can be represented as a tab, with progress tracking and step-by-step validation. Laravel Form's tab system is perfect for building these wizards, allowing users to navigate between steps while maintaining form state.
Key Features
- Step-by-step navigation
- Progress tracking
- Step validation
- Form state management
- Conditional step visibility
Use Cases
- Registration wizards
- Onboarding processes
- Order checkout flows
- Application forms
- Configuration wizards
Implementation Example
use JobMetric\Form\FormBuilder;
class RegistrationWizardService
{
public function buildWizardForm(): Form
{
return FormBuilder::make()
->action(route('register.complete'))
->method('POST')
->name('registration-wizard')
->tab(function ($tab) {
$tab->id('step1')
->label('Step 1: Personal Info')
->selected()
->position('start')
->group(function ($group) {
$group->label('Basic Information')
->customField(function ($field) {
$field->text()
->name('first_name')
->label('First Name')
->required()
->validation('required|string|max:255')
->build();
})
->customField(function ($field) {
$field->text()
->name('last_name')
->label('Last Name')
->required()
->validation('required|string|max:255')
->build();
})
->build();
})
->build();
})
->tab(function ($tab) {
$tab->id('step2')
->label('Step 2: Contact Info')
->position('start')
->group(function ($group) {
$group->label('Contact Details')
->customField(function ($field) {
$field->email()
->name('email')
->label('Email Address')
->required()
->validation('required|email|unique:users,email')
->build();
})
->customField(function ($field) {
$field->tel()
->name('phone')
->label('Phone Number')
->build();
})
->build();
})
->build();
})
->tab(function ($tab) {
$tab->id('step3')
->label('Step 3: Account Setup')
->position('end')
->group(function ($group) {
$group->label('Account Credentials')
->customField(function ($field) {
$field->password()
->name('password')
->label('Password')
->required()
->validation('required|string|min:8|confirmed')
->build();
})
->customField(function ($field) {
$field->password()
->name('password_confirmation')
->label('Confirm Password')
->required()
->build();
})
->build();
})
->build();
})
->build();
}
}
API-Driven Form Builder
API Form Builder
Export form definitions as JSON for frontend frameworks
Overview
Build form definitions in Laravel and export them as JSON for use in frontend frameworks like React, Vue, or Angular. The toArray() method provides a complete serialization of form configurations, making it easy to build API-driven form builders where form structures are stored in the database and rendered dynamically.
Key Features
- JSON serialization
- Frontend framework integration
- Database-driven forms
- Dynamic form rendering
- Form versioning support
Use Cases
- React form libraries
- Vue form builders
- Angular reactive forms
- Mobile app forms
- Multi-platform form sync
Implementation Example
use JobMetric\Form\FormBuilder;
class FormApiController extends Controller
{
public function getFormDefinition(string $formType)
{
$form = $this->buildForm($formType);
return response()->json([
'form' => $form->toArray(),
'validation' => $this->getValidationRules($form),
]);
}
private function buildForm(string $formType): Form
{
return match($formType) {
'user' => $this->buildUserForm(),
'product' => $this->buildProductForm(),
'order' => $this->buildOrderForm(),
default => throw new \InvalidArgumentException("Unknown form type: {$formType}"),
};
}
private function buildUserForm(): Form
{
return FormBuilder::make()
->action('/api/users')
->method('POST')
->tab(function ($tab) {
$tab->id('personal')
->label('Personal Information')
->group(function ($group) {
$group->label('Basic Info')
->customField(function ($field) {
$field->text()
->name('name')
->label('Full Name')
->required()
->build();
})
->build();
})
->build();
})
->build();
}
}
Configuration Forms
Settings & Configuration
Organized settings forms with grouped options
Overview
Configuration forms often have many settings organized into logical groups. Laravel Form's group system makes it easy to organize these settings, with clear labels and descriptions. Tabs can separate different configuration categories, making complex settings pages manageable and user-friendly.
Key Features
- Grouped settings
- Tab-based categories
- Clear organization
- Easy to navigate
- Consistent structure
Use Cases
- Application settings
- User preferences
- System configuration
- Plugin settings
- Integration settings
Implementation Example
use JobMetric\Form\FormBuilder;
class SettingsFormService
{
public function buildSettingsForm(): Form
{
return FormBuilder::make()
->action(route('settings.update'))
->method('PUT')
->name('settings-form')
->tab(function ($tab) {
$tab->id('general')
->label('General Settings')
->selected()
->group(function ($group) {
$group->label('Application')
->customField(function ($field) {
$field->text()
->name('app_name')
->label('Application Name')
->value(config('app.name'))
->build();
})
->customField(function ($field) {
$field->select()
->name('timezone')
->label('Timezone')
->options(function ($opt) {
$opt->label('UTC')->value('UTC')->build();
$opt->label('America/New_York')->value('America/New_York')->build();
})
->build();
})
->build();
})
->build();
})
->tab(function ($tab) {
$tab->id('email')
->label('Email Settings')
->group(function ($group) {
$group->label('SMTP Configuration')
->customField(function ($field) {
$field->text()
->name('smtp_host')
->label('SMTP Host')
->build();
})
->customField(function ($field) {
$field->number()
->name('smtp_port')
->label('SMTP Port')
->value(587)
->build();
})
->build();
})
->build();
})
->build();
}
}
Get Started
Ready to build your own forms? Get started with Laravel Form: