FormBuilder for Laravel

Never have to write the code for the form ever again.

Form's UI is based on Metronic Demo 13 UI.

This form builder supports various types of HTML Inputs. Here is the list of the supported inputs.

  1. Text

  2. Email

  3. Password

  4. Select

  5. Range

  6. Checkbox

  7. Radio

  8. Switch

  9. Textarea

  10. File

  11. Avatar

  12. Tags

  13. Date

  14. Number

  15. Url

  16. Tel

This form builder is all based on the parameter passed from the controller. The custom helper function will then decode that parameter and develops a form accordingly.

Let's get started.

1.Prepare these parameters on the controller

  • Text / Email / Password/Url/Number/Date/Tel

[
    // Whether the field is text, email or password
    'type' => 'text', // 'text' or 'email' or 'password'
    // or 'url' or 'number' or 'date' or 'tel'
    // Unique ID for the input field 
    'id' => '',
    // Name for the input field
    'name' => '',
    // Whether to show or hide the label and tooltips
    'hideLabel' => false, //true or false
    // Text for the label
    'labelText' => '',
    // Text for the label tooltip
    'labelTooltipText' => 'Text for the label tooltip',
    // Whether the field is required or not
    'required' => false, // true or false
    // Any attributes that the input["text | email | 
    // password | url | number | date | tel"] supports
    'attributes' => [
        'disabled' => true,
        ''=>'',
    ],
    // Prefilling value for the input field
    'currentValue' => '',
    // Error key which the input field shows error for
    'errorKey' => '',
    // Whether to show or hide the error message if exists
    'showInvalidFeedback' => true, // true or false
],
[
    'type' => 'text',  // 'text' or 'email' or 'password'
    // or 'url' or 'number' or 'date' or 'tel'
    'id' => '',
    'name' => '',
    'hideLabel' => false,
    'labelText' => '',
    'labelTooltipText' => '',
    'required' => false,
    'attributes' => [
        // ''=>'',
    ],
    'currentValue' => '',
    'errorKey' => '',
    'showInvalidFeedback' => true,
],
  • Select

[
    // Defining the type as select
    'type' => 'select',
    // Unique ID for the select field
    'id' => '',
    // Name for the select field
    'name' => '',
    // Whether to show or hide the label and tooltips
    'hideLabel' => false, //true or false
    // Text for the label
    'labelText' => '',
    // Text for the label tooltip
    'labelTooltipText' => '',
    // Whether the field is required or not
    'required' => false, // true or false
    // Any attributes that the select supports
    'attributes' => [
        'data-control' => "select2",
        'data-control' => "select2",
        'data-hide-search' => "true",
        'data-placeholder' => "Select ",
        'tabindex' => "-1",
        'aria-hidden' => "true",
        'disabled' => true,
    ],
    // Defining the options for the select options
    'options' => [
            ['value' => "a", 'text' => "A"],
            ['value' => "b", 'text' => "B"],
        ], // Provide array, not string
    // Prefilling the currently selected option, one from above options
    'currentSelectedOption' => '',
    // Error key which the input field shows error for
    'errorKey' => '',
    // Whether to show or hide the error message if exists
    'showInvalidFeedback' => true, // true or false
],
[
    'type' => 'select',
    'id' => '',
    'name' => '',
    'hideLabel' => false,
    'labelText' => '',
    'labelTooltipText' => '',
    'required' => false, 
    'attributes' => [
        'data-control' => "select2",
        'data-control' => "select2",
        'data-hide-search' => "true",
        'data-placeholder' => "Select ",
        'tabindex' => "-1",
        'aria-hidden' => "true",
    ],
    'options' => [
            ['value' => "", 'text' => ""],
            ['value' => "", 'text' => ""],
        ], 
    'currentSelectedOption' => '',
    'errorKey' => '',
    'showInvalidFeedback' => true,
],
  • Range

[
    // Defining the type as range
    'type' => 'range',
    // Unique ID for the range field
    'id' => '',
    // Name for the range field
    'name' => '',
    // Whether to show or hide the label and tooltips
    'hideLabel' => false, // true or false
    // Text for the label
    'labelText' => '',
    // Text for the label tooltip
    'labelTooltipText' => '',
    // Whether the field is required or not
    'required' => false, // true or false
    // Any attributes that the input["range"] supports
    'attributes' => [
        'min' => '',
        'max' => '',
        'step' => '',
        'disabled' => true,
    ],
    // Prefilling value for the range field
    'currentValue' => '',
    // Error key which the input field shows error for
    'errorKey' => '',
    // Whether to show or hide the error message if exists
    'showInvalidFeedback' => true, // true or false
],
[
    'type' => 'range',
    'id' => '',
    'name' => '',
    'hideLabel' => false,
    'labelText' => '',
    'labelTooltipText' => '',
    'required' => false,
    'attributes' => [
        // '' => '',
        // '' => true/false
    ],
    'currentValue' => '',
    'errorKey' => '',
    'showInvalidFeedback' => true,
],
  • Checkbox

