{"id":19810300,"url":"https://github.com/fourlabsldn/fl-form-builder","last_synced_at":"2025-05-01T08:31:53.400Z","repository":{"id":57237848,"uuid":"53847532","full_name":"fourlabsldn/fl-form-builder","owner":"fourlabsldn","description":"Vanilla JS form builder","archived":false,"fork":false,"pushed_at":"2018-07-23T14:34:45.000Z","size":23042,"stargazers_count":19,"open_issues_count":0,"forks_count":9,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-16T05:17:29.671Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://fourlabsldn.github.io/fl-form-builder/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fourlabsldn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-14T10:33:30.000Z","updated_at":"2024-10-15T23:00:18.000Z","dependencies_parsed_at":"2022-08-26T14:04:25.308Z","dependency_job_id":null,"html_url":"https://github.com/fourlabsldn/fl-form-builder","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fourlabsldn%2Ffl-form-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fourlabsldn%2Ffl-form-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fourlabsldn%2Ffl-form-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fourlabsldn%2Ffl-form-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fourlabsldn","download_url":"https://codeload.github.com/fourlabsldn/fl-form-builder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251847805,"owners_count":21653581,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-12T09:20:29.377Z","updated_at":"2025-05-01T08:31:52.786Z","avatar_url":"https://github.com/fourlabsldn.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# fl-form-builder\n\n[![Build Status](https://travis-ci.org/fourlabsldn/fl-form-builder.svg?branch=master)](https://travis-ci.org/fourlabsldn/fl-form-builder)\n[![npm Downloads](https://img.shields.io/npm/dt/fl-form-builder.svg)](https://www.npmjs.com/package/fl-form-builder)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/fourlabsldn/fl-form-builder/master/LICENSE)\n\nA JS form builder **inspired by Google Forms**.\n\n- **[Try it online.](https://fourlabsldn.github.io/fl-form-builder/examples/custom-type/)**\n\n![Usage demo](https://fourlabsldn.github.io/fl-form-builder/examples/usage-demo.gif)\n\n\n## Getting started\n### Creating a form-builder\nJust load the javascript and the CSS and call `new FormBuilder(container)`, using the\n`FormBuilder` global object.\n\n```html\n\u003c!-- RequireJS --\u003e\n\u003clink rel=\"stylesheet\" href=\"../dist/fl-form-builder.css\"\u003e\n\u003cscript src=\"../dist/fl-form-builder.js\"\u003e\u003c/script\u003e\n\n\u003cdiv class=\"form-builder-container\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\n  var container = document.querySelector('.form-builder-container');\n  const formBuilder = new FormBuilder(container);\n\u003c/script\u003e\n```\n\n### Saving the form state\nTo save the created form just store the object – or a serialization of it – returned by `formBuilder.exportState()`.\n\n``` javascript\n  // exporting\n  const state = formBuilder.exportState();\n```\n\n### Restoring a form state\nIf 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.\n\n``` javascript\n  // importing\n  const formBuilder = new FormBuilder(container);\n  formBuilder.importState(state);\n```\n\n# Plugins\n\n You can add custom field types. They must follow this react signature:\n\n\n``` javascript\n  const FieldCreatorPropType = {\n    info: React.PropTypes.shape({\n      type: React.PropTypes.string,\n      group: React.PropTypes.string,\n      displayName: React.PropTypes.string,\n    }),\n    initialState: React.PropTypes.shape({\n      type: React.PropTypes.string,\n      group: React.PropTypes.string,\n      displayName: React.PropTypes.string,\n\n      required: React.PropTypes.bool,\n      configShowing: React.PropTypes.bool,\n    }),\n    RenderEditor: React.PropTypes.func, // React render function\n  };\n```\n\nTo add your plugins just send them in an array at instantiation time.\n\n``` javascript\n  const formBuilder = new FormBuilder(container. [CustomPlugin1, CustomPlugin1]);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffourlabsldn%2Ffl-form-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffourlabsldn%2Ffl-form-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffourlabsldn%2Ffl-form-builder/lists"}