Is there a way to create a form that is empty? Perhaps set a css min-height of 1em so that for data can be dragged and dropped there?

When dragging a form onto the canvas, it does not set the "method" attribute in the markup (which is fine). However, the default "method" for a form is "GET" according to the HTML spec.

If you select the form block that you dragged onto the canvas and look at the component settings, the UI makes it look like the user has the "POST" method selected, since it is the first element in the select.

Recommendation: make the "GET" option the first element in the select so that it matches the default form behavior.

https://github.com/artf/grapesjs-plugin-forms/blob/master/src/components.js#L76

Hi Artf,
The form is really great plugin and thanks for the great plugin.

I am getting some issues with Select box,
Could you please help me ?

The scenario is below
I dragged the Form block and dragged Select box component, I can see those options are added in the editor, but when I click on that selectbox and check the Options in Settings, I can only see
::
1::
Instead of
::-Select
1::Option 1

could you please guide me how to fix this?

https://grapesjs.com/demo.html here also I can see this issue

just wan to know if this its the same as grapesjs-plugin-forms-ca?

from here https://snyk.io/advisor/npm-package/grapesjs-plugin-forms-ca

Implemented using this plugin and have it working fine by setting a fixed value for both action and method on the form. When adding the block to the canvas I have disable showing the traits under Settings so the user cannot edit the method and action. However after saving the page and reloading those attributes are now available to be edited. How can I prevent those from showing up under Settings for the form?

I have tried to override the traits and attributes, but to no effect. In the editor.on('load') I have:

editor.DomComponents.addType('form', {
          model: {
            defaults: {
              traits: [],
              attributes: {}
            }
          }
        })

@artf i believe after this commit cd901b1#diff-bfe9874d239014961b1ae4e89875a6155667db834a410aaaa2ebe3cf89820556 defaults behavior is broken.

Regardless of what do you supply in blocks argument, you always get the same list of blocks.

Please allow (again) to select the subset of blocks.

Replication Steps

• Add a text input or text area
• Click on field and enter in contents
• click 'view code' and entered content is not set as the value/contents of textarea

Versions:

• grapesjs: 0.15.10
• grapesjs-preset-webpage: 0.1.11

https://codesandbox.io/embed/hardcore-noyce-4ytug?fontsize=14&hidenavigation=1&theme=dark

I am trying to create a component that will run a script on an input type:

domc.addType('myInput', {
	model: inputType.model.extend({
		defaults: {
			...inputModel.prototype.defaults,
			'custom-name': c.labelMyInputName,
			tagName: 'myInput',
			traits: [...],
			script() {
				console.log("HERE");
			},
		},
	},
	...

I'm expecting script() to execute, just like you have it on your Slider component, but it doesn't. Am I supposed to define something somewhere else so the script block will work?

Could you instead of a dropdown allow for free text input?

ps, you can instead use datalist with autocompletion for the most common ones...

Hello, I think I found an issue concerning the button component. When the button text is changed over the according trait textfield ("Text"), the field blurs after typing each letter. If you like to enter several letters, you need to click the cursor into the textfield with your mouse after each letter.

I'm using the code unchanged. It's like that even on the demo pages. Tested on Safari and Firefox.

How can this be solved?

Hi there - It's great to form plugins for grapejs! I'm wondering if there is a way to add option elements to select lists. I'm able to create the select element but I haven't figured out where the configuration for options goes.

Hello, I have noticed that labels do have a "for" attribute, but the elements don't have any ID attribute. Without the ID, the for doesn't do much.

On my own application, I have extended the elements to add the ID, but now there's a new issue: When I try to select a label that has been linked to an element on the canvas, the element gets selected instead (just like when clicking the label on the actual finished page). I am not sure if that issue belongs here or in Core.

Steps to reproduce:
For the first issue, you only need to look at the settings section on any Form element in the demo.

For the second issue, you need to extend the form elements with a new trait, ID.
Then set the ID on the element.
Then set the for attribute on a label to the same as the ID on the element.
Then click on the label on the canvas.

Current workaround:
Select the label using the Layers panel.

After this commit, this plugin produces an error saying 'BlockOptions" is not a property on grapesjs

I only know about this error because I am developing with the Dev Branch of GrapesJS (for testing only, not production). This error is not caused by any official releases. I just hope this gets fixed before the next release of Grapesjs. I am using grapejs-plugin-forms v 2.0.5.

Hi @artf! I faced an issue when the button text trait is concatenated with default button text (same as here GrapesJS/grapesjs#3205), but after upgrading form plugin to the latest version, ALL buttons are identified as inputs, and text trait is not working at all. Now it's almost useless.
Here is the demo: https://www.loom.com/share/4977c2f7e4cb4e598a1bfe71ca4cf481
grapesjs: 0.16.44
grapesjs-plugin-forms: 2.0.1

Hi,

I am considering using Grapesjs and the forms plugin for my project. Hidden inputs would be somehow important in my case, but as far as I can see it's not supported yet. Am I correct?

Many thanks, especially for these great packages!

Adding this plugin other blocks disappears

I'm not sure what solution should be applied here. Directly extending the input component is probably not correct. Maybe there should be a common base component that input also extends with the shared attributes from all current input component children? If there isn't much shared then they probably should be separate as they don't share the same tagName.

I get all the components when I console log block manager but when I get the from or input and set it, it does not work.
I get this issue
Target collection not found", "Component not draggable, acceptable by [form, form *]"

I am experiencing odd behavior related to this plugin and am looking for insight and context.

When I drag a block containing a label or button tag, SOMETHING is inserting text into the tag. On label tags, "Label" gets inserted, and on button tags, Send gets inserted.

Look at screenshot:

i've tried to duplicating the error using jsFiddle but cannot duplicate. I am hoping someone might have insight or other feedback on why this might be happening

jsFiddle: https://jsfiddle.net/fxpmgcLu/1/

Basically, if i do not include this plugin (in my instance, everything is fine and dandy. Otherwise, my label and button tags get this extra text. I suspect this "bug" is more my fault rather than a bug in the plugin. Still, it is odd that everything is ok when I take out this plug

The bug

Whenever I'm trying to drag & drop a form element (button, input, select, textarea, checkbox, radio) - nothing happens. A green line suggesting to attach an element that I'm dragging should appear but it does not happen. This elements can not be used.

"form" and "label" elements work fine.

Ubunut 18.04
Chromium Version 77.0.3865.75 (Official Build) snap (64-bit)

Tested with Opera - the same issue there.

Hi.
I tried to made category of form component collapsed via pluginOpts property inside init() but i can't.

Please see this line
https://github.com/artf/grapesjs-plugin-forms/blob/d4ceea9ec299f4b87a7a130ececdf338ed1268c0/src/blocks.js#L18
Looks like i cannot to override it with
pluginOpts : {
'grapesjs-plugin-forms': {
category : {
id: 'forms',
label: 'Forms',
open: false
}
}
}

Other plugins under your github have no this issue.

Regards