This is a fully customizable form builder based on React

Table of Contents

• Demo
• Playground
• Features
• When do you need it
• Usage
  • Install 🐙
• Highlight 🔥
  • Form Builder
  • How to use
  • Supported Elements
  • Form Properties
  • Form Parameters
  • Preview your form
  • Form Viewer
  • How to use
• Playground
• Screenshots
• Items in queue
• Contribution 🍰
• License

Demo

Visit https://react-form-planner.vercel.app/

Playground

Visit https://codesandbox.io/s/react-form-planner-smw51

Features

• JSON based.
• Redux based.
• Fully Responsive
• Customizable
• Quick and easy.
• Styled component based.
• Theme supported
• Full validation support
• Custom theme

When do you need it

• You have complex form to be created?
• Forms are dynamic in nature?
• You don't want to manage the form?
• You need a structured/organised form rendering?
• You are providing forms as service

Usage

• Simple Form
• Dynamic Form
• Quiz
• Exams
• Tutorial
• Sky is the only limit

Install 🐙

npm install react-form-planner

or

yarn add react-form-planner

Highlight 🔥

This project contains an advanced Form Builder and a Form Viewer.

Form Builder

• Capable of creating form of any type.
• Styled component theme support
• Endlesss Customization
• Add your own style
• Add your own properties

How to use

Import FormPlanner component

import { FormPlanner } from 'react-form-viewer'

Just drop it to desired place

<FormPlanner
  onControlValueChanged={() => {
    console.log('onControlValueChanged')
  }}
  onFormValueChanged={() => {
    console.log('onFormValueChanged')
  }}
  theme={dark}
/>

Supported Elements

FormPlanner comes with tons of prebuilt elements which are already grouped for convenience. Few of them are visible by default. Rest can be turned on when required

| Group | Element | Internal Name | Availability | | ------------- | --------------------- | ------------- | ------------ | | Basic | Header | header | Default | | | Medium Header | mediumheader | Default | | | Small Header | smallheader | Default | | | Label | label | Default | | Form Control | Text Box | text | On Demand | | | Number Box | number | On Demand | | | Multiline Box | multiline | On Demand | | | Date Picker | date | On Demand | | | Date Time Picker | datetime | On Demand | | | Checkbox | checkbox | On Demand | | | Radio | radio | On Demand | | | Select | select | On Demand | | | Color Picker | color | On Demand | | Media | Image | image | On Demand | | | Video | video | On Demand | | | PDF | pdf | On Demand | | Quiz | Question | question | On Demand | | Advanced | Grid | grid | On Demand | | | Rich Text | richtext | On Demand | | | Multi Values | multivalue | On Demand | | Uploads | Image Upload | imageupload | On Demand | | | Multiple Image Upload | imagesupload | On Demand | | Miscellaneous | Divider | divider | On Demand |

Form Properties

Allows to add/update form meta information like

• Title
• Description
• Header background image
• Header background color
• Background image
• Background color

Form Parameters

| Name | Description | Default Value | | ------------------ | ------------------------------------------------------- | ------------- | | showFormProperties | Show form properties button to update form level values | false | | showPreview | Integrated button to show form preview | false | | allowCustomStyles | Allow user to set custom css styles | false | | allowCustomProps | Allow user to set custom field properties | false | | advancedFeatures | Enable advanced features | false | | fields | List of control types to be shown | All |

Preview your form

Preview your form while editing

Form Viewer

This is a full fledged form viewer.

• Capable of rendering complex form layout.
• Multi line and multi row
• Theme support

How to use

Import FormPlanner component

import { FormPlanner } from 'react-form-viewer'

Just drop it to desired place

<FormViewer
  onChange={(a, b, c) => {
    console.log('Value received')
  }}
  template={<template_data>}
/>

Playground

Getting built

Screenshots

Form Planner example

Edit element on hover

Edit element

Prebuilt Customization

Or add your own custmization

Items in queue

• Localization

Contribution 🍰

Feel free to create issue and make pull request

Refer code of conduct

Refer contributing

License

MIT © Koustov