Custom Fields

Start of documentation content

Typical Form Builders only support the form field types that are built in, such as text boxes or checkboxes.

If a Form Builder doesn't support (e.g.) a 'map location picker' then as a user/developer there's typically no way to add that.

Formally can have placeholders for form fields (called Custom Fields) which –when embedded– can be resolved to arbitrary React components. It is up to the developer/integrator to implement the Custom Field resolver. Custom Fields are compatible with Formally Repeaters and Conditionals etc.

Note: Custom Fields aren't supported when using Formally Hosted Forms (ie, those on `madewithformally.com`).

Usage

There are two ways of implementing Custom Field resolvers.

Form Builder custom fields

When using the Form Builder you can create new custom fields on the 'Organisation Settings' page.

Take note of the 'Custom Field Id' as this is the identifier that developers will implement a Custom Field resolvers for.

The developer can then resolve these with the customFields prop of <Formally> as following:

<Formally
  formBuilderId="your-formbuilder-id"
  customFields={{
    myCustomFieldId: myComponent,
  }}
/>;

const myComponent = ({ inputFieldId, value, onChange, node, name, locale }) => {
  return (
    <>
      <label htmlFor={inputFieldId}>map location picker</label>
      <MapPicker id={inputFieldId} value={value} onChange={onChange} />
    </>
  );
};

When using React JSX you may implement a Custom Field resolver as...

React JSX `<CustomField>`.