{"id":18685815,"url":"https://github.com/grapesjs/components-forms","last_synced_at":"2025-09-04T04:36:24.514Z","repository":{"id":21932894,"uuid":"94474127","full_name":"GrapesJS/components-forms","owner":"GrapesJS","description":"Set of form components and blocks for the GrapesJS editor","archived":false,"fork":false,"pushed_at":"2023-06-07T11:51:23.000Z","size":432,"stargazers_count":76,"open_issues_count":0,"forks_count":58,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-30T08:12:28.273Z","etag":null,"topics":["builder","form","grapesjs","website","wysiwyg"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GrapesJS.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-06-15T19:57:41.000Z","updated_at":"2025-02-07T16:24:59.000Z","dependencies_parsed_at":"2024-01-15T06:07:18.339Z","dependency_job_id":null,"html_url":"https://github.com/GrapesJS/components-forms","commit_stats":{"total_commits":80,"total_committers":4,"mean_commits":20.0,"dds":0.03749999999999998,"last_synced_commit":"7db2e61bceb6eda7537e293b7248b0a4b49349d3"},"previous_names":["artf/grapesjs-plugin-forms"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GrapesJS%2Fcomponents-forms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GrapesJS%2Fcomponents-forms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GrapesJS%2Fcomponents-forms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GrapesJS%2Fcomponents-forms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GrapesJS","download_url":"https://codeload.github.com/GrapesJS/components-forms/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247464222,"owners_count":20942970,"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":["builder","form","grapesjs","website","wysiwyg"],"created_at":"2024-11-07T10:24:21.895Z","updated_at":"2025-04-06T10:12:19.567Z","avatar_url":"https://github.com/GrapesJS.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GrapesJS Forms\n\nThis plugin adds some of the basic form components and blocks which help in working with forms easier\n\n[Demo](http://grapesjs.com/demo.html)\n\u003cbr/\u003e\n\nAvailable components:\n`form`\n`input`\n`textarea`\n`select`\n`option`\n`checkbox`\n`radio`\n`button`\n`label`\n\n\n\n## Options\n\n| Option | Description | Default|\n| --------------- | -------------------------------- | ----------------------------------------------------------------------------------------|\n|`blocks`|Which blocks to add| `['form', 'input', 'textarea', 'select', 'button', 'label', 'checkbox', 'radio']` (all) |\n|`category`|Category name|`Forms`|\n|`block`|Add custom block options, based on block id.|`(blockId) =\u003e ({})`|\n\n\n\n## Download\n\n* CDN\n  * `https://unpkg.com/grapesjs-plugin-forms`\n* NPM\n  * `npm i grapesjs-plugin-forms`\n* GIT\n  * `git clone https://github.com/GrapesJS/components-forms.git`\n\n\n\n## Usage\n\nDirectly in the browser\n\n```html\n\u003clink href=\"path/to/grapes.min.css\" rel=\"stylesheet\"/\u003e\n\u003cscript src=\"path/to/grapes.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"path/to/grapesjs-plugin-forms.min.js\"\u003e\u003c/script\u003e\n\n\u003cdiv id=\"gjs\"\u003e\u003c/div\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\n  var editor = grapesjs.init({\n      fromElement: 1,\n      container : '#gjs',\n      plugins: ['grapesjs-plugin-forms'],\n      pluginsOpts: {\n        'grapesjs-plugin-forms': {/* ...options */}\n      }\n  });\n\u003c/script\u003e\n```\n\nModern javascript\n\n```js\nimport grapesjs from 'grapesjs';\nimport gjsForms from 'grapesjs-plugin-forms';\n\nconst editor = grapesjs.init({\n  container : '#gjs',\n  // ...\n  plugins: [gjsForms],\n  pluginsOpts: {\n    [gjsForms]: { /* options */ }\n  }\n  // or\n  plugins: [\n    editor =\u003e gjsForms(editor, { /* options */ }),\n  ],\n});\n```\n\n## I18n\n\nIf you need to change some of the components/traits labels, you can rely on the i18n module, here a complete example for the default `en` language\n\n```js\neditor.I18n.addMessages({\n  en: {\n    blockManager: {\n      labels: {\n        form: 'EN Form',\n        input: 'EN Input',\n        textarea: 'EN Textarea',\n        select: 'EN Select',\n        checkbox: 'EN Checkbox',\n        radio: 'EN Radio',\n        button: 'EN Button',\n        label: 'EN Label',\n      },\n      categories: {\n        forms: 'EN Forms',\n      }\n    },\n    domComponents: {\n      names: {\n        form: 'EN Form',\n        input: 'EN Input',\n        textarea: 'EN Textarea',\n        select: 'EN Select',\n        checkbox: 'EN Checkbox',\n        radio: 'EN Radio',\n        button: 'EN Button',\n        label: 'EN Label',\n      },\n    },\n    traitManager: {\n      traits: {\n        labels: {\n          method: 'EN Method',\n          action: 'EN Action',\n          name: 'EN Name',\n          placeholder: 'EN Placeholder',\n          type: 'EN Type',\n          required: 'EN Required',\n          options: 'EN Options',\n          id: 'EN Id',\n          for: 'EN For',\n          value: 'EN Value',\n          checked: 'EN Checked',\n          text: 'EN Text',\n        },\n        options: {\n          type: {\n            text: 'EN Text',\n            email: 'EN Email',\n            password: 'EN Password',\n            number: 'EN Number',\n            submit: 'EN Submit',\n            reset: 'EN Reset',\n            button: 'EN Button',\n          }\n        }\n      },\n    },\n  }\n});\n```\n\n\n## Development\n\nClone the repository\n\n```sh\n$ git clone https://github.com/GrapesJS/components-forms.git\n$ cd grapesjs-plugin-forms\n```\n\nInstall it\n\n```sh\n$ npm i\n```\n\nStart the dev server\n\n```sh\n$ npm start\n```\n\n\n## License\n\nBSD 3-Clause\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrapesjs%2Fcomponents-forms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgrapesjs%2Fcomponents-forms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrapesjs%2Fcomponents-forms/lists"}