https://github.com/fourlabsldn/fl-form-builder

Vanilla JS form builder
https://github.com/fourlabsldn/fl-form-builder

Last synced: 2 months ago
JSON representation

Vanilla JS form builder

• Host: GitHub
• URL: https://github.com/fourlabsldn/fl-form-builder
• Owner: fourlabsldn
• License: mit
• Created: 2016-03-14T10:33:30.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2018-07-23T14:34:45.000Z (almost 7 years ago)
• Last Synced: 2025-04-16T05:17:29.671Z (3 months ago)
• Language: JavaScript
• Homepage: https://fourlabsldn.github.io/fl-form-builder/
• Size: 22 MB
• Stars: 19
• Watchers: 6
• Forks: 9
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# fl-form-builder

[![Build Status](https://travis-ci.org/fourlabsldn/fl-form-builder.svg?branch=master)](https://travis-ci.org/fourlabsldn/fl-form-builder)

[![npm Downloads](https://img.shields.io/npm/dt/fl-form-builder.svg)](https://www.npmjs.com/package/fl-form-builder)

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/fourlabsldn/fl-form-builder/master/LICENSE)

A JS form builder **inspired by Google Forms**.

- **[Try it online.](https://fourlabsldn.github.io/fl-form-builder/examples/custom-type/)**

![Usage demo](https://fourlabsldn.github.io/fl-form-builder/examples/usage-demo.gif)

## Getting started

### Creating a form-builder

Just load the javascript and the CSS and call `new FormBuilder(container)`, using the

`FormBuilder` global object.

```html



  var container = document.querySelector('.form-builder-container');

  const formBuilder = new FormBuilder(container);

```

### Saving the form state

To save the created form just store the object – or a serialization of it – returned by `formBuilder.exportState()`.

``` javascript

  // exporting

  const state = formBuilder.exportState();

```

### Restoring a form state

If you want to get the form-builder back to the way it was when the user last used it, you can just import the state you saved with the `importState` method. You could, for example, do that when the form loads.

``` javascript

  // importing

  const formBuilder = new FormBuilder(container);

  formBuilder.importState(state);

```

# Plugins

 You can add custom field types. They must follow this react signature:

``` javascript

  const FieldCreatorPropType = {

    info: React.PropTypes.shape({

      type: React.PropTypes.string,

      group: React.PropTypes.string,

      displayName: React.PropTypes.string,

    }),

    initialState: React.PropTypes.shape({

      type: React.PropTypes.string,

      group: React.PropTypes.string,

      displayName: React.PropTypes.string,

      required: React.PropTypes.bool,

      configShowing: React.PropTypes.bool,

    }),

    RenderEditor: React.PropTypes.func, // React render function

  };

```

To add your plugins just send them in an array at instantiation time.

``` javascript

  const formBuilder = new FormBuilder(container. [CustomPlugin1, CustomPlugin1]);

```