Git Product home page Git Product logo

laraform's Introduction

Dynamic Form Builder for Laravel with Vue.js

Create even the most complex forms with ease, using two-sided validation,
eloquent, nested elements, conditional logic, wizards and many more.

Laraform Community Edition (Vue.js)

Laraform is a premium library aiming to become the world's best form builder tool for web developers. It enhances collaboration by standardizing the creation of forms and increases efficiency by eliminating tons of repetitive work. Laraform comes with a lighter "Community Edition" and a full version which can be purchased at our website.

Features

Full features of Laraform:

  • Two-sided validation
  • 54 Laravel compatible frontend validators
  • Eloquent ORM support
  • Multiple file uploads
  • 34+ built-in elements
  • Nested elements
  • Repeatable elements
  • Translatable elements
  • Conditional logic
  • Form wizard
  • Localization
  • Theming
  • Extensibility

Examples

Browser Support

Laraform aims to support the latest versions of:

  • Google Chrome
  • Firefox
  • Apple Safari
  • Microsoft Edge
  • Opera
  • Safari iOS
  • Chrome, Firefox and Default Browser Android

Installation

Laraform is a full-stack library which comes with a separate frontend and backend library. This will install Laraform's Community Edition. For the full package please check out our website.

Install frontend library for Vue.js:

npm i laraform --save

Make sure you have the following peer dependencies installed:

npm i axios lodash moment vue --save

Install backend library for Laravel:

composer require laraform/laraform-laravel

Publish assets:

php artisan vendor:publish

When asked, choose: Laraform\LaraformServiceProvider. This will publish a config file at config/laraform.php.

Usage

Create a form at app\Forms\FirstForm.php:

<?php

namespace App\Forms;

class FirstForm extends \Laraform
{
  public function schema() {
    return [
      'hello_world' => [
        'type' => 'text',
        'label' => 'Hello',
        'default' => 'World'
      ]
    ];
  }
}

Pass the form to view in routes/web.php using app() function:

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

Set up rendering in view in 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>

Include Laraform in resources/js/app.js:

require('./bootstrap');

import Vue from 'vue'
import Laraform from 'laraform'

Vue.use(Laraform)

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

Import theme in resources/sass/app.scss:

@import 'laraform/src/themes/default/scss/theme.scss';

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/src/themes/bs4/scss/theme.scss';

Laraform currently support Bootstrap 3 and Bootstrap 4. If you are using one of those also make sure to change the global theme in config/laraform.php to bs3 or bs4:

// ...
'theme' => 'bs4',

// ...

Compile your assets with:

npm run dev

Launch your site for example with:

php artisan serve

Now if you load the site you should see a very simple form with one single input. Check out our docs to learn how to create more advanced forms.

You can also download Examples to see more forms in action.

Feature Comparison

Full Version Community Edition
Backend support
Elements all checkbox, checkbox group, hidden, key, meta,
multiselect (native), password, radio, radio group, static,
textarea, text
File uploads -
Nested elements -
Custom elements
Translatable elements -
Localization
Custom locales
Validation
Validation rules all accepted, alpha, alpha_dash, alpha_num, between,
boolean, digits, digits_between, email, filled, in,
integer, ip, ipv4, ipv6, json, max, min, not_in, not_regex,
numeric, regex, required, size, string, timezone, url, uuid
Custom rules
Conditions -
Tabs -
Wizard -
Events & hooks
Buttons
Themes all all
Custom themes -
Custom styles
Custom layout
Code splitting -
Get Full version Try out Community Edition

Documentation

A complete Developer Guide and API Reference is available at Laraform website.

Issue Tracking

Laraform uses GitHub Issues for official bug tracking. Please follow our issue template to help us hunt down bugs as efficiently as possible.

Support & Contribution

If you have any questions about Laraform or interested in contributing, please drop us a line at [email protected]. We are happy for receiving feedbacks as well as growing our enthusiastic developer team.

License

Laraform Community Edition comes with an GPL license so you are free to use this library in your projects. For the full version check out the license at our website.

Vueform

If you are looking for a form builder library that specifically focuses on Vue.js, check out vueform.com.

laraform's People

Contributors

adamberecz avatar laraform avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.