Drag and Drop JSON based form builder in vanilla JavaScript

*** PLEASE READ BEFORE APPLY ***

Dear freelancer,

We are looking for a skilled JS and JSON developer. We need a form visual and code based form builder that generates and reads JSON code. Please read the full project description and only apply if you can deliver all the expectations. We continuously need developers for further projects!

DEADLINE FOR THE PROJECT: 7 days after accepting the job.

---------------------------
WHAT WE NEED:
---------------------------
- We need the same system like this: https://jsonform.github.io/jsonform/playground
- Note, the code can be edited on the left side that is read by the preview field. We need the same but with visual input field creator.
- Drag and Drop form builder that builds and reads a JSON based form
- 3 column view: 1. Draggable input fields. 2. JSON code. (code can be edited, effects the preview of the form). 3. Preview of the form.
- Builder must be able to read the JSON code too. This means I can copy a JSON based form to the code field and in the preview section I can see the result.
- Standalone form builder, we only need a HTML file and the JS codes.
- Input fields must have extra fields, like: ID, classes, locked (boolean), data-url (URL field, so input fields can be hyperlinked with HTML anchors), data-tooltip (string), help-text (string), etc.
- We must be able to lock input fields and set with warning ON THE FRONT END.
- Input fields should be able to be commented. This means we can add a single text comment to each form field ON THE FRONTEND. Shown on the image attachment, but this is a further development.
- Form must be able to handle conditional logic (!!!) Please read the field types below.
- All the requested input fields are listed below with example. You can use the same code in your generator.
- Output form must be responsive (form builder is not obligatory to be mobile friendly)
- Builder must support Safari and Chrome browser

--------------------------------------------------------------------------------------
FIELD TYPES:
--------------------------------------------------------------------------------------
- Single text input
- HTML code - this is just text added by us, for help the client. Example, like the “Click on Submit when you're done”: https://jsonform.github.io/jsonform/playground/index.html?example=fields-help
- Text area (plain text, no need for rich text)
- Number
- Hidden input: https://jsonform.github.io/jsonform/playground/index.html?example=fields-hidden
- File upload: https://jsonform.github.io/jsonform/playground/index.html?example=fields-file
- Select list
- Checkbox
- Radio
- Buttons
- Arrays. We have to be able to add other inputs to arrays. Example: https://jsonform.github.io/jsonform/playground/index.html?example=schema-array
- Navigation tab. Example: https://jsonform.github.io/jsonform/playground/index.html?example=navigation-tabs
- Date picker
- Event handler. Event will be added by us in JS. Example: https://jsonform.github.io/jsonform/playground/index.html?example=events
- Range. Example: https://jsonform.github.io/jsonform/playground/index.html?example=fields-range
- Grouping. Example: https://jsonform.github.io/jsonform/playground/index.html?example=fields-fieldset
- Extra properties, like prepend, append, notitle:. Example: https://jsonform.github.io/jsonform/playground/index.html?example=fields-common

----------------------------------------------
ADDITIONAL INFORMATION:
----------------------------------------------
- Hungarian language is preferred by developer, but not obligatory
- Time to deliver the job: 7 DAYS AFTER ACCEPTING JOB
- We can only accept tested and working code
- Please provide us test version during the developing, so we can help each other
- Code must be clean and guided by base comments, to help further developing by other programmers

-----------------
EXAMPLE:
-----------------

https://jsonform.github.io/jsonform/playground/?example=schema-basic