Grapesjs: Form Elements are not available in Github project. But available in online demo.

[fzs1994]

[saiaungpyae]

@fzs1994 Form Elements are included in Form Plugin (http://grapesjs.com/js/grapesjs-plugin-forms.min.js)
Online demo is using form plugin.

How to insert plugin =>
var editor = grapesjs.init({ height: '100%', container : '#gjs', plugins: ['gjs-plugin-forms'], )}

[fzs1994]

Thanks! Works fine.

[ghost]

@artf @saiaungpyae hey thanks for the solution . Can u tell me how can i make a plugin of my own i.e a custom one. I know that u have a link of creating a plugin https://github.com/artf/grapesjs/wiki/Creating-plugins but the thing is i want something like you did in above form plugin.

what did u did in that js file ? which added the components. i could do directly by simply adding in grapes.min.js file.

But thats a rookie style.

help would me appreciated .

[saiaungpyae]

Hello @gkumarOB
You can simply add components ( or blocks, Commands, ... ) in your own plugin.

Here is my sample-form-plugin.js ( copy paste from form plugin :D ) which adds form elements using BlockManager.

grapesjs.plugins.add('sample-form-plugin', function(editor, options){
  var blockManager = editor.BlockManager;
  blockManager.add("form", {
                label: '\n      <svg class="gjs-block-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">\n        <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>\n        <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>\n        <rect class="gjs-block-svg-path" x="2" y="15" width="10" height="3" rx="0.5"></rect>\n      </svg>\n      <div class="gjs-block-label">Form</div>',
                category: "Forms",
                content: '\n        <form class="form">\n          <div class="form-group">\n            <label class="label">Name</label>\n            <input placeholder="Type here your name" class="input"/>\n          </div>\n          <div class="form-group">\n            <label class="label">Email</label>\n            <input type="email" placeholder="Type here your email" class="input"/>\n          </div>\n          <div class="form-group">\n            <label class="label">Gender</label>\n            <input type="checkbox" class="checkbox" value="M">\n            <label class="checkbox-label">M</label>\n            <input type="checkbox" class="checkbox" value="F">\n            <label class="checkbox-label">F</label>\n          </div>\n          <div class="form-group">\n            <label class="label">Message</label>\n            <textarea class="textarea"></textarea>\n          </div>\n          <div class="form-group">\n            <button type="submit" class="button">Send</button>\n          </div>\n        </form>\n      '
  });
  blockManager.add("input", {
                label: '\n      <svg class="gjs-block-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">\n        <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"></path>\n        <polygon class="gjs-block-svg-path" points="4 10 5 10 5 14 4 14"></polygon>\n      </svg>\n      <div class="gjs-block-label">' + "Input" + "</div>",
                category: "Forms",
                content: '<input class="input"/>'
  });
});

How to add blocks => https://github.com/artf/grapesjs/wiki/Blocks

[ghost]

@saiaungpyae man this is nice helped alot.

but can i add script to particular.
let say i wanna run a loop through a json object and show the value.

var name='{"firstname":"jhon","lastname":"doe}';
  var res = JSON.parse(name);
  bm.add('Json data',{
    label: "Json data",
    category: "Basic",
    content: "<p id='demo'>"+res.firstname+"</p>",
      attributes: {
        class: "fa fa-calendar"
    }
  });

the above code can show the firstname but if there were to have much more key value pair then looping is a solution but how ??

[saiaungpyae]

@gkumarOB Loop before bm.add().

var name='{"firstname":"jhon","lastname":"doe"}';
var res = JSON.parse(name);
var content = "";

for(var k in res){
    content+="<p id='demo'>"+res[k]+"</p>";
}
  bm.add('Json data',{
    label: "Json data",
    category: "Basic",
    content: content,
      attributes: {
        class: "fa fa-calendar"
    }
  });

[ghost]

@saiaungpyae Thanks alot brother.
solution is simple and neat.
You have been a saviour.

[fzs1994]

Hello @saiaungpyae ,
thanks a lot for the above solution. A little more help, how can I define custom css in custom component??
My code:

`` bm.add('productListing', { label: 'Product',
content: '

',
attributes: {
class: 'fa fa-user',
title: 'Product Block'
},
category: 'Basic',
cssComposer: {
rules: '.product-card{max-width:280px;font-size:12px;margin:5px;box-shadow:2px 2px 15px #999}'
}
});
````

Thanks.

[saiaungpyae]

Hi @fzs1994

Here is how I customize my component =>

  bm.add('productListing', {
      label: 'Product',
      content: {content: '<figure class="product-card">Hello</figure>',
                style: {
                  "max-width":'280px',                  
                  "font-size":'12px',
                  "margin":'5px',
                  "box-shadow":'2px 2px 15px #999'
                  }
                },
      attributes: {
        class: 'fa fa-user',
        title: 'Product Block'
      },
      category: 'Basic',
    });

[fzs1994]

Thanks, but what if I have too many classes?

My Actual code is:

<figure class="product-card">
  <a href="#">
    <img class="product-card-img" src="https://2.bp.blogspot.com/-eR7OIV0go7U/UdJxVSMzHeI/AAAAAAAAZNA/-is7Wx1eQyA/s600/DUSIT-THANI-HOTEL-MALDIVES_TRAVEL_SUMMER-TRAVEL_TROPICAL-VACATION-10.jpg"/>
    <figcaption>
      <h5 class="product-card-title">Product Title</h5>
      <p>Lorem ipsum dolor sit amet, nisl rebum moderatius ut pri, ius te dico exerci, legimus facilis expetendis</p>
      <p class="product-card-address">
        <i class="fa fa-map-marker"></i>Address information
      </p>
      <div class="product-card-price">
        <span class="price-savings">Save 25%</span>
        <s class="original-price">$176</s>
        <p class="amount-price">
          <span class="from">starting at</span>
          $99<span class="from">/night</span>
        </p>
      </div>
    </figcaption>
  </a>
</figure>

Thanks again!

[saiaungpyae]

@fzs1994 You can add custom class with style by using CssComposer and SelectorManager.

  var cssComposer = editor.CssComposer;
  var sm = editor.SelectorManager;
  var sel1 = sm.add('product-card');
  var rule = cssComposer.add([sel1]);
  rule.set('style', {
    "max-width":"280px",
    "font-size":"12px",
    "margin":"5px",
    "box-shadow":"2px 2px 15px #999",
  });

For more =>
https://github.com/artf/grapesjs/wiki/API-Css-Composer
https://github.com/artf/grapesjs/wiki/API-Selector-Manager

Please insert double quote (" ") when "-" sign is used.
Hope this will help you :D

[fzs1994]

Will check this. Thanks a lot man...!!!

[fzs1994]

@saiaungpyae , the solution is great but for my project, this thing gets too complex. So for easily working with styles, I directly appended style tag into the custom component itself and it worked fine! :stuck_out_tongue_winking_eye:

Final code:

````
var products = '[{"title":"Apple MacBook Air 13","image_url":"https://store.storeimages.cdn-apple.com/4974/as-images.apple.com/is/image/AppleInc/aos/published/images/m/ac/macbook/air/macbook-air-select-201706?wid=452&hei=420&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1496085621130","description":"lorem ipsum dolor simit","a_price":123,"location":"Vadodara","discount":25,"d_price":90},{"title":"Lenovo Y50","image_url":"https://rukminim1.flixcart.com/image/832/832/j1mggi80/computer/e/j/f/lenovo-2-in-1-laptop-original-imaezzztyq6zadhj.jpeg?q=70","description":"lorem ipsum dolor simit","a_price":456,"location":"Ahmedabad","discount":5,"d_price":400},{"title":"Acer Aspire R11 Pentium Quad Core ","image_url":"https://rukminim1.flixcart.com/image/832/832/computer/x/f/m/acer-aspire-2-in-1-laptop-original-imaemgnwxcdzxhhq.jpeg?q=70","description":"lorem ipsum dolor simit","a_price":741,"location":"Rajkot","discount":25,"d_price":650}]'

var eachProduct = JSON.parse(products);

var allProducts ="";

for( var i in eachProduct){
allProducts += '

'+eachProduct[i].title+'

'+eachProduct[i].description+'

'+eachProduct[i].location+'

Save '+eachProduct[i].discount+'% $'+eachProduct[i].a_price+'

starting at $'+eachProduct[i].d_price+'/night

'
}

bm.add('productListing', {
label: 'Product`',
content: '' + allProducts,
attributes: {
class: 'fa fa-user',
title: 'Product Block'
},
category: 'Basic'
});
````
And I think the actual issue has gone too far beyond north of the wall...!!!
Thanks a lot bro!

[saiaungpyae]

LOL great job !!! @fzs1994 😆

[lock[bot]]

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.