How to get data from forms in grapesjs
In the editor you just specify the action of the form, the rest has nothing to do with it (you have to deal with some server endpoint)
Read full answer below ↓Question
Hello All, I am using Forms block in grapejs and using grapesjs with angular 6. but i am not getting that how can i get data from forms while clicking on submit button of form. i am using following code for forms
let bm = editor.BlockManager;
bm.add('form', {
label: `
<svg class="gjs-block-svg gjs-block-svg-form" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path class="gjs-block-svg-path" d="M22,5.5 C22,5.2 21.5,5 20.75,5 L3.25,5 C2.5,5 2,5.2 2,5.5 L2,8.5 C2,8.8 2.5,9 3.25,9 L20.75,9 C21.5,9 22,8.8 22,8.5 L22,5.5 Z M21,8 L3,8 L3,6 L21,6 L21,8 Z" fill-rule="nonzero"></path>
<path class="gjs-block-svg-path" d="M22,10.5 C22,10.2 21.5,10 20.75,10 L3.25,10 C2.5,10 2,10.2 2,10.5 L2,13.5 C2,13.8 2.5,14 3.25,14 L20.75,14 C21.5,14 22,13.8 22,13.5 L22,10.5 Z M21,13 L3,13 L3,11 L21,11 L21,13 Z" fill-rule="nonzero"></path>
<rect class="gjs-block-svg-path" x="2" y="15" width="10" height="3" rx="0.5"></rect>
</svg>
<div class="gjs-block-label">Form</div>`,
category: 'Forms',
content: `
<form class="form" style="background: LightGray;height:220px;padding-top:20px">
<div class="form-group">
<label class="label">Name</label>
<input id="username" value="himanshu"placeholder="Type here your name" class="input"/>
</div>
<div class="form-group"style="margin-top:10px">
<label class="label">Email</label>
<input type="email" placeholder="Type here your email" class="input"/>
</div>
<div class="form-group">
<label class="label">Gender</label>
<input type="checkbox" class="checkbox" value="M" name="opt">
<label class="checkbox-label" >M</label>
<input type="checkbox" class="checkbox" value="F" name="opt">
<label class="checkbox-label">F</label>
</div>
<div class="form-group">
<label class="label">Message</label>
<textarea class="textarea"></textarea>
</div>
<div class="form-group" style="margin-top:10px">
<button id="buttonsubmit" type="submit" class="button" style="background :MediumSeaGreen;width:200px">Send</button>
</div>
</form>
`,
});
bm.add('input', {
label: `
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="32px" viewBox="0 0 16 16">
<path fill="#FFFFFF" d="M16 5c0-0.6-0.4-1-1-1h-14c-0.6 0-1 0.4-1 1v6c0 0.6 0.4 1 1 1h14c0.6 0 1-0.4 1-1v-6zM15 11h-14v-6h14v6z"/>
<path fill="#FFFFFF" d="M2 6h1v4h-1v-4z"/>
</svg>
<div class="gjs-block-label">Input</div>`,
category: 'Forms',
content: '<input class="input"/>',
});
bm.add('textarea', {
label: `
<svg class="gjs-block-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path class="gjs-block-svg-path" d="M22,7.5 C22,6.6 21.5,6 20.75,6 L3.25,6 C2.5,6 2,6.6 2,7.5 L2,16.5 C2,17.4 2.5,18 3.25,18 L20.75,18 C21.5,18 22,17.4 22,16.5 L22,7.5 Z M21,17 L3,17 L3,7 L21,7 L21,17 Z"></path>
<polygon class="gjs-block-svg-path" points="4 8 5 8 5 12 4 12"></polygon>
<polygon class="gjs-block-svg-path" points="19 7 20 7 20 17 19 17"></polygon>
<polygon class="gjs-block-svg-path" points="20 8 21 8 21 9 20 9"></polygon>
<polygon class="gjs-block-svg-path" points="20 15 21 15 21 16 20 16"></polygon>
</svg>
<div class="gjs-block-label">TextareaName</div>`,
category: 'Forms',
content: '<textarea class="textarea"></textarea>',
});
bm.add('select', {
label: `
<svg class="gjs-block-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path class="gjs-block-svg-path" d="M22,9 C22,8.4 21.5,8 20.75,8 L3.25,8 C2.5,8 2,8.4 2,9 L2,15 C2,15.6 2.5,16 3.25,16 L20.75,16 C21.5,16 22,15.6 22,15 L22,9 Z M21,15 L3,15 L3,9 L21,9 L21,15 Z" fill-rule="nonzero"></path>
<polygon class="gjs-block-svg-path" transform="translate(18.500000, 12.000000) scale(1, -1) translate(-18.500000, -12.000000) " points="18.5 11 20 13 17 13"></polygon>
<rect class="gjs-block-svg-path" x="4" y="11.5" width="11" height="1"></rect>
</svg>
<div class="gjs-block-label">1</div>`,
category: 'Forms',
content: `<select class="select">
<option value="1">1</option>
<option value="2"> 2</option>
</select>`,
});
bm.add('button', {
label: `
<svg class="gjs-block-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path class="gjs-block-svg-path" d="M22,9 C22,8.4 21.5,8 20.75,8 L3.25,8 C2.5,8 2,8.4 2,9 L2,15 C2,15.6 2.5,16 3.25,16 L20.75,16 C21.5,16 22,15.6 22,15 L22,9 Z M21,15 L3,15 L3,9 L21,9 L21,15 Z" fill-rule="nonzero"></path>
<rect class="gjs-block-svg-path" x="4" y="11.5" width="16" height="1"></rect>
</svg>
<div class="gjs-block-label">Button</div>`,
category: 'Forms',
content: '<button class="button">Send</button>',
});
bm.add('label', {
label: `
<svg class="gjs-block-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path class="gjs-block-svg-path" d="M22,11.875 C22,11.35 21.5,11 20.75,11 L3.25,11 C2.5,11 2,11.35 2,11.875 L2,17.125 C2,17.65 2.5,18 3.25,18 L20.75,18 C21.5,18 22,17.65 22,17.125 L22,11.875 Z M21,17 L3,17 L3,12 L21,12 L21,17 Z" fill-rule="nonzero"></path>
<rect class="gjs-block-svg-path" x="2" y="5" width="14" height="5" rx="0.5"></rect>
<polygon class="gjs-block-svg-path" fill-rule="nonzero" points="4 13 5 13 5 16 4 16"></polygon>
</svg>
<div class="gjs-block-label">Label</div>`,
category: 'Forms',
content: '<label class="label">Label</label>',
});
bm.add('checkbox', {
label: 'Checkbox',
attributes: { class: 'fa fa-check-square' },
category: 'Forms',
content: '<input type="checkbox" class="checkbox"/>',
});
bm.add('radio', {
label: 'Radio',
attributes: { class: 'fa fa-dot-circle-o' },
category: 'Forms',
content: '<input type="radio" class="radio"/>',
});
//basic block
bm.add('link', {
label: '<b> Link</b>',
attributes: { class: 'fa fa-link' },
category: 'Basic',
content: {
content: `
<div class="container"style= "">
insert Link here
</div>`,
style: {
color: 'purple',
border: 'solid dotted 1px'
}
}
});
as displaying in above snapshot i have filled form and now when i click on send button forms data should be got whatever i filled. please let me know any link or docs from where i can get help
Answers (2)
In the editor you just specify the action of the form, the rest has nothing to do with it (you have to deal with some server endpoint)
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1514
How to add video block on blockManager
Hello All. i want to add a video block on blockmanager same as mentioned on below snapshot i am using following code for adding video block...
Issue #1312
Submission of form in grapesjs
Hi, You build such a beautiful editor with forms and social icons with all stuff thanks for your great work. I build a form with grapesjs h...
Issue #1836
How to add !important in all the generated apis
Hello @artf, While i am going to edit some html from editor with the help of css then i need to add !important into all the css which is ch...
Issue #1539
How and where to define form's action in grapesjs
Hello All, how can i get data from forms in grapesjs. i have droped a form on canvas as u can see that below . so there is an action proper...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.