kiho / react-form-builder Goto Github PK

I am using ReactFormBuilder with other input fields. For example, a have a input text field for a "title" for the form. I edited the post call using the "onPost" prop to also send the title.
But I don't want to post just when the form is edited, I want to post also when the other input fields are edited.
There is a way to "call" the "onPost"?
Or, if not possible, a way to get the ReactFormBuilder data?
If it is obvious, sorry for the question, I couldn't find a way.

After debuggin I got this point

`editModeOff(e) {
// const $menu = $(".edit-form");
// let click_is_outside_menu = (!$menu.is(e.target) && $menu.has(e.target).length === 0);
let click_is_outside_menu = !(e.target && e.target.closest(".edit-form")) && e.screenX > 0;

if (this.state.editMode && click_is_outside_menu) {
  this.setState({
    editMode: false,
    editElement: null
  });
}

}`

And if I comment below line then I can see edit element pane (which open from left on clicking the edit icon)
let click_is_outside_menu = !(e.target && e.target.closest(".edit-form")) && e.screenX > 0;

There is another code in header bar
{ this.props.data.element !== "LineBreak" && <div className="btn is-isolated btn-school" onClick={this.props.editModeOn.bind(this.props.parent, this.props.data)}><i className="is-isolated fa fa-pencil-square-o"></i></div> }

Seems like both the click events are fired at the same time and in my case editModeOn fired first and then editModeOff.

But in your demo its working perfectly. Right now I am working with commenting this line in node_modules but now going to deploy so its not working there.

Any solution for this?

First of all, thanks for maintaining this project 😄

Is it possible to skip validations under certain conditions?
I want to be able to save changes without submitting them. For this purpose, I need to validate answers only when submitting them, so I can save them even when required questions aren’t answered

If I paste in text copied from another source (like a google doc) into a Paragraph element, the component saves the hidden markup as the content property of the field.

Take a look a this demo form: https://safe-springs-35306.herokuapp.com/api/form?cid=811670bf_8710_3b23_2dfd_de57573897fb

Hello Kiho,
First of all, thanks for giving us updated react-form-builder with mitigation of jquery :)
I am new to reactjs and able to run this demo by git clone, but i am unable to use this npm package 'react-form-builder2' in my application, Please give me the link for documentation to use it in my application or please make a dummy app that uses this package. i will really appreciate your help
Thanks in Advance
getting this error.

hi
thanks for this project.
how can i edit from in FormBuilder.ReactFormBuilder ?

Noticed that version 0.4.0 does not update the form element label in ReactFormBuilder if you edit label in WYSIWYG edit panel then close the panel. I can see the element's state is marked dirty though.

I rolled back to 0.3.2 and the label updating was working as expected.

Wish I had some time to dig deeper - but wanted to report here.

And thanks for the great library.

Hello Kiho i have another issue about form builder. When i change the state pointed in the screenshot, the form does not render again and i see the old form.

https://prnt.sc/ond0nx

I am creating a project and needs a pagination feature on that. Can you suggest how can I do that?

Thank you in advance for all your help.

https://gyazo.com/5e0eaff4a5a7e089d41f1cd1ee5717cb

Version: 0.2.4

Hey guys, i'm working with your awesome builder.
My aproach is that i wanna save the form on the database, so im confused how y save the form , because a can't see the props configuration.

I put the ElementStore on my app but y have this error:

TypeError: undefined is not an object (evaluating 'react_form_builder2__WEBPACK_IMPORTED_MODULE_13__["ElementStore"].subscribe')

Full error:

My component code:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import Backend from '../Layouts/Backend';
import { Button } from '../UI/Button';
import Loading from '../Helpers/Loading';
import { actionCreators } from '../../actions';
import Notifications, { notify } from 'react-notify-toast';
import { withRouter } from 'react-router';
import jwt_decode from 'jwt-decode';
import axios from 'axios';
import Select from 'react-select';
import ReCAPTCHA  from 'react-google-recaptcha';
import FormBuilder from 'react-form-builder2';
import { ReactFormGenerator, ElementStore } from 'react-form-builder2';


class Questions extends Component 
{

    constructor(props) 
    {
        super(props);
        this.state = {
            data: [],
            previewVisible: false,
            shortPreviewVisible: false,
            roPreviewVisible: false,
          };
          const update = this._onChange.bind(this);
          ElementStore.subscribe(state => update(state.data));
    }

    showPreview() {
        this.setState({
          previewVisible: true,
        });
      }
    
