Filaforms Logo
FilaForms
Features Pricing Blog Documentation
Try Demo Get Started
Back to blog
Tutorials

Building a contact form in Laravel with Filament (step-by-step)

Manuk Minasyan · · 7 min read

Every Laravel web app needs a contact form. It's usually the first public-facing form you build, and it's deceptively annoying to get right.

This tutorial covers two approaches: building a Laravel contact form manually with Livewire and Filament's form package, and building one with FilaForms. (For a broader look at how the two approaches compare, see FilaForms vs building from scratch.) I'll walk through both so you can pick what fits.

What we're building

A contact form with:

Nothing exotic. The kind of form you've built ten times already.

Prerequisites

Method 1: Manual build with Livewire

Step 1: Database

Create a migration:

php artisan make:migration create_contact_submissions_table


Schema::create('contact_submissions', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->string('email');
    $table->string('subject')->nullable();
    $table->text('message');
    $table->string('ip_address')->nullable();
    $table->timestamps();
});


php artisan migrate

Create the model:

// app/Models/ContactSubmission.php
namespace App\Models;

use Illuminate\Database\Eloquent\Model;


class ContactSubmission extends Model
{
protected $fillable = [
'name',
'email',
'subject',
'message',
'ip_address',
];
}

Step 2: Livewire component

php artisan make:livewire ContactForm


// app/Livewire/ContactForm.php
namespace App\Livewire;

use App\Mail\ContactAdminNotification;
use App\Mail\ContactConfirmation;
use App\Models\ContactSubmission;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\Textarea;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Illuminate\Support\Facades\Mail;
use Livewire\Component;

class ContactForm extends Component implements HasForms
{
    use InteractsWithForms;

    public ?array $data = [];
    public bool $submitted = false;

    public function mount(): void
    {
        $this->form->fill();
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('name')
                    ->required()
                    ->maxLength(255),

                TextInput::make('email')
                    ->email()
                    ->required()
                    ->maxLength(255),

                Select::make('subject')
                    ->options([
                        'general' => 'General inquiry',
                        'support' => 'Technical support',
                        'billing' => 'Billing question',
                        'partnership' => 'Partnership',
                    ])
                    ->placeholder('Select a subject'),

                Textarea::make('message')
                    ->required()
                    ->rows(5)
                    ->maxLength(5000),
            ])
            ->statePath('data');
    }

    public function submit(): void
    {
        $data = $this->form->getState();

        // Honeypot check (see Blade template)
        if (! empty($this->data['website'] ?? null)) {
            return;
        }

        $submission = ContactSubmission::create([
            ...$data,
            'ip_address' => request()->ip(),
        ]);

        // Notify admin
        Mail::to(config('mail.admin_address'))
            ->queue(new ContactAdminNotification($submission));

        // Confirm to submitter
        Mail::to($data['email'])
            ->queue(new ContactConfirmation($submission));

        $this->submitted = true;
        $this->form->fill();
    }

    public function render()
    {
        return view('livewire.contact-form');
    }
}

Step 3: Blade template

{{-- resources/views/livewire/contact-form.blade.php --}}
<div class="max-w-xl mx-auto py-12">
    @if ($submitted)
        <div class="bg-green-50 border border-green-200 rounded-lg p-6">
            <h3 class="text-green-800 font-semibold">Message sent</h3>
            <p class="text-green-700 mt-1">We'll get back to you within 24 hours.</p>
        </div>
    @else
        <form wire:submit="submit">
            {{ $this->form }}

        {{-- Honeypot: hidden from humans, bots fill it in --}}
        &lt;div class=&quot;hidden&quot; aria-hidden=&quot;true&quot;&gt;
            &lt;input type=&quot;text&quot; name=&quot;website&quot; wire:model=&quot;data.website&quot; tabindex=&quot;-1&quot; autocomplete=&quot;off&quot;&gt;
        &lt;/div&gt;

        &lt;button type=&quot;submit&quot; class=&quot;mt-4 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700&quot;&gt;
            Send message
        &lt;/button&gt;
    &lt;/form&gt;
@endif



</div>

Step 4: Mailables

