Skip to main content
Get up and running with Javaabu Forms by creating a complete user profile form with validation and model binding.

​
Prerequisites

Before you begin, ensure you have:
  • Completed the Installation steps
  • A working Laravel application
  • Basic knowledge of Laravel Blade templates

​
Create Your First Form

Let’s build a user profile form that demonstrates the key features of Javaabu Forms.
1

Create the Controller

Create a controller to handle the form:
php artisan make:controller ProfileController
Add the following methods to app/Http/Controllers/ProfileController.php:
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class ProfileController extends Controller
{
    public function edit()
    {
        $user = Auth::user();
        return view('profile.edit', compact('user'));
    }

    public function update(Request $request)
    {
        $validated = $request->validate([
            'name' => 'required|string|max:255',
            'email' => 'required|email|max:255',
            'bio' => 'nullable|string|max:1000',
            'country' => 'required|string',
        ]);

        Auth::user()->update($validated);

        return redirect()->route('profile.edit')
            ->with('success', 'Profile updated successfully!');
    }
}
2

Create the Blade View

Create a view file at resources/views/profile/edit.blade.php:
<x-forms::form method="PUT" action="{{ route('profile.update') }}">
    <h2>Edit Profile</h2>

    @if (session('success'))
        <x-forms::alert type="success">
            {{ session('success') }}
        </x-forms::alert>
    @endif

    {{-- Model binding automatically fills form values from $user --}}
    @model($user)

    <x-forms::text
        name="name"
        label="Full Name"
        required
        placeholder="Enter your full name"
    />

    <x-forms::email
        name="email"
        label="Email Address"
        required
        help="We'll never share your email with anyone else."
    />

    <x-forms::textarea
        name="bio"
        label="Biography"
        rows="4"
        placeholder="Tell us about yourself..."
    />

    <x-forms::select
        name="country"
        label="Country"
        required
        :options="[
            'us' => 'United States',
            'uk' => 'United Kingdom',
            'ca' => 'Canada',
            'au' => 'Australia',
            'mv' => 'Maldives',
        ]"
        placeholder="Select your country"
    />

    @endmodel

    <x-forms::submit>
        Save Changes
    </x-forms::submit>
</x-forms::form>
3

Add Routes

Add the routes to routes/web.php:
use App\Http\Controllers\ProfileController;

Route::middleware('auth')->group(function () {
    Route::get('/profile', [ProfileController::class, 'edit'])
        ->name('profile.edit');
    Route::put('/profile', [ProfileController::class, 'update'])
        ->name('profile.update');
});
4

Test Your Form

Visit /profile in your browser to see the form in action. The form will:
  • Automatically display existing user data (model binding)
  • Show validation errors inline when submission fails
  • Preserve user input after validation errors
  • Update the user profile on successful submission

​
What Just Happened?

Let’s break down the key features you just used:

​
Model Binding

The @model($user) directive automatically binds the user model to the form. All form components within this block will retrieve their values from the model: 
@model($user)
    <x-forms::text name="name" />  {{-- Automatically fills with $user->name --}}
@endmodel

​
Automatic Validation Errors

When validation fails, errors are automatically displayed below each field. No need to manually check for errors: 
<x-forms::text name="email" />
{{-- If validation fails, error appears here automatically --}}

​
Method Spoofing

The form component handles HTTP method spoofing for PUT/PATCH/DELETE requests: 
<x-forms::form method="PUT" action="{{ route('profile.update') }}">
    {{-- Generates hidden _method field automatically --}}
</x-forms::form>

​
CSRF Protection

CSRF tokens are included automatically: 
<x-forms::form action="{{ route('profile.update') }}">
    {{-- @csrf directive added automatically --}}
</x-forms::form>

​
Common Patterns

​
Creating vs Editing Forms

Use the same form for both create and edit actions by conditionally binding the model: 
<x-forms::form method="{{ $user->exists ? 'PUT' : 'POST' }}" 
               action="{{ $user->exists ? route('users.update', $user) : route('users.store') }}">
    
    @if($user->exists)
        @model($user)
    @endif

    <x-forms::text name="name" label="Name" />
    <x-forms::email name="email" label="Email" />

    @if($user->exists)
        @endmodel
    @endif

    <x-forms::submit>
        {{ $user->exists ? 'Update' : 'Create' }} User
    </x-forms::submit>
</x-forms::form>

​
Inline Forms

Create horizontal forms with labels beside inputs: 
<x-forms::text
    name="name"
    label="Name"
    inline
/>

​
Floating Labels

Use Bootstrap 5’s floating labels: 
<x-forms::text
    name="name"
    label="Name"
    floating
    show-placeholder
/>

​
Next Steps

Core Concepts

Learn about model binding, validation errors, and Blade directives

Form Inputs

Explore all available input components

Advanced Features

Discover Select2, WYSIWYG editors, file uploads, and more

Configuration

Customize framework settings, icons, and component defaults

​
Need Help?

  • Check the Requirements if you encounter issues
  • Browse the component documentation for detailed usage
  • Visit the GitHub repository to report issues

Build docs developers (and LLMs) love

Get started for freeTalk to us