React jQuery FormBuilder Tutorial

Posted on March 27, 2021 By

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."
]; = "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


jQuery formBuilder

8 thoughts on “React jQuery FormBuilder Tutorial

  1. Deekshith M R

    i just wanted to know how to build our own custom control, and how to give a name to a form, for example. if i console. my output will be just,
    “number”: 111,
    “text”: “hello”,
    but i wanted like
    “form-name” : {
    “number”: 111,
    “text”: “hello”,
    and cant we create like on clicking of some control. i should get a list of input box, say like, there will be a control called NAME, onclicking of that, it should render 3 input box, saying first name, middle name and last name ( user can change label), can you please help me with this. TIA


Leave a Reply

Your email address will not be published. Required fields are marked *