React Form Builder

A complete react form builder that interfaces with a json endpoint to load and save generated forms. The toolbox contains 16 items for gathering data. Everything from star ratings to signature boxes!
Alternatives To React Form Builder
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Hcsstarratingview1,279
1212 months ago10September 23, 201721mitObjective-C
Simple star rating view for iOS written in Objective-C
React Form Builder513
6 years ago3November 18, 201626mitJavaScript
A complete react form builder that interfaces with a json endpoint to load and save generated forms. The toolbox contains 16 items for gathering data. Everything from star ratings to signature boxes!
Apprater Dialog75
6 years ago7apache-2.0Java
A dialog which asks the user to rate the app
Rmpextension5
6 months agoTypeScript
A rate my professor Chrome extension for the NJIT Schedule builder.
Dtratingbar3
5 years ago1Java
A RATING BAR
Starratingframework3
5 years agomitSwift
An easy to use Star Rating control as framework dynamic features written in swift
Builder_king3
3 years ago1mitC#
Survey React Builder2
6 years agoJavaScript
Survey builder application useing Survey.js React and Redux
Schedule Builder2
a year agoJavaScript
Kendoui Builder Template Samples2
5 years agoHTML
Samples for learning how to write Kendo UI Builder (KUIB) templates (custom views and custom components)
Alternatives To React Form Builder
Select To Compare


Alternative Project Comparisons
Readme

npm package Build Status

React Form Builder

A complete react form builder that interfaces with a json endpoint to load and save generated forms. The toolbox contains 16 items for gathering data. Everything from star ratings to signature boxes!

Editing Items

Basic Usage

var React = require('react');
var FormBuilder = require('react-forms-builder');

React.render(
  <FormBuilder.ReactFormBuilder />,
  document.body
)

Props

var items = [{
  key: 'Header',
  name: 'Header Text',
  icon: 'fa fa-header',
  static: true,
  content: 'Placeholder Text...'
},
{
  key: 'Paragraph',
  name: 'Paragraph',
  static: true,
  icon: 'fa fa-paragraph',
  content: 'Placeholder Text...'
}];

<FormBuilder.ReactFormBuilder
  url='path/to/GET/initial.json'
  toolbarItems={items}
  saveUrl='path/to/POST/built/form.json' />

React Form Generator

Now that a form is built and saved, let's generate it from the saved json.

var React = require('react');
var FormBuilder = require('react-forms-builder');

React.render(
  <FormBuilder.ReactFormGenerator
    form_action="/path/to/form/submit"
    form_method="POST"
    task_id={12} // Used to submit a hidden variable with the id to the form from the database.
    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.
    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.
    data={JSON_QUESTION_DATA} // Question data
  />,
  document.body
)

Form Params

Name Type Required? Description
form_action string Required URL path to submit the form
form_method string Required Verb used in the form submission.
action_name string Optional Defines form submit button text. Defaults to "Submit"
data array Required Question data retrieved from the database
back_action string Optional URL path to go back if needed.
back_name string Optional Button text for back action. Defaults to "Cancel".
task_id integer Optional User to submit a hidden variable with id to the form on the backend database.
answer_data array Optional Answer data, only used if loading a pre-existing form with values.
authenticity_token string Optional If using Rails and need an auth token to submit form.
hide_actions boolean Optional If you would like to hide the submit / cancel buttons set to true.
display_short boolean Optional Display an optional "shorter page/form" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements.
read_only boolean Optional Shows a read only version which has fields disabled and removes "required" labels.
variables object Optional Key/value object that can be used for Signature variable replacement.

Read only Signatures

Read only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the variables property to ReactFormGenerator and ReactFormBuilder.

To use a read only signature, choose the "Read only" option and enter the key value of the variable that will be used to pass in the signature.

The signature data should be in base 64 format.

There is a variables.js file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key "JOHN" to test the variable replacement.

Vendor Dependencies

In order to make the form builder look pretty, there are a few dependencies other than React. See the example code in index.html for more details.

  • Bootstrap
  • FontAwesome
  • jQuery

SASS

All relevant styles are located in css/application.css.scss.

DEMO

$ npm install
$ npm start

Then navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.

Tests

$ npm test

In order to run tests you will need to install Cairo which is needed for node-canvas. Go to https://www.npmjs.com/package/canvas for more details.

Popular Rating Projects
Popular Builder Projects
Popular User Interface Components Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Javascript
Reactjs
Form
Rating
Builder
Form Builder