<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.

Prop	Type	Description
formName	string	Name of your Feathery form to display. It can be found on your dashboard.
Event Handlers	optional functions	Pass in callback functions to run custom code when different events occur in your form (submit, load, error, etc.)
contextRef	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.