php artisan make:mail ContactAdminNotification --markdown=mail.contact.admin
php artisan make:mail ContactConfirmation --markdown=mail.contact.confirmation


// app/Mail/ContactAdminNotification.php
namespace App\Mail;

use App\Models\ContactSubmission;
use Illuminate\Bus\Queueable;
use Illuminate\Mail\Mailable;
use Illuminate\Mail\Mailables\Content;
use Illuminate\Mail\Mailables\Envelope;
use Illuminate\Queue\SerializesModels;

class ContactAdminNotification extends Mailable
{
    use Queueable, SerializesModels;

    public function __construct(public ContactSubmission $submission) {}

    public function envelope(): Envelope
    {
        return new Envelope(
            subject: "New contact: {$this->submission->subject ?? 'General'}",
        );
    }

    public function content(): Content
    {
        return new Content(
            markdown: 'mail.contact.admin',
        );
    }
}


{{-- resources/views/mail/contact/admin.blade.php --}}
<x-mail::message>
# New contact form submission

**From:** {{ $submission->name }} ({{ $submission->email }})
**Subject:** {{ $submission->subject ?? 'Not specified' }}

{{ $submission->message }}

<x-mail::button :url="url('/admin/contact-submissions/' . $submission->id)">
View in admin
</x-mail::button>

</x-mail::message>

I'll skip the confirmation mailable — same pattern, different copy.

Step 5: Filament resource

php artisan make:filament-resource ContactSubmission --view

Then customize the table columns and form schema. TextColumn for name, email, subject. TextColumn for message with a character limit. Created-at column. Maybe a filter for subject. An export action if you want CSV.

Another 50-80 lines of code I won't paste here because you've written it before.

Step 6: Route

// routes/web.php
Route::get('/contact', function () {
    return view('contact');
});

With a simple page view that renders the Livewire component:

{{-- resources/views/contact.blade.php --}}
<x-layouts.app>
    <livewire:contact-form />
</x-layouts.app>

Total file count

That's 10 files for a contact form. Roughly 3-4 hours if you're moving fast, including testing the email flow.

Method 2: FilaForms

Step 1: Install

composer require filaforms/core
php artisan filaforms:install

Step 2: Register the plugin

// app/Providers/Filament/AdminPanelProvider.php
use FilaForms\Core\FilaFormsPlugin;

public function panel(Panel $panel): Panel
{
return $panel
->plugins([
FilaFormsPlugin::make(),
]);
}

Step 3: Build the form

Open your Filament admin panel. Click "Fila Forms" in the sidebar.

  1. Create a new form, name it "Contact"
  2. Drag in a text field → label it "Name", mark required
  3. Drag in an email field → label it "Email", mark required
  4. Drag in a select field → label it "Subject", add your options
  5. Drag in a textarea field → label it "Message", mark required
  6. Turn on admin email notifications
  7. Turn on auto-responder
  8. Publish

The form is live at a public URL. Submissions appear in your admin panel with filtering, search, and CSV export. Analytics start tracking immediately. Honeypot spam protection is active by default.

Total file count

Zero new files. You edited one existing file (the panel provider) and added two lines.

Time

About 10 minutes, including installation.

Which method should you use?

Use Method 1 if:

Use Method 2 if:

Both approaches produce a working contact form. The difference is time: do you want to spend it on form plumbing or on your actual product?

Resources:

Related posts

Tutorials

Signature Fields in Laravel Forms: When You Need a Real Signature, Not a Checkbox

Checkbox-as-signature doesn't fly for NDAs, waivers, or parental consent. DocuSign is $40/user. Here's how the signature field in FilaForms works — and when it's enough.
Tutorials

Using AI to Classify Form Submissions in Laravel

Your support form gets 100 messages a week. Two are urgent. The 98 "how do I reset my password" messages bury them. Here's a Laravel listener that classifies submissions in under a second — and what it costs.
Tutorials

Accessibility for Laravel Forms: WCAG 2.2 in Practice

Procurement just asked if your form is WCAG 2.2 AA. Here's the practical checklist — what's automatic, what needs care, and where most Laravel forms quietly fail.