[
    // Defining the type as checkbox
    'type' => 'checkbox',
    // Unique ID for the checkbox field
    'id' => '',
    // Name for the checkbox field
    'name' => '',
    // Whether to show or hide the label and tooltips
    'hideLabel' => false, // true or false
    // Text for the label
    'labelText' => '',
    // Text for the label tooltip
    'labelTooltipText' => '',
    // Text for the checkbox
    'checkboxText' => '',
    // Whether the field is required or not
    'required' => false, // true or false
    // Any attributes that the input["checkbox"] supports
    'attributes' => [
        'disabled' => true, // true or false
    ],
    // Prechecking the checkbox
    'currentValue' => 'off', // on or off
    // Error key which the input field shows error for
    'errorKey' => '',
    // Whether to show or hide the error message if exists
    'showInvalidFeedback' => true, // true or false
],
[
    'type' => 'checkbox',
    'id' => '',
    'name' => '',
    'hideLabel' => false,
    'labelText' => '',
    'labelTooltipText' => '',
    'checkboxText' => '',
    'required' => false,
    'attributes' => [
        // '' => '',
        // '' => true/false
    ],
    // Prechecking the checkbox
    'currentValue' => 'off', // on or off
    // Error key which the input field shows error for
    'errorKey' => '',
    // Whether to show or hide the error message if exists
    'showInvalidFeedback' => true, // true or false
],
  • Radio

[
    // Defining the type as radio
    'type' => 'radio',
    // Unique ID for the radio field
    'id' => '',
    // Name for the radio field
    'name' => '',
    // Whether to show or hide the label and tooltips
    'hideLabel' => false, // true or false
    // Text for the label
    'labelText' => '',
    // Text for the label tooltip
    'labelTooltipText' => '',
    // Whether the field is required or not
    'required' => false, // true or false
    // Options for the radio input fields
    'options' => [
        [
            // Key for the radio option
            "key" => "",
            // Text to display for the radio option
            "text" => "",
            // Whether the option is enabled or not
            "disabled" => true, // true or false
        ],
        ...
    ],
    // Prefilling the selected option corresponds to {options.key}
    'currentValue' => '',
    // Error key which the input field shows error to
    'errorKey' => '',
    // Whether to show or hide the error message if exists
    'showInvalidFeedback' => true, // true or false
],
[
    'type' => 'radio',
    'id' => '',
    'name' => '',
    'hideLabel' => false,
    'labelText' => '',
    'labelTooltipText' => '',
    'required' => false,
    'options' => [
        [
            "key" => "",
            "text" => "",
            "disabled" => false, 
        ],
        ...
    ],
    'currentValue' => '',
    'errorKey' => '',
    'showInvalidFeedback' => true,
],
  • Switch

[
    // Defining the type as switch
    'type' => 'switch',
    // Unique ID for the switch field
    'id' => '',
    // Name for the switch field
    'name' => '',
    // Whether to show or hide the label and tooltips
    'hideLabel' => false, // true or false
    // Text for the label
    'labelText' => '',
    // Text for the label tooltip
    'labelTooltipText' => '',
    // Text for the switch
    'switchLabelText' => '',
    // Whether the field is required or not
    'required' => false, // true or false
    // Any attributes that the input["checkbox"] supports
    'attributes' => [
        'disabled' => true, // true or false
    ],
    // Prechecking the switch
    'currentValue' => 'off', //on or off
    // Error key which the input field shows error to
    'errorKey' => '',
    // Whether to show or hide the error message if exists
    'showInvalidFeedback' => true, // true or false
],
[
    'type' => 'switch',
    'id' => '',
    'name' => '',
    'hideLabel' => false,
    'labelText' => '',
    'labelTooltipText' => '',
    'switchLabelText' => '',
    'required' => false,
    'attributes' => [
        // '' => '',
        // '' => true/false
    ],
    'currentValue' => 'off',
    'errorKey' => '',
    'showInvalidFeedback' => true,
],
  • Textarea