      showShortPreview() {
        this.setState({
          shortPreviewVisible: true,
        });
      }
    
      showRoPreview() {
        this.setState({
          roPreviewVisible: true,
        });
      }
    
      closePreview() {
        this.setState({
          previewVisible: false,
          shortPreviewVisible: false,
          roPreviewVisible: false,
        });
      }
    
      _onChange(data) {
        this.setState({
          data,
        });
      }
    

    componentWillMount()
    {
        const token = localStorage.getItem('token');
        if (typeof token == 'undefined' || token == null)
        {
            this.props.history.push('/login');
        }   
    }

    resetForm = () => {
        this.setState(this.baseState)
    }

    onChange(e)
    {
        this.setState({ [e.target.name]: e.target.value });
    }

    componentDidMount(){
        this.setState({
            i18n: localStorage.getItem('i18n'),
        })
    }


    handleSubmit(event) 
    {
        event.preventDefault();
    }

    render()
    {
        const { email, username, password, repeat_password, isLoading, disabled, selectedOption, internationalization } = this.state;
        return (
            <Backend>
                <div className="content-inner">
                    <div className="row">
                    <FormBuilder.ReactFormBuilder
                        url='path/to/GET/initial.json'
                        saveUrl='path/to/POST/built/form.json' />
                    </div>
                </div>
            </Backend>
        );
    }
}


Questions.propTypes = {
};

Questions.contextTypes = {
    router: PropTypes.object.isRequired
};

export default connect((store) => {
    return {
    };
})(Questions)

Any advice?

I have used signature component in the form. It renders properly and when I am successfully able to save the form as well. But when I open the same form in edit mode it throws an exception as follows:

canvas.fromDataURL is not a function

Data which was saved successfully reaches to this function but still it throws this exception. Can you please check this issue out?

Hi kiho, i would like to know what is the function of the "correct" checkboxes on the dropdown item of the form builder?

http://prntscr.com/om1fci

When i try to create a form with this code block, i recieve the error message in the screenshot provided below:

<FormBuilder.ReactFormGenerator variables={variables} hide_actions={true} onPost={data => this.onPost(data)} data={jsonData} // Question data /> </React.Fragment>

http://prntscr.com/olfg1a

React-form-build version: 0.1.30

Hi Team,

I'm using Node v10 LTS, when first clone the project from github into my local machine and doing "npm install", I got the following errors:

ERROR in ./node_modules/react-bootstrap-slider/dist/react-bootstrap-slider.js
Module not found: Error: Can't resolve '/Users/michaelbrown/Development/react-bootstrap-slider/node_modules/@babel/runtime/helpers/esm/assertThisInitialized' in '/Users/ntt2k/hobby_projects/react-form-builder/node_modules/react-bootstrap-slider/dist'
@ ./node_modules/react-bootstrap-slider/dist/react-bootstrap-slider.js 20:53-180
@ ./src/form-elements.jsx
@ ./src/form.jsx
@ ./src/index.jsx

ERROR in ./node_modules/react-bootstrap-slider/dist/react-bootstrap-slider.js
Module not found: Error: Can't resolve '/Users/michaelbrown/Development/react-bootstrap-slider/node_modules/@babel/runtime/helpers/esm/classCallCheck' in '/Users/ntt2k/hobby_projects/react-form-builder/node_modules/react-bootstrap-slider/dist'
@ ./node_modules/react-bootstrap-slider/dist/react-bootstrap-slider.js 12:46-166
@ ./src/form-elements.jsx
@ ./src/form.jsx
@ ./src/index.jsx

Please help?

Thank you for maintaining awesome project.

I look around readme.md and source code, there is no option for setting validation except required.

For example, I want to set 65 length limit on 'Text Input'.

Without the feature that setting some extra validation, it seems that this one is only suitable for internal use..

