How to add custom field to Jquery Form Builder

Question

there,

I'm working with Jquery Form Builder ( https://formbuilder.online/ ) and I got to the task: add custom field to the form builder.

I want to do it without change the core of this jquery plugin. I already found that I can add it to the function "fieldRender", between other changes.

Doing this I would lose updates of this project, and this custom fields are too specific to offer to the project itself.

I'm already looking for some time and didn't find yet: does anyone knows if there is a way to add custom fields with a sort of extension strategy, so I could build custom fields without change the core code everytime?

Thanks,

Answer 1

Support for custom elements was officially added in v2.1 http://formbuilder.readthedocs.io/en/latest/formBuilder/options/templates/

You add 2 options to the editor. For example if you want a Star Rating input

var fields = [{
  label: 'Star Rating',
  attrs: {
    type: 'starRating'
  },
  icon: '🌟'
}];
var templates = {
  starRating: function(fieldData) {
    return {
      field: '<span id="'+fieldData.name+'">',
      onRender: function() {
        $(document.getElementById(fieldData.name)).rateYo({rating: 3.6});
      }
    };
  }
};
var options = {
  fields: fields,
  options: options
};
$('#fb-editor').formBuilder(options);