<Form>

React component that renders a Feathery form

Initialize this component in your React app at the location where you want a Feathery form to appear. It renders your form as an HTML <form> element.

PropTypeDescription

formName

string

Name of your Feathery form to display. It can be found on your dashboard.

optional functions

Pass in callback functions to run custom code when different events occur in your form (submit, load, error, etc.)

React Ref

Pass in a ref that receives the form context, which contains helper functions allowing you to modify the form state directly.

initialValues

optional object

Initial form field values of the shape {<fieldId>: <fieldValue>}. If not passed in, Feathery will generate default initial values as necessary.

initialStepId

optional string

If specified, this will be the first step your user sees.

initialLoader

optional object

Options for the loader as the form initializes. By default no loader will be shown while loading the form, unless the user is waiting on authentication. Full reference

popupOptions

optional PopupOptions

If popup options are set, your Feathery form will show up as a popup on top of your page rather than inline with the rest of the content.

language

optional string

This is a comma-separated list of ISO 639-1 language code(s) to show the form in if a translation file in one of those languages has been uploaded for the form in its settings.

The languages will be prioritized according to their order in the specified string. If no translation for any of the specified languages is found, the form language will by default show up as written in the visual editor.

formProps

optional object

Override specific props of the underlying HTML<form> element by passing in an object mapping your desired prop keys to values.

elementProps

optional object

Override specific form element props by passing in a map from element ID to an object of custom props to be applied to that element. E.g., you can hide a field by passing in {<fieldID> : {style: {visibility: 'hidden'}}}.

customComponents

{<containerId>: <JSX element>}

Custom components you'd like to position per-step, in the flow of elements. Full reference

children

optional JSX elements

Custom, absolute-positioned components that you want to render across all steps. Full reference

className

optional string

Your custom CSS class(es) to associate with your form element.

style

optional object

Your custom inline CSS styling to associate with your form element.

Last updated