---

!GitHub watchers !GitHub watchers !GitHub watchers !GitHub watchers

This is a fully customizable form builder based on React

Table of Contents

- Screenshots
- 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
- Items in queue
- Contribution 🍰
- License

Screenshots

| | |
| ---------------------------------------- | -------------------------------------------- |
| !image info | !image info |
| !image info | !image info |

Demo

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

Playground

Codesandbox Project

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

$3

``bash
npm install rfp-react-form-builder react-icons react-player styled-components @mui/material
`

or

`bash
yarn add rfp-react-form-builder react-icons react-player styled-components @mui/material
`

Highlight 🔥

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

$3

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

$3

Import FormPlanner component

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

Just drop it to desired place

`jsx
onControlValueChanged={() => {
console.log('onControlValueChanged')
}}
onFormValueChanged={() => {
console.log('onFormValueChanged')
}}
theme={dark}
/>
`

$3

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 |

$3

Allows to add/update form meta information like

- Title
- Description
- Header background image
- Header background color
- Background image
- Background color
!image info

$3

| 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 |

$3

Preview your form while editing

$3

This is a full fledged form viewer.

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

$3

Import FormPlanner component

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

Just drop it to desired place

`jsx
onChange={(a, b, c) => {
console.log('Value received')
}}
template={}
/>
``

Items in queue

- Localization

Contribution 🍰

Feel free to create issue and make pull request

Refer code of conduct

Refer contributing

License

MIT © Koustov