Skip to content

GrapesJS/components-forms

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

86 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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