Creating Forms in Laravel fast!

Or how to build custom components using LaravelCollective and a bit of magic.

TL;DR: Creating forms with inputs and validation errors in the project is usually long and boring copy-paste process. So today I want to show you my approach which looks like this:

I hope you already tried LaravelCollective package in your Laravel applications before, because it’s great tool to build Forms. What we will be focusing today is creating custom components such as inputs, selects etc. The goal is to speed up developing process, and as a bonus — keep all our HTML for each component in one place, so it could be easily modified for the whole project once.

Installation

Please follow the Installation Instructions on LaravelCollective (LC) page. It’s pretty easy. Also it would be great to get familiar with Form opening/closing.

Creating a Component

On the LC page you could also find a way how to create custom components. I prefer to build it as Service Provider. So let’s make a new one, run command:

php artisan make:provider FormGroupServiceProvider

And we need to add it to config/app.php file in providers section, as usual:

'providers' => [
    // ...
    App\Providers\FormGroupServiceProvider::class,
    // ...
  ],

Let’s open our new Provider, and create very first component for text input inside the boot method. (Don’t forget to use Form; class in the Provider)

Form::component('textGroup','components.text', ['params','errors']);

So, textGroup is how we will call our component. You can call it however you want. The second parameter is a file path in views directory where our template for the components will be live. The third param is an array with options required for our component. We could add any additional option if needed, but I stays with those two: params and errors.

Let’s build our template, so you will have better understanding what those options do. Create a file text.blade.php in resources/views/components/ directory. Of course, you could name that directory as you wish, but since we’re making components, it would make sense to name it just like that.

And here’s how my template in this file looks like:

Basically, we just have a proper HTML for each text input with params, and it would be the one place in the project where it stores.

And here’s how to create a text input somewhere in a Form:

{{ Form::textGroup([
        'name' => 'firstname',
        'value' => $user->firstname,
        'label' => 'First Name',
    ], $errors) }}

But I prefer to put it in one line, so my forms looks compacted, like this:

Notice the option “type” for email and phone, by default it is “text”.

Now we have a Completed Form with Error Messages just in 10 lines!

Sure, in my real applications I’m using a lot more components like: Select, Checkbox, Radio, File Uploader, etc. And I need just one line to declare any of those components in my Forms.

I’m not pretending for a great solution, and would happy to know how you managing form components for faster development. Please let me know in the comments.

And happy coding ;)