A native JS form builder inspired by Google Forms.
Just load the javascript and the CSS and call new FormBuilder(container)
, using theFormBuilder
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>
To save the created form just store the object returned by formBuilder.exportState()
.
// exporting
const state = formBuilder.exportState();
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);
Give a look at the documentation to see a bit more of importState
and exportState