Custom Fields







Allows custom field extensions to Formally forms
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} />
</>
);
};