[
    // Defining the type as textarea
    'type' => 'textarea',
    // Unique ID for the textarea field
    'id' => '',
    // Name for the textarea field
    'name' => '',
    // Whether to show or hide the label and tooltips
    'hideLabel' => false, // true or false
    // Text for the label
    'labelText' => '',
    // Text for the label tooltip
    'labelTooltipText' => '',
    // Whether the field is required or not
    'required' => false, // true or false
    // Whether to initialize the trumbowyg editor
    'initializeTrumbowyg' => true, // true or false
    // Config for the trumbowyg editor
    'trumbowygConfig' => "[]", // In string, not array
    // Any attributes that the textarea supports
    'attributes' => [
        'disabled' => true, // true or false
    ],
    // Prefilling value for the textarea field
    'currentValue' => '',
    // Error key which the input field shows error to
    'errorKey' => '',
    // Whether to show or hide the error message if exists
    'showInvalidFeedback' => true, // true or false
],
[
    'type' => 'textarea',
    'id' => '',
    'name' => '',
    'hideLabel' => false, 
    'labelText' => '',
    'labelTooltipText' => '',
    'required' => false,
    'initializeTrumbowyg' => true,
    'trumbowygConfig' => "[]",
    'attributes' => [
        // '' => '',
        // '' => true/false
    ],
    'currentValue' => '',
    'errorKey' => '',
    'showInvalidFeedback' => true,
],
  • File

[
    // Defining the type as file
    'type' => 'file',
    // Unique ID for the file field
    'id' => '',
    // Name for the file field
    'name' => '',
    // Whether to show or hide the label and tooltips
    'hideLabel' => false, // true or false
    // Text for the label
    'labelText' => '',
    // Text for the label tooltip
    'labelTooltipText' => '',
    // Whether the field is required or not
    'required' => true, // true or false
    // Allowed file types to upload
    'allowedFileTypes' => '*',
    // File Size Limit Message
    'fileSizeLimitMessage' => 'Max file size is 200MB',
    // Any attributes that the input["file"] supports
    'attributes' => [
        'disabled' => true, // true or false
    ],
     // Current file name to render
    'currentFileName' => '',
    // Error key which the input field shows error to
    'errorKey' => '',
    // Whether to show or hide the error message if exists
    'showInvalidFeedback' => true, // true or false
],
[
    'type' => 'file',
    'id' => '',
    'name' => '',
    'hideLabel' => false,
    'labelText' => '',
    'labelTooltipText' => '',
    'required' => true,
    'allowedFileTypes' => '*',
    'fileSizeLimitMessage' => 'Max file size is 200MB',
    'attributes' => [
        // '' => '',
        // '' => true/false
    ],
    'currentFileName' => '',
    'errorKey' => '',
    'showInvalidFeedback' => true,
],
  • Avatar

[
    // Defining the type as avatar
    'type' => 'avatar',
    // Unique ID for the avatar field
    'id' => '',
    // Name for the avatar field
    'name' => '',
    // Whether to show or hide the label and tooltips
    'hideLabel' => false, // true or false
    // Text for the label
    'labelText' => '',
    // Text for the label tooltip
    'labelTooltipText' => '',
    // Whether the field is required or not
    'required' => true, // true or false
    // Allowed file types to upload
    'allowedFileTypes' => '*',
    // Any attributes that the input["file"] supports
    'attributes' => [
        'disabled' => true, // true or false
    ],
    // Current file url to render
    'currentFileURL' => 'http://...',
    // Error key which the input field shows error to
    'errorKey' => '',
    // Whether to show or hide the error message if exists
    'showInvalidFeedback' => true, // true or false
],
[
    'type' => 'avatar',
    'id' => '',
    'name' => '',
    'hideLabel' => false,
    'labelText' => '',
    'labelTooltipText' => '',
    'required' => true, 
    'allowedFileTypes' => '*',
    'attributes' => [
        // '' => '',
        // '' => true/false
    ],
    'currentFileURL' => '',
    'errorKey' => '',
    'showInvalidFeedback' => true,
],
  • Tags

[
    // Defining the type as tags
    'type' => 'tags',
    // Unique ID for the input field
    'id' => '', // Imp: Seperate words by "_" and not "-". 
    // Name for the input field
    'name' => '',
    // Whether to show or hide the label and tooltips
    'hideLabel' => false, //true or false
    // Text for the label
    'labelText' => '',
    // Text for the label tooltip
    'labelTooltipText' => '',
    // Whether the field is required or not
    'required' => false, // true or false
    // Config for the tags input
    'tagsConfig' => '{}', // In string, not array
    // Any attributes that the input["text"] supports
    'attributes' => [
        'disabled' => false,
    ],
    // Prefilling value for the input field
    'currentValue' => '',
    // Error key which the input field shows error for
    'errorKey' => '',
    // Whether to show or hide the error message if exists
    'showInvalidFeedback' => true, // true or false
],
[
    'type' => 'tags',
    'id' => '',
    'name' => '',
    'hideLabel' => false,
    'labelText' => '',
    'labelTooltipText' => '',
    'required' => false,
    'tagsConfig' => '{}',
    'attributes' => [
        // '' => '',
        // '' => true/false
    ],
    'currentValue' => '',
    'errorKey' => '',
    'showInvalidFeedback' => true,
],

2.Pass it to the view

return view('view', compact('parameter'));
// or
return view('view')->with('parameter',$parameter);

3.Call the form_builder helper function

 {!! form_builder($parameter, $errors) !!}

4.See the magic