ReactFormstack

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

The component hierarchy is as follows:

Formstack
└─ Form
   └─ Fieldset
   |  └─ Legend
   |  └─ Label 1
   |  └─ Field 1
   |  └─ Label n
   |  └─ Field n
   └─ Button Bar
      └─ Reset Button
      └─ Submit Button

Getting started

1. npm i will install dependencies.
2. 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