Custom Fields

Intro

Typically 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 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 work with Repeaters, Conditionals, translations (for form text such as labels, hints, validation etc), and all other Formally features.

Requirements

• SDK licence;
• A developer who knows a bit of React;
• Only available when embedded via React for now, not plain JavaScript;
• Custom Fields are only supported when embedded on your site. They aren't supported when using Formally Hosted Forms (ie, https://MadeWithFormally.com ).

Usage in the Form Builder

When using the Form Builder you can create new custom fields on the 'Organisation Settings' page. These are shared across all forms in your organisation.

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

Authoring Custom Field resolvers

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

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

const myComponent = ({
  inputFieldId,
  locale,
  node,
  name,
  value,
  fieldState,
  label,
  hint,
  error,
  onChange,
  onBlur,
}) => {
  // your custom component goes here and
  // it can be anything you want.
  //
  // Use the 'value' prop, and 'onChange' to
  // update the value in Formally. Use 'onBlur'
  // to trigger validation checks. Use Formally
  // features like Repeaters or Conditionals
  //
  // For accessibility reasons be sure to use
  // the 'label' prop or render your own
  // <label htmlFor={inputFieldId}>

  return (
    <>
      {label}
      <input
        id={inputFieldId}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        onBlur={onBlur}
      />
    </>
  );
};

See also

Using JSON?

When authoring JSON make an item NodeCustomField in your form:

<CustomField>'s props

{
  en: '<p>Welcome to my form</p>',
}

{
  en: '<p>Welcome to my form</p>',
}