A Laravel package to help build forms
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
config
src
.editorconfig
.gitignore
CHANGELOG.md
CONDUCT.md
CONTRIBUTING.md
LICENSE
LICENSE.md
README.md
composer.json

README.md

laravel-form

Install

Step 1: Install via Composer

$ composer require webup/laravel-form

Step 2: Add the Service Provider

Add this line to config/app.php:

'providers' => [
    //...
    Webup\LaravelForm\FormServiceProvider::class
]

Step 3: Use Facade (optional)

For shorter code, you can use the facade by adding this line to config/app.php:

'aliases' => [
    //...
    'Form'      => Webup\LaravelForm\Facades\Form::class,
]

You can now use Laravel Form directly into your views (check some examples bellow)

Step 4: Publish config

You can publish config and override it in config/form.php:

 php artisan vendor:publish

Using

Methods

These methods can be used with any type of elements:

  • label($label = null, $escape = true)
  • value($value = null)
  • placeholder($placeholder = null)
  • name($name = null)
  • required($showStar = true)
  • errors($errors = [])
  • attr(array $attr = [])
  • wrapperAttr(array $attr = [])
  • wrapperClass($wrapperClass) deprecated use wrapperAttr(['class' => 'myclass'])

Generated HTML

{!! Form::create('text', 'name')
    ->label('Name')
    ->value('Barney')
    ->required()
    ->attr(['maxlenght' => '50'])
    ->wrapperAttr(['class' => 'f-custom-class']) !!}

Without errors:

<div class="f-group f-custom-class">
    <label for="name">Name <i class="f-required">*</i></label>    
    <input type="text" id="name" name="name" value="Barney" maxlength="50">
</div>

With errors (retrieve from Laravel validation):

<div class="f-group f-custom-class f-error">
    <label for="name">Name <i class="f-required">*</i></label>    
    <input type="text" id="name" name="name" value="Barney" maxlength="50">
    <ul class="f-error-message">
        <li>Name is required</li>
    </ul>
</div>

You can override default CSS class in config/form.php.

Important: Laravel Form can handle HTML generation and client side validation only. You need to manage server side validation on your own.

Elements

input

{!! Form::create('email', 'name')
    ->label('Email')
    ->value('homer.simpson@example.com')
    ->placeholder('example@adresse.com')
    ->required()
    ->wrapperAttr(['class' => 'custom-class']) !!}

textarea

{!! Form::create('textarea', 'name')
    ->label('Name')
    ->value('Nullam id dolor id nibh ultricies vehicula ut id elit.') !!}

radio

{!! Form::create('radio', 'gender')->label('Gender')
    ->addRadio(1, 'Male', 'male')
    ->addRadio(0, 'Female', 'female')
    ->wrapperAttr(['class' => 'custom-class'])
    ->value(0) !!}

Specific methods :

  • addRadio($value, $label, $id, $attr = [])

select

{!! Form::create('select', 'fruits')
    ->label("Fruits")
    ->placeholder("What's your favorite?")
    ->addOptions(['apple' => 'Apple', 'strawberry' => 'Strawberry', 'melon' => 'Melon'])
    ->value('apple') !!}

Specific methods :

  • addOptions(array $options)

checkbox

{!! Form::create('checkbox', 'cgu')
    ->label("I accept the general terms and conditions")
    ->value(true) !!}

AntiSpam feature

Honeypot

{!! Form::honeypot("unicorn_mail") !!}

Will create an input text with name='unicorn_mail' within a hidden div (by javascript)

Validation

$request->validate([
    [...]
    'unicorn_mail' => 'honeypot',
]);

TimeTrap

{!! Form::timetrap("unicorn_time") !!}

Will create an input text with name='unicorn_time' and value="{encryptedTimestamp}" within a hidden div (by javascript)

Validation

$request->validate([
    [...]
    'unicorn_time' => 'timetrap:2',
]);

In this example, timetrap time is set to 2 seconds. If no value is set, config form.antiSpam.minFormSubmitTime is taken. Finally if config form.antiSpam.minFormSubmitTime is not set, default value is 3 seconds.

Styling

Bellow, you will find default styles that can work with Laravel Form.

.f-group {
  margin-bottom: 1rem;
}

.f-group label {
  margin-bottom: .5rem;    
}

.f-required {
  color: #c0392b;
  font-weight: bold;
}

.f-error input {
  border: 1px solid #c0392b;
}

.f-error-message {
  margin-top: 4px;
  color: #c0392b;
}

Contributing

Please see CONTRIBUTING and CONDUCT for details.

Credits

Developed by Agence Webup

License

The MIT License (MIT). Please see License File for more information.