GrapesJS Forms

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

Demo

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

<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

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

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

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

Install it

$ npm i

Start the dev server

$ npm start

License

BSD 3-Clause