React-formstack NPM

ReactFormstack

A React component that renders a minimally-styled Formstack form.

The component hierarchy is as follows:

Getting started

npm i will install dependencies.
npm run start will start the dev server and open the dev site at http://localhost:3003.

Importing

The component can be imported via script tag

<script src="https://[host]/react-formstack.js"></script>

or as a UMD module

import ReactFormstack from 'react-formstack'

Usage

For an example of usage, see the dev implementation here

Prop	PropType	Description
className	string	Optional CSS className value to add to the `<form>` element. The default is `null`.
endpoint	string	Optional prop to change the default Formstack API proxy endpoint. The default is `'https://www.msg.com/formstack'`.
id	string.isRequired	Required string indicating the Formstack form ID.
onBeforeLoad	func	Optional callback function to be called before the form configuration data is fetched from the Formstack API. Defaults to `null`.
onAfterLoad	func	Optional callback function to be called after the form configuration data has been fetched from the Formstack API. Defaults to `null`.
onBeforeSubmit	func	Optional callback function to be called before a form submission is sent. Defaults to `null`.
onAfterSubmit	func	Optional callback function to be called after a form has been submitted. Defaults to `null`.
onLoadError	func	Optional callback function to be called when an error is encountered when trying to load the form configuration from the Formstack API. Defaults to `null`.
onSubmitError	func	Optional callback function to be called when an error is encountered as a result of submitting the form. Defaults to `null`.
onResetForm	func	Optional callback function to be called when the user clicks the "Reset" button. Defaults to `null`.
onValidationError	func	Optional callback function to be called when the browser detects an invalid value in a field. The callback is passed the error object and the current state. Defaults to `null`.
resetButtonText	string	Text to display on the Reset button. Defaults to `'reset'`.
submitButtonText	string	Text to display on the Submit button. Defaults to `'submit'`.
shouldResetOnSubmit	bool	Optional flag to toggle whether the form fields should reset after the form has been submitted. Defaults to `false`.

Examples

Minimal

<ReactFormstack id="123456" />

With reset after submission

<ReactFormstack id="123456" shouldResetOnSubmit />

With custom Submit button text

<ReactFormstack id="123456" submitButtonText="Join Waitlist" />

With event callbacks

<ReactFormstack
  id="123456"
  onAfterSubmit={/*code to close the form DOM container*/}
  onSubmitError={error => console.error('This error has occurred:', error)}
  shouldResetOnSubmit
/>

Full example

<ReactFormstack
  className="my-class"
  endpoint="http://www.msg.local/formstack/"
  id="4513364"
  onAfterLoad={data => console.log(data)}
  onAfterSubmit={data => console.log('onAfterSubmit:', data)}
  onBeforeLoad={url => console.log('onBeforeLoad:', url)}
  onBeforeSubmit={data => console.log('onBeforeSubmit:', data)}
  onLoadError={error => console.error('onLoadError:', error)}
  onSubmitError={error => console.error('onSubmitError:', error)}
  onValidationError={(error, state) => console.error('\n[ReactFormstack] onValidationError:', error, '\n state:', state)}
  resetButtonText="Clear Form"
  shouldResetOnSubmit={true}
  submitButtonText="Submit Form"
/>

CSS Styling

The following CSS selectors are available for styling:

#fs-form-FORM ID
.fs-form
- #fs-fieldset__FIELD NAME
- .fs-fieldset
  - .fs-legend
  - .fs-label
  - .fs-field-wrapper
    - .fs-field__email
    - .fs-field__name
      - .fs-subfield-first
      - .fs-subfield-last
    - .fs-field__number
    - .fs-field__phone
    - .fs-field__radio
    - .fs-field__section
    - .fs-field__select
    - .fs-field__text
    - .fs-field__textarea
- .fs-button-bar
  - .fs-button__reset
  - .fs-button__submit
- .fs-fieldset--required

buffer classnames idx isomorphic-fetch prop-types react react-dom sanitize-html-react

@infinitebrahmanuniverse/nolb-react-fo @everything-registry/sub-chunk-2556 @zalastax/nolb-react-fo

1.0.0

2 years ago