Feedback Stay At Home and get up to 33% off with STAYATHOME coupon code | 0d 0h 0m 0s left

Usage

#Using Laraform With Laravel

If you are using Laravel you can rely on Laraform's frontend and backend library as well. This guide will help you set up Laraform within your project. It assumes you have installed a fresh Laravel 7.x project and the full Laraform library itself.

#Create TestForm.php

Create a test form in app/Forms/TestForm.php with the following content:

<?php

namespace App\Forms;

class TestForm extends \Laraform
{
  public $schema = [
    'hello_world' => [
      'type' => 'text',
      'label' => 'Hello',
      'default' => 'World'
    ]
  ];

  public $buttons = [[
    'label' => 'Submit'
  ]];
}

#Pass The TestForm To View

Pass the form to the welcome view which comes as a default with Laravel. Update your routes/web.php with the following:

<?php

Route::get('/', function () {
  return view('welcome', [
    'form' => app('App\Forms\TestForm')
  ]);
});

#Render The TestForm

Render the form in your resources/views/welcome.blade.php:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Laravel</title>

    <link rel="stylesheet" type="text/css" href="/css/app.css">
  </head>
  <body>
    <div id="app">
      {!! $form->render() !!}
    </div>

    <script src="/js/app.js"></script>
  </body>
</html>

If you check out the source code, you'll notice that all this render() function does is that it renders a Vue component, passing the json schema as :form prop. Everything else will be taken care by the Vue library on the frontend.

#Include Laraform in app.js

The next is to add Laraform to resources/js/app.js which is the main javascript file your project will use:

require('./bootstrap');

import Vue from 'vue'
import Laraform from '@laraform/laraform'

Laraform.config({
  theme: 'default',
  endpoints: {
    process: '/laraform/process'
  }
})

Vue.use(Laraform)

const app = new Vue({
  el: '#app',
})

What are we doing here?

  1. We include Vue.js and Laraform
  2. We create a basic configuration for Laraform
  3. We install Laraform as a Vue.js plugin
  4. We create our Vue.js app instance

#Include Theme in app.scss

Laraform comes with a default theme that does not require any other CSS framework to rely on. You can include it by adding this to your resources/sass/app.scss

// Laraform's default theme file
@import '~@laraform/laraform/src/themes/default/scss/theme';

Note on Using CSS Frameworks

If you are planning to use a CSS framework, like Bootstrap, make sure you include its theme file before Laraform's theme, so that Laraform can make use of the CSS framework's variables.

This is how it should look like in case of Bootstrap 4:

// Bootstrap 4's main theme file
@import '~bootstrap/scss/bootstrap';

// Laraform's theme file created for Bootstrap 4
@import "~@laraform/laraform/src/themes/bs4/scss/theme";

Laraform currently support Bootstrap 3 and Bootstrap 4. If you are planning to use one of those also make sure to change the global theme in the configuration to bs3 or bs4:

// resources/js/app.js

// ...

Laraform.config({
  theme: 'bs4', // or 'bs3'
  endpoints: {
    process: '/laraform/process'
  }
})

// ...

You can learn more about themes at Style & Theme chapter.

#Compile & Run

Now you should have everything set up, so just run:

npm run dev

Once assets are compiled you can launch your site for example with:

php artisan serve

You should see a very simple form with one single input and a Submit button:

From this on you can create forms on the backend without writing any frontend code. However you can also connect frontend forms to backend forms and make use of all Laraform's capabilities. Check out how to Connect To Vue Component in Backend to see how.


#Using Laraform without Laravel

Even if you are not into Laravel you can still use Laraform! Laraform's frontend library is a powerful tool itself, in fact it does most of the work and you only have to take care of processing data. Let's see how you can use Laraform's standlone Vue.js library.

#Create TestForm.vue

First create a TestForm.vue file in you project, preferably in a components/forms directory:

<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        hello_world: {
          type: 'text',
          label: 'Hello',
          default: 'World'
        }
      },
      buttons: [{
        label: 'Submit'
      }]
    })
  }
</script>
Note that Laraform is a mixin available globally, so you do not need to import it separately.

#Import Laraform And TestForm.vue

In your main javascript file import Laraform and the TestForm.vue we've just created.

import Vue from 'vue'
import Laraform from '@laraform/laraform'
import TestForm from './path/to/components/forms/TestForm.vue'

Vue.use(Laraform)

const app = new Vue({
  el: '#app',
  components: {
    TestForm
  }
})

#Import Theme

Laraform comes with a default theme that does not require any other CSS framework to rely on. You can include it by adding the following to your main .scss file:

// Laraform's default theme file
@import '~@laraform/laraform/src/themes/default/scss/theme';

Note on Using CSS Frameworks

If you are planning to use a CSS framework, like Bootstrap, make sure to include its theme file before Laraform's theme, so that Laraform can make use of the CSS framework's variables.

This is how it should look like in case of Bootstrap 4:

// Bootstrap 4's main theme file
@import '~bootstrap/scss/bootstrap';

// Laraform's theme file created for Bootstrap 4
@import "~@laraform/laraform/src/themes/bs4/scss/theme";

Laraform currently support Bootstrap 3 and Bootstrap 4. If you are planning to use one of those also make sure to change the global theme in the configuration to bs3 or bs4:

import Vue from 'vue'
import Laraform from '@laraform/laraform'
import TestForm from './path/to/components/forms/TestForm.vue'

Laraform.config({
  theme: 'bs4', // or 'bs3'
})

Vue.use(Laraform)

const app = new Vue({
  el: '#app',
  components: {
    TestForm
  }
})

You can learn more about themes at Style & Theme chapter.

#Render The Form

Render the form simply by adding it as a Vue component to your HTML:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/css/app.css">
  </head>
  <body>
    <div id="app">
      <test-form></test-form>
    </div>
    <script src="/js/app.js"></script>
  </body>
</html>

#Compile & Run

Now you have everything you need for your form. Compile code and run the website. You should see a very simple form with one single input and a Submit button:

#

#What's Next?

Once you have a basic form working on your website, you can start digging deeper and create more advanced forms.

First it's strongly recommended to try out examples by downloading and installing them from our Github repo: github.com/laraform/examples

If you would rather continue reading on the guide you can proceed with Rendering.