# grapesjs-plugin-forms

> Set of forms components and blocks for GrapesJS editor

Latest version **2.0.6** (published 2023-06-07) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install grapesjs-plugin-forms
pnpm add grapesjs-plugin-forms
yarn add grapesjs-plugin-forms
bun add grapesjs-plugin-forms
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.6 |
| Published | 2023-06-07 |
| First published | 2017-06-15 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 36.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 78 |
| Author | Artur Arseniev |
| Maintainers | artf |
| Keywords | grapesjs, plugin, form, builder |

## Links

- npm: https://www.npmjs.com/package/grapesjs-plugin-forms
- Repository: https://github.com/GrapesJS/components-forms
- Homepage: https://github.com/GrapesJS/components-forms#readme
- Issues: https://github.com/GrapesJS/components-forms/issues
- npm.io page: https://npm.io/package/grapesjs-plugin-forms

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.6 (latest) — 2023-06-07
- 2.0.5 — 2022-09-12
- 2.0.1 — 2021-01-05
- 1.0.5 — 2018-12-21
- 1.0.1 — 2018-09-30
- 0.3.6 — 2018-04-18
- 0.3.5 — 2018-04-15
- 0.3.4 — 2017-11-19
- 0.3.3 — 2017-11-06
- 0.2.5 — 2017-06-15

## README

# GrapesJS Forms

This plugin adds some of the basic form components and blocks which help in working with forms easier

[Demo](http://grapesjs.com/demo.html)
<br/>

Available components:
`form`
`input`
`textarea`
`select`
`option`
`checkbox`
`radio`
`button`
`label`



## Options

| Option | Description | Default|
| --------------- | -------------------------------- | ----------------------------------------------------------------------------------------|
|`blocks`|Which blocks to add| `['form', 'input', 'textarea', 'select', 'button', 'label', 'checkbox', 'radio']` (all) |
|`category`|Category name|`Forms`|
|`block`|Add custom block options, based on block id.|`(blockId) => ({})`|



## Download

* CDN
  * `https://unpkg.com/grapesjs-plugin-forms`
* NPM
  * `npm i grapesjs-plugin-forms`
* GIT
  * `git clone https://github.com/GrapesJS/components-forms.git`



## Usage

Directly in the browser

```html
<link href="path/to/grapes.min.css" rel="stylesheet"/>
<script src="path/to/grapes.min.js"></script>
<script src="path/to/grapesjs-plugin-forms.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      fromElement: 1,
      container : '#gjs',
      plugins: ['grapesjs-plugin-forms'],
      pluginsOpts: {
        'grapesjs-plugin-forms': {/* ...options */}
      }
  });
</script>
```

Modern javascript

```js
import grapesjs from 'grapesjs';
import gjsForms from 'grapesjs-plugin-forms';

const editor = grapesjs.init({
  container : '#gjs',
  // ...
  plugins: [gjsForms],
  pluginsOpts: {
    [gjsForms]: { /* options */ }
  }
  // or
  plugins: [
    editor => gjsForms(editor, { /* options */ }),
  ],
});
```

## I18n

If 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

```js
editor.I18n.addMessages({
  en: {
    blockManager: {
      labels: {
        form: 'EN Form',
        input: 'EN Input',
        textarea: 'EN Textarea',
        select: 'EN Select',
        checkbox: 'EN Checkbox',
        radio: 'EN Radio',
        button: 'EN Button',
        label: 'EN Label',
      },
      categories: {
        forms: 'EN Forms',
      }
    },
    domComponents: {
      names: {
        form: 'EN Form',
        input: 'EN Input',
        textarea: 'EN Textarea',
        select: 'EN Select',
        checkbox: 'EN Checkbox',
        radio: 'EN Radio',
        button: 'EN Button',
        label: 'EN Label',
      },
    },
    traitManager: {
      traits: {
        labels: {
          method: 'EN Method',
          action: 'EN Action',
          name: 'EN Name',
          placeholder: 'EN Placeholder',
          type: 'EN Type',
          required: 'EN Required',
          options: 'EN Options',
          id: 'EN Id',
          for: 'EN For',
          value: 'EN Value',
          checked: 'EN Checked',
          text: 'EN Text',
        },
        options: {
          type: {
            text: 'EN Text',
            email: 'EN Email',
            password: 'EN Password',
            number: 'EN Number',
            submit: 'EN Submit',
            reset: 'EN Reset',
            button: 'EN Button',
          }
        }
      },
    },
  }
});
```


## Development

Clone the repository

```sh
$ git clone https://github.com/GrapesJS/components-forms.git
$ cd grapesjs-plugin-forms
```

Install it

```sh
$ npm i
```

Start the dev server

```sh
$ npm start
```


## License

BSD 3-Clause

---
_Source: https://npm.io/package/grapesjs-plugin-forms · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._