I am considering some libraries ( this one and https://github.com/mozilla-services/react-jsonschema-form ) but the target of our product is external users not internal ones.

I just check out that google form has no features about validation like this one!

Is it OK to use this one without validation for google form likely feature? I just wonder your(maintainer) opinion.

For Example components are

               [
                    {
                        "id": "3A06600E-D7E1-44FD-AA0C-BFB8AB61B9F1",
                        "element": "Dropdown",
                        "text": "Dropdown",
                        "required": false,
                        "canHaveAnswer": true,
                        "field_name": "dropdown_38716F53-51AA-4A53-9A9B-367603D82548",
                        "label": "<div>Dropdown</div>\n",
                        "options": [
                            {
                                "value": "d1",
                                "text": "1",
                                "key": "dropdown_option_39F17D90-322B-4E23-8CD6-4D7AD58C4DD0"
                            },
                            {
                                "value": "d2",
                                "text": "2",
                                "key": "dropdown_option_C3BB35B7-6335-4704-BD03-1228D7C33EAE"
                            },
                            {
                                "value": "d3",
                                "text": "3",
                                "key": "dropdown_option_31C5C3A9-59B3-4CD5-B997-3754C6B05353"
                            }
                        ]
                    },
                   {
                        "id": "7C8F465D-C09C-42CF-8563-EEF26635382F",
                        "element": "Checkboxes",
                        "text": "Checkboxes",
                        "required": false,
                        "canHaveAnswer": true,
                        "field_name": "checkboxes_8D6BDC45-76A3-4157-9D62-94B6B24BB833",
                        "label": "<div>check box</div>\n",
                        "options": [
                            {
                                "value": "c1",
                                "text": "1",
                                "key": "checkboxes_option_8657F4A6-AA5A-41E2-A44A-3E4F43BFC4A6"
                            },
                            {
                                "value": "c2",
                                "text": "2",
                                "key": "checkboxes_option_1D674F07-9E9F-4143-9D9C-D002B29BA9E4"
                            },
                            {
                                "value": "c3",
                                "text": "3",
                                "key": "checkboxes_option_6D097591-E445-4BB4-8474-03BFDAA06BFC"
                            }
                        ]
                    },
                    {
                        "id": "850B1CE9-E8D8-47CA-A770-25496EECC000",
                        "element": "RadioButtons",
                        "text": "Multiple Choice",
                        "required": false,
                        "canHaveAnswer": true,
                        "field_name": "radio_buttons_F79ACC6B-7EBA-429E-870C-124F4F0DA90B",
                        "label": "<div>radio</div>\n",
                        "options": [
                            {
                                "value": "r1",
                                "text": "1",
                                "key": "radiobuttons_option_D3277CC8-FDB2-4CEB-AE83-C126492062B6"
                            },
                            {
                                "value": "r2",
                                "text": "2",
                                "key": "radiobuttons_option_553B2710-AD7C-46B4-9F47-B2BD5942E0C7"
                            },
                            {
                                "value": "r3",
                                "text": "3",
                                "key": "radiobuttons_option_08175D04-FF32-4FFB-9210-630AA155573E"
                            }
                        ]
                    },
                    {
                        "id": "34611241-27CF-4D0A-9B8D-6F84024D6876",
                        "element": "Rating",
                        "text": "Rating",
                        "required": false,
                        "canHaveAnswer": true,
                        "field_name": "rating_3B3491B3-71AC-4A68-AB8C-A2B5009346CB",
                        "label": "<div>star</div>\n"
                    }
                ];

After submiting we get answer like this

           [
                {
                    "name": "dropdown_38716F53-51AA-4A53-9A9B-367603D82548",
                    "value": "d2"
                },
               {
                    "name": "checkboxes_8D6BDC45-76A3-4157-9D62-94B6B24BB833",
                    "value": [
                        "checkboxes_option_8657F4A6-AA5A-41E2-A44A-3E4F43BFC4A6",
                        "checkboxes_option_1D674F07-9E9F-4143-9D9C-D002B29BA9E4"
                    ]
                },
                {
                    "name": "radio_buttons_F79ACC6B-7EBA-429E-870C-124F4F0DA90B",
                    "value": [
                        "radiobuttons_option_553B2710-AD7C-46B4-9F47-B2BD5942E0C7"
                    ]
                },
                {
                    "name": "rating_3B3491B3-71AC-4A68-AB8C-A2B5009346CB",
                    "value": 4
                }
            ],

After that i am converting it format for edit answer_data like

{	
"dropdown_38716F53-51AA-4A53-9A9B-367603D82548" : "d2",
"checkboxes_8D6BDC45-76A3-4157-9D62-94B6B24BB833" : [
       "checkboxes_option_8657F4A6-AA5A-41E2-A44A-3E4F43BFC4A6",
        "checkboxes_option_1D674F07-9E9F-4143-9D9C-D002B29BA9E4"
    ],
"radio_buttons_F79ACC6B-7EBA-429E-870C-124F4F0DA90B" :  [
        "radiobuttons_option_553B2710-AD7C-46B4-9F47-B2BD5942E0C7"
],
"rating_3B3491B3-71AC-4A68-AB8C-A2B5009346CB":4
}

in this i only get dropdown answer while editing
can you help?

Hi
We want to add more features when we edit any component like Radio / Checkbox
An example of what we require can be seen at http://prntscr.com/o3uc53

If you can guide us how do we do it on our own we will be gald to pay for your time

Thank you

<ReactFormGenerator
back_action="/"
back_name="Back"
answer_data={{ answer }}
action_name="Save"
hide_actions={false}
data={this.state.data}
/>

Hi @Kiho in our project we have a specific need to have elastic search component as part of Form Builder so we can search the required stuff and post it to the API endpoint.

Currently the package for elastic search we are using in our application is
https://opensource.appbase.io/reactivesearch/

Its quite a good component and I would like to implement the same in Form Builder.

Can you help me out in this OR guide me how to write such a component?

i can't seem to understand the flow?

is onPost used to save user typed data or form generated from drag and drop?

what are the functions for saving to a backend with the user-generated data and form type generation form drag and drop?

i need to control the form submission process so i can save it to my own server with authorization headers. any help would be appreciated.

I have created a form where I am using Tags and when I submit the form I get the data in following format

0: key: "tags_option_8F4C8281-CDC6-44E0-8BAF-4C7BCA0019F0" label: "We" text: "We" value: "2" __proto__: Object 1: key: "tags_option_BF277F93-D7FA-4502-87BE-42AC6690A630" label: "Go" text: "Go" value: "3" __proto__: Object length: 2 __proto__: Array(0)

But when I open the same form in edit mode i.e. with answer_data populated then it expect comma separated string as in following code:

`class Tags extends React.Component {
constructor(props) {
super(props);
this.inputField = React.createRef();
}

state = { value: this.props.defaultValue !== undefined ? this.props.defaultValue.split(',') : [] };
`

I made my array to be like this but problem is it throws react warning that there should be unique key present for each value of select.

Please advice.

Hello,

We are trying to set json data without using url but its not working.

 const content = [
  {
      "id": "C68B673B-3948-4D62-AF6D-5320CAB4DDB7",
      "element": "TextInput",
      "text": "Text Input",
      "required": true,
      "canHaveAnswer": true,
      "field_name": "text_input_EEA6F5DA-5C2C-43D3-AB62-62385E3925D9",
      "label": "<div>Name</div>\n"
  },
  {
      "id": "6DAF1E95-44F6-4E5B-ABDD-D9A6BCA2C08A",
      "element": "TextInput",
      "text": "Text Input",
      "required": true,
      "canHaveAnswer": true,
      "field_name": "text_input_C5305462-9704-4E77-BFAB-A43C14AB2B8E",
      "label": "<div>Email</div>\n"
  }
];

<ReactFormBuilder variables={variables} data={content} />

This is working fine:-

<ReactFormBuilder variables={variables} url="http://localhost/temp.json" />

Can you please help me out.
Thank you.

Ho to save data from builder? Can not find any action to add the button to the builder component.

ReactFormBuilder is working fine, I'm able to build custom form.
But when I try to recreate the form with generated json I have exeption:

Uncaught TypeError: Cannot read property 'text_input_08D9BB7F-52E5-4E11-8FFF-322B06B9C07E' of undefined

My form's json:

const formJson = 
  [
    {"id":"E459C0AB-5D7D-455C-9F30-B1D427B13DF6",
    "element":"Label",
    "text":"Label",
    "static":true,
    "required":false,
    "bold":false,
    "italic":false,
    "content":"Placeholder Text...",
    "canHavePageBreakBefore":true,
    "canHaveAlternateForm":true,
    "canHaveDisplayHorizontal":true,
    "canHaveOptionCorrect":true,
    "canHaveOptionValue":true},
    
    {"id":"57B58FF6-A2F3-4875-96A4-98CDABB64A98",
    "element":"TextInput",
    "text":"Text Input",
    "required":false,
    "canHaveAnswer":true,
    "canHavePageBreakBefore":true,
    "canHaveAlternateForm":true,
    "canHaveDisplayHorizontal":true,
    "canHaveOptionCorrect":true,
    "canHaveOptionValue":true,
    "field_name":"text_input_08D9BB7F-52E5-4E11-8FFF-322B06B9C07E",
    "label":"Placeholder Label"}
  ]

Hi Kiho i have another question regarding the form creator:

How can we add a save button to a form we created by ReactFormGenerator and how can we recieve the answer data when we press the save button?

How to get Dragged Item JSON from the form,I am not able to follow the flow? Can anyone please help regarding this?
I can connect with skype,zoom!

Did you include calendar item to select range of dates e.g. from ,to in the items list ?

We have a date picker component available in Form Builder but not the time picker. If you don't have time can you simply guide so I may create one?

When I am doing npm start its working perfectly fine but when I am deploying it on the server and doing npm build its failing and giving following error

ERROR in index-9925d6700efd0ec7e6cb.bundle.js from UglifyJs
Unexpected token: name (t) [./node_modules/beedle/dist/beedle.js:1,178][index-9925d6700efd0ec7e6cb.bundle.js:11480,137]

ERROR in index-9925d6700efd0ec7e6cb.bundle.js from UglifyJs
Unexpected token: name (t) [./node_modules/beedle/dist/beedle.js:1,178][index-9925d6700efd0ec7e6cb.bundle.js:11480,137]
Child html-webpack-plugin for "index.html":`

I have root out everything and its happening only when I import the files where I have used Form Builder

I posted something similar in Winterfell andrewhathaway/Winterfell#114

Ideally, Winterfell compliant form generation would be very useful (with conditional logic)

Hello Sir,
Thank you so much for updating this library.

Getting error when we save form. We just use range component and i have attached screenshot for your help.

Hi,
The data I get from the builder has this format:

[ { name: 'date_picker_C2950C61-B205-47C3-A616-F3B2655AB10C',
    value: '03/01/2019' }]

And the structure needed to fill the built form is like so:

{ 'date_picker_C2950C61-B205-47C3-A616-F3B2655AB10C':  '03/01/2019' }

Should the builder unity the structure/format?
If not, then it should be clearly stated in the documentation.

Cheers

hello sir,

I want to ask, how do I get the name I want from a label in react form generator?

because the data generated from the react-form is in the form (field name) of an id, and the id does not match the name of the label that I want.

as an example :

and here's the data when i submit the form

how to change field name in react form as an id into the name what i want..

thank you sir

hello, sir, long time no see, sorry, I bothering your time again.. want to ask about the results of the form submit,

[{"text_input_207D331C-0EAF-4D63-AD42-EDFAA74268F5":"Rice","text_input_2E5BAE90-AB31-4800-91C2-8A1858CC1DF9":"1kg"}]

can it be edited and added some results from the submit form, because for now the data obtained is only the name and value,

how do I want to get like a label and others?

thank you

I am trying to compile a basic example and I can get it to compile with 100% functionality but there is no styling. I have included screenshots of my code and the rendering. Could this be that I do not have the correct version of bootstrap? I installed all dependencies using npm so I am not sure what I am missing. Maybe a peer dependency?

When we select or drag label component it doesn't show up on builder pane. Although when we hover on it, it appears there but otherwise it remains hidden.

Cool fork!!!

After git clone this repository, npm install, npm start and npm run serve:api, I open 'http://localhost:8080/'. I can see the result page, But I cannot drag and drop items from toolbar to canvas. There is no error on DevTool's console.

hello kiho-chang, sorry interupt your time again. i wanna ask you something about form builder.

how can we get data from the database and apply it to the formbuilder?

For example, I choose a select box, and when I want to display contents in a select box, I have to manually enter the options and fill them in,

from the statement above, can I when select the select box and in the options section there are database options that I want to display the data?

thank you..

Integrated this in my own application.
Any idea why the css is not loaded? (no errors in my console)

This is my file.

import React, {Component, Fragment} from "react";
import {CardBody, CardTitle, Row, Card} from "reactstrap";
import IntlMessages from "Util/IntlMessages";
import {Colxx, Separator} from "Components/CustomBootstrap";
import {BreadcrumbItems} from "Components/BreadcrumbContainer";

import 'bootstrap/dist/css/bootstrap.css';
import FormBuilder from "react-form-builder2";

export default class FormCreate extends Component {
    render() {
        return (
            <Fragment>
                <Row>
                    <Colxx xxs="12">
                        <div className="mb-2">
                            <h1>
                                <IntlMessages id="menu.forms"/>
                            </h1>
                            <BreadcrumbItems match={this.props.match}/>
                            <Separator className="mb-5"/>
                        </div>
                    </Colxx>
                </Row>
                <Row>
                    <Colxx xxs="8">
                        <Card>
                            <CardBody>
                                <CardTitle/>
                                <CardBody>
                                </CardBody>
                            </CardBody>
                        </Card>
                    </Colxx>
                    <Colxx xxs="4">
                    <Card>
                        <CardBody>
                            <CardTitle/>
                            <CardBody>
                                <FormBuilder.ReactFormBuilder />
                            </CardBody>
                        </CardBody>
                    </Card>
                    </Colxx>
                </Row>
            </Fragment>
        )
    }
}

do we have any feature where we can add a checkbox or any input type in the edit (React Generator)?

Originally posted by @DeepakM02 in #41 (comment)

so I'm new to programming and learning to react with next.js

I am interested in these depedencies, and want to try them. when you want to try it only works to display the form,

but when added with props in it the application doesn't work, maybe this isn't the right forum but I don't know who I want to ask.

I am confused when in implements with props and form generator
what should I prepare and what should I do

thank you

Hello Sir,

When we set read_only then after date, radio, star, checkbox field editable, text filed not editable its working fine,
Can you please help me out.

I checked react-form-builder on mobile but it is not responsive and there are no preview button anywhere in desktop or all devices. when scroll form, content is not scrollable.

When a open a form in read only mode I get couple of following warnings in console:

Warning: Invalid DOM property readonly. Did you mean readOnly? in input (created by DatePicker) in div (created by DatePicker) in div (created by DatePicker) in div (created by DatePicker) in DatePicker (created by Card) in div (created by Card) in Card (created by DropTarget(Card)) in DropTarget(Card) (created by DragSource(DropTarget(Card))) in DragSource(DropTarget(Card)) (created by Preview) in div (created by Preview) in div (created by Preview) in Preview (created by ReactFormBuilder) in div (created by ReactFormBuilder) in div (created by ReactFormBuilder) in div (created by ReactFormBuilder) in ReactFormBuilder (created by DragDropContext(ReactFormBuilder)) in DragDropContext(ReactFormBuilder)

Another one is:

Warning: Failed prop type: You provided a valueprop to a form field without anonChangehandler. This will render a read-only field. If the field should be mutable usedefaultValue. Otherwise, set either onChangeorreadOnly. in input (created by DatePicker) in div (created by DatePicker) in div (created by DatePicker) in div (created by DatePicker) in DatePicker (created by ReactForm) in form (created by ReactForm) in div (created by ReactForm) in div (created by ReactForm) in ReactForm (created by Demobar) in div (created by Demobar) in div (created by Demobar) in div (created by Demobar) in div (created by Demobar) in Demobar

One more is:

react-dom.development.js:506 Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components in input (created by DatePicker) in div (created by DatePicker) in div (created by DatePicker) in div (created by DatePicker) in DatePicker (created by Card) in div (created by Card) in Card (created by DropTarget(Card)) in DropTarget(Card) (created by DragSource(DropTarget(Card))) in DragSource(DropTarget(Card)) (created by Preview) in div (created by Preview) in div (created by Preview) in Preview (created by ReactFormBuilder) in div (created by ReactFormBuilder) in div (created by ReactFormBuilder) in div (created by ReactFormBuilder) in ReactFormBuilder (created by DragDropContext(ReactFormBuilder)) in DragDropContext(ReactFormBuilder)

When I try to use web site component and when I update placeholder text it shows the text wrapped with an extra

Just wondering if there is any possibility to add upload image (base64) when creating form, that would be very helpful. thanks

Hi
I did npm install. First of all it doesn't support "import statements" and also documentation says to use

var FormBuilder = require('react-forms-builder');

But it didn't worked and then I change the statement to

var FormBuilder = require('react-form-builder2')

Then it starts giving me the error as follows:

ERROR in ./node_modules/bootstrap-slider/dist/bootstrap-slider.js Module not found: Error: Can't resolve 'jquery' in '/opt/lampp/htdocs/aperio_ui_core_ehr/node_modules/bootstrap-slider/dist' @ ./node_modules/bootstrap-slider/dist/bootstrap-slider.js 56:2-29 @ ./node_modules/react-bootstrap-slider/dist/react-bootstrap-slider.js @ ./node_modules/react-form-builder2/lib/form-elements.js @ ./node_modules/react-form-builder2/lib/form.js @ ./node_modules/react-form-builder2/lib/index.js @ ./src/views/Dashboard/fb.js @ ./src/containers/Full/Full.js @ ./src/containers/App.js @ ./src/index.js @ multi (webpack)-dev-server/client?http://aperiodev.aperiohealth.com:8080 webpack/hot/dev-server ./src/index.js

Any solution to this problem?