React Form Builder 2

Read-only signatures allow you to inject a saved/canned signature (in Base64 format) into a form.

1. In the form builder, choose the "Read only" option for a signature field.
2. Enter the key name of the variable that will hold the signature.
3. Pass the signature data via the variables prop to ReactFormGenerator or ReactFormBuilder.

Example: If your variable key is JOHN, pass { JOHN: 'BASE64_STRING_HERE' } in the variables prop.

The rfb-cra package is a demonstration project bootstrapped with Create React App. You can manage the development lifecycle using the following npm scripts:

• Development: Use npm start to run the app in development mode. The app will be available at http://localhost:3000 and will automatically reload on edits.
• Testing: Use npm test to launch the test runner in interactive watch mode.
• Production Build: Use npm run build to create an optimized, minified production build in the build folder.
• Ejecting: Use npm run eject if you need full control over the underlying build configuration (Webpack, Babel, etc.). Warning: This is a one-way operation and cannot be undone.

To set up and run the MongoDB example project locally, install the dependencies, build the project, and start the development server using the following commands:

$ npm install
$ npm run build
$ npm run dev

To use the form builder interface, import ReactFormBuilder from react-form-builder2 and include the required CSS. The builder is designed to interface with a JSON endpoint to load and save generated forms.

import React from "react";
import ReactDOM from "react-dom";
import { ReactFormBuilder } from "react-form-builder2";
import "react-form-builder2/dist/app.css";

ReactDOM.render(<ReactFormBuilder />, document.body);

To set up the development environment for the Next.js example, install the dependencies, build the project, and start the development server using the following commands:

$ npm install
$ npm run build
$ npm run dev

When onSubmit, onChange, or onBlur is triggered, ReactForm provides a collection of data objects. Each object follows this structure:

{
  "id": "field_id",
  "name": "field_name",
  "custom_name": "custom_name_or_field_name",
  "value": "field_value"
}

Data Collection Behavior

• Checkboxes/RadioButtons: The value is an array of keys or values (depending on option_key_value) for all selected options.
• Trimming: When onSubmit is called, string values are automatically trimmed.
• Signature: For Signature elements, the value is the base64 encoded PNG string (excluding the data URI prefix) of the signature canvas.

The ReactForm component includes built-in validation for specific element types:

1. EmailInput: Validates using a standard email regex. Errors are reported if the format is invalid.
2. PhoneNumber: Validates using a regex supporting various formats (e.g., +1-123-456-7890, (123) 456-7890).
3. Correctness: If the validateForCorrectness prop is set to true, the form compares the user's input against the correct property in the field configuration. This applies to Rating (exact match) and other elements (case-insensitive trimmed match).
4. Required Fields: If required: true is set on a field, the form will fail validation if the value is empty or (for checkboxes/radio buttons) if no options are selected.

You can override the default submit and back buttons in ReactFormGenerator by providing custom components to the submitButton and backButton props.

<ReactFormGenerator
  data={form}
  toolbarItems={items}
  onSubmit={handleSubmit}
  actionName="Set this to change the default submit button text"
  submitButton={
    <button type="submit" className="btn btn-primary">
      Submit
    </button>
  }
  backButton={
    <a href="/" className="btn btn-default btn-cancel btn-big">
      Back
    </a>
  }
/>

Once a form is built and saved as JSON, use ReactFormGenerator to render the actual form for end-users to fill out. This component handles form submission and data rendering.

import React from "react";
import ReactDOM from "react-dom";
import { ReactFormGenerator } from "react-form-builder2";
import "react-form-builder2/dist/app.css";

ReactDOM.render(
  <ReactFormGenerator
    form_action="/path/to/form/submit"
    form_method="POST"
    task_id={12}
    answer_data={JSON_ANSWERS}
    authenticity_token={AUTH_TOKEN}
    data={JSON_QUESTION_DATA}
  />,
  document.body
);