noob question: making form items persist, and seeing form's HTML code, on CodeSandBox

[xmatic]

Description:

Sorry about this noob question.

Regarding this codesandbox: https://codesandbox.io/s/725zk1mx1

1) I'm unable to make a form item persist (i.e., if I add items to the form, and then refresh the page, the items I had added are gone)

2) I'm unable to get HTML code for the added form items anywhere

Is this by design, or is there any way to do either of the above?

Thanks.

[lucasnetau]

I'm unable to make a form item persist (i.e., if I add items to the form, and then refresh the page, the items I had added are gone)

This is left up to you. You need to add a onSave() callback to store the data somewhere. The documentation https://formbuilder.online/docs/formBuilder/options/onSave/ has a callback you can use that saves the config to window.sessionStorage

You then need to restore the data from where it is saved to the formData parameter that is passed to formBuilder

I'm unable to get HTML code for the added form items anywhere

FormBuilder doesn't provide that. It provides a JSON/XML config file for building the form. FormRender is used for rendering the form, it has a html() action https://formbuilder.online/docs/formRender/actions/html/

[xmatic]

I'm unable to make a form item persist (i.e., if I add items to the form, and then refresh the page, the items I had added are gone)

This is left up to you. You need to add a onSave() callback to store the data somewhere. The documentation https://formbuilder.online/docs/formBuilder/options/onSave/ has a callback you can use that saves the config to window.sessionStorage

You then need to restore the data from where it is saved to the formData parameter that is passed to formBuilder

I'm unable to get HTML code for the added form items anywhere

FormBuilder doesn't provide that. It provides a JSON/XML config file for building the form. FormRender is used for rendering the form, it has a html() action https://formbuilder.online/docs/formRender/actions/html/

@lucasnetau

Thank you very much for your answer.

On the website: https://formbuilder.online , if one creates a form and saves it, one gets this Copy HTML button (screenshot below) which works (to send equivalent HTML code to the clipboard).

1. Will I get a working button out of the box if I install jQuery formBuilder locally, or does it need configuration before I get a working "Copy HTML" button?.
2. Is it possible to get such a button on codesandbox?
3. If I'm building in React, is this "HTML code" even useful do you think? Would I need JSX instead? (I just saw that there are tools that generate forms from the JSON Schema. Maybe I need one of those, yes?).

Thank you.

[lucasnetau]

The Copy HTML button you see is part of the website not formBuilder. You can see the code https://formbuilder.online/assets/js/site.min.js with both the onSave() handler which renders the formBuilder JSON to html and then the clipboard function for copying the html

You can get the HTML from renderedForm.outerHTML or the formRender.html() method

Why do you need to grab the HTML? You can generate the HTML by feeding it into formRender which is the other half of formBuilder. Take your time going through the documentation.

Cannot help you with React