fl-form-builder
A 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 -->
Saving the form state
To save the created form just store the object – or a serialization of it – returned by formBuilder.exportState()
.
// exportingconst state = formBuilder;
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.
// importingconst formBuilder = container;formBuilder;
Plugins
You can add custom field types. They must follow this react signature:
const FieldCreatorPropType =info: ReactPropTypesshapetype: ReactPropTypesstringgroup: ReactPropTypesstringdisplayName: ReactPropTypesstringinitialState: ReactPropTypesshapetype: ReactPropTypesstringgroup: ReactPropTypesstringdisplayName: ReactPropTypesstringrequired: ReactPropTypesboolconfigShowing: ReactPropTypesboolRenderEditor: ReactPropTypesfunc // React render function;
To add your plugins just send them in an array at instantiation time.
const formBuilder = container CustomPlugin1 CustomPlugin1;