fl-form-builder

fl-form-builder

Build Status

A native JS form builder inspired by Google Forms.

Getting started

Creating a form-builder

Just load the javascript and the CSS and call new FormBuilder(container), using the
FormBuilder global object.

<!-- RequireJS -->
<link rel="stylesheet" href="../dist/fl-form-builder.css">
<script src="../dist/fl-form-builder.js"></script>

<div class="form-builder-container"></div>

<script>
  var container = document.querySelector('.form-builder-container');
  const formBuilder = new FormBuilder(container);
</script>

Saving the form state

To save the created form just store the object returned by formBuilder.exportState().

  // 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.

  // importing
  const formBuilder = new FormBuilder(container);
  formBuilder.importState(state);

Docs

Give a look at the documentation to see a bit more of importState and exportState