JSFiddle - React, Tailwind, and code Playground
by Cthulhu
HTML
<script src="https://formbuilder.online/assets/js/form-builder.min.js"></script>
<div id="fb-editor"></div>
CSS
body {
font-family: sans-serif;
padding: 5px 0;
background-color: #f2f2f2;
}
JavaScript
jQuery(function($) {
var fbTemplate = document.getElementById("fb-editor");
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 = {
sortableControls: true // defaults to false
};
$(fbTemplate).formBuilder({ fields, templates });
$(fbTemplate).formBuilder(options);
});