ReactFormstack

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

The component hierarchy is as follows:

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