What is React Changeset Webforms

React Changeset Webforms integrates convenient, flexible and feature rich templates and action handling with the immensely powerful Validated Changeset.

Simply define a form schema as a "plain old JavaScript object", which includes an array of fields, each with options for UI and validation.

This schema can then be passed to the ChangesetWebform component in order to render a form, as below. The creation of the changeset, with its associated validators, is handled by the component, so that you need only think about what fields you would like to include in a webform, and how and when they should be validated.

The rendered form can also be pre populated with data, using its data property.

Example

import ChangesetWebform from 'react-changeset-webforms/src/components/ChangesetWebform.jsx';

const formSchema = {
  formSettings: {
    formName: 'Signup',
    submitButtonText: 'Sign up',
    clearFormAfterSubmit: true,
    resetFormButton: true,
    clearFormButton: true,
  },
  fields: [
    {
      fieldId: 'name',
      fieldLabel: 'Name',
      fieldType: 'input',
      showValidationWhenFocussed: true,
      validationRules: [
        {
          validationMethod: 'validatePresence',
          arguments: true,
        },
      ],
      inputType: 'text',
    },
    {
      fieldId: 'email',
      fieldLabel: 'Email',
      fieldType: 'input',
      validatesOn: ['$inherited', 'insertWithValue'],
      validationRules: [
        {
          validationMethod: 'validatePresence',
          arguments: true,
        },
        {
          validationMethod: 'validateFormat',
          arguments: { type: 'email' },
        },
      ],
      inputType: 'email',
    },
    {
      fieldId: 'recoveryEmail',
      fieldLabel: 'Recovery email',
      fieldType: 'input',
      validatesOn: ['$inherited', 'insertWithValue'],
      validationRules: [
        {
          validationMethod: 'validatePresence',
          arguments: true,
        },
        {
          validationMethod: 'validateFormat',
          arguments: { type: 'email' },
        },
      ],
      inputType: 'email',
    },
    {
      fieldId: 'password',
      fieldLabel: 'Password (Minimum 8 characters)',
      fieldType: 'input',
      validationRules: [
        {
          validationMethod: 'validatePresence',
          arguments: true,
        },
        {
          validationMethod: 'validateLength',
          arguments: { min: 8, max: 72 },
        },
      ],
      inputType: 'password',
    },
    {
      fieldId: 'acceptTerms',
      fieldType: 'radioButtonGroup',
      fieldLabel: 'Do you agree to the terms and conditions?',
      validationRules: [
        {
          validationMethod: 'validateInclusion',
          arguments: {
            list: ['true'],
            message: 'You must accept the terms to continue.',
          },
        },
      ],
      options: [
        {
          label: 'I agree',
          value: 'true',
        },
        {
          label: 'I do not agree',
          value: 'false',
        },
      ],
    },
    {
      fieldId: 'confirmHuman',
      fieldType: 'singleCheckbox',
      fieldLabel: 'Are you a human?',
      checkBoxLabel: 'Are you human',
      validationRules: [
        {
          validationMethod: 'validatePresence',
          arguments: {
            presence: true,
            message: 'Please confirm that you are not a robot.',
          },
        },
      ],
    },
    {
      fieldId: 'cookieConsent',
      fieldType: 'checkboxGroup',
      fieldLabel: 'Please select the cookies you consent to',
      validationRules: [
        {
          validationMethod: 'validateLength',
          arguments: {
            min: 2,
            allowNone: false,
            message: 'You must select at least two cookie consent options.',
          },
        },
      ],
      options: [
        {
          label: 'Essential',
          key: 'essential',
        },
        {
          label: 'Analytics',
          key: 'analytics',
        },
        {
          label: 'Marketing',
          key: 'marketing',
        },
      ],
    },
  ],
};

function submit() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, 500);
  });
}

export default function SignupForm() {
  return (
    <ChangesetWebform
      formSchema={formSchema}
      submitData={submit}
      data={{ email: 'tobias@bluthcompany.com', recoveryEmail: 'test' }}
    />
  );
}

Features

Define your form schema as plain old JavaScript object, and the ChangesetWebform component will render the form.
The addon provides 11 default fields, and allows for the creation of custom fields whgich can then easily be used throughout your application.
You can define a field as clonable, allowing the end user to add or remove instances of the field.
You have fine grained control over CSS classes at global, form and individual field level.
The addon integrates all of the validation methods which are part of React Changeset Validations by default, and makes it easy to define and integrate custom validators.
You can pass an array of validation event names, to control when validation happens for a specific field- these are keyUp, insert, focusOut and onChange.
The addon provides several action hooks, allowing your app to respond to user interactions in various ways.
Conditional fields - only allow a field to show if another field has a certain value, but updating its omitted setting. Fields which are omitted are not validated and they are not included in the data submitted by the form.
Fine grained configuration control. Configuration options can be set at the app level, form level and, where appropriate, at field level.
Configurable CSS class names - configure the class names applied to form controls such as inputs or buttons, to alow for seamless styling integration with libraries such as Bootstrap.