React jQuery FormBuilder Tutorial

In this tutorial you will learn how to build a form using jQuery FormBuilder drag and drop functionality in React.

Below given step by step code instruction for use of jQuery FormBuilder in React. jQuery FormBuilder Tutorial in React

First Install a React Basic Environment. First go to your code working environment. Means basically wherever you code your work. Then write below command for add react basic files and folders.

C:\Users\Your Name>npx create-react-app formbuilder-react

Here npx create-react-app is a command for download react basic working environment. formbuilder-react is a folder name where all files and folders will be downloaded. So what basically happened here is, This command will create a folder named formbuilder-react and add react files and folders into it.

Now type cd formbuilder-react to move to focus on downloaded react files and folders.

C:\Users\Your Name>cd formbuilder-react

In above code C:\Users\Your Name> path may be different depend on working environment set in your pc. It may be different if you have set different folder for working environment.

You will see below file structure for react. jQuery FormBuilder Tutorial in React.

File Structure:

Now open package.json file and add “formBuilder”: “3.0.2”, “jquery-ui-sortable”: “1.0.0” in dependencies like below.

"dependencies": {
    "formBuilder": "3.0.2",
    "jquery-ui-sortable": "1.0.0"
  }

To apply this dependencies type command npm install.

Now for add jQuery FormBuilder in React we also need jQuery in React Environment. To add jQuery run below command in your command editor. It will add jQuery in React JavaScript Library.

npm i jquery --save

Now add a below code in your App.js file. App.js is react’s default file if you have fresh installed react and not made any changes.

import $ from "jquery"; //Load jquery
import React, { Component, createRef } from "react"; //For react component
import ReactDOM from "react-dom";
import './App.css';

window.jQuery = $; //JQuery alias
window.$ = $; //JQuery alias

require("jquery-ui-sortable"); //For FormBuilder Element Drag and Drop
require("formBuilder");// For FormBuilder

//For Load Selected Elements. Not compulsory. If you don't want this. Don't pass formData in below formBuilder initialize.
const formData = [
  {
    type: "header",
    subtype: "h1",
    label: "formBuilder in React"
  },
  {
    type: "paragraph",
    label: "This is a demonstration of formBuilder running in a React project."
  }
];

document.body.style.margin = "30px"; //For add margin in HTML body

//Initialize formBuilder 
class FormBuilder extends Component {
  fb = createRef();
  componentDidMount() {
    $(this.fb.current).formBuilder({ formData });
  }

  render() {
    return <div id="fb-editor" ref={this.fb} />;
  }
}

//Return Initialized formBuilder set it to HTML
function App() {
  return (
    <FormBuilder />
  );
}

export default App;

Watch Video

Reference:

jQuery formBuilder https://formbuilder.online/

Read Also: jQuery FormBuilder Tutorial