Forms
Preview

A simple <FrigadeForm/> in a popup modal
Setup Guide
Check out our guide on how to create forms, embed custom components, and more.
Code
Simple Modal Form
// Paste the following provider and React component into your application
import { FrigadeForm } from '@frigade/react';
const App = () => {
return (
<FrigadeForm
flowId="flow_laJhda4sgJCdsCy6"
type="modal"
/>
);
};
Multipage Inline Form
// Paste the following provider and React component into your application
import { FrigadeForm } from '@frigade/react';
const App = () => {
return (
<FrigadeForm
flowId="flow_laJhda4sgJCdsCy6"
type="inline"
/>
);
};
config.yml props
The following props are available in config.yml
in the data
array:
React component props
- allowBackNavigation
- appearance
- className
- customFormElements
- customStepTypes
- customVariables
- dismissible
- endFlowOnDismiss
- flowId
- hideOnFlowCompletion
- modalPosition
- onButtonClick
- onComplete
- onDismiss
- onFormDataChange
- onStepCompletion
- prefillData
- repeatable
- setVisible
- showFooter
- showPagination
- style
- type
- updateUrlOnPageChange
- validationHandler
- visible
allowBackNavigation
Optional
allowBackNavigation: boolean
Whether to allow the user to navigate back to previous steps. Default is false.
appearance
Optional
appearance: Appearance
The appearance of the flow. See https://docs.frigade.com/sdk/styling
className
Optional
className: string
customFormElements
Optional
customFormElements: Object
Map of custom form components. Can only be used with a step of type multiInput
(defined in config.yml
).
The key must match the type
property of the input defined in config.yml
Index signature
▪ [key: string
]: (params
: FormInputProps
) => React.ReactNode
customStepTypes
Optional
customStepTypes: Object
Map of custom components. The key must match the type
property of the step defined in config.yml
Index signature
▪ [key: string
]: (params
: appearance?
: Appearance
; canContinue
: boolean
; customFormElements?
: [key: string]
: (params
: FormInputProps
) => React.ReactNode
; } ; flowId
: string
; onSaveData
: (data
: object
) => void
; prefillData?
: Record
<string
, any
> ; setCanContinue
: (canContinue
: boolean
) => void
; stepData
: StepData
}) => React.ReactNode
| React.ReactNode
customVariables
Optional
customVariables: Object
Dynamic variables to use in config.yml. See https://docs.frigade.com/flows/dynamic-variables
Index signature
▪ [key: string
]: string
| number
| boolean
dismissible
Optional
dismissible: boolean
Whether to show a dismiss button to exit out of the form. Applicable only for modal forms.
endFlowOnDismiss
Optional
endFlowOnDismiss: boolean
If true, the user will be excited from the flow when the form is dismissed. Default is false.
flowId
flowId: string
hideOnFlowCompletion
Optional
hideOnFlowCompletion: boolean
modalPosition
Optional
modalPosition: "center"
| "top-left"
| "top-right"
| "bottom-left"
| "bottom-right"
Indicates the position of the modal if the form type is a modal. Default is center.
onButtonClick
Optional
onButtonClick: (step
: StepData
, index?
: number
, cta?
: "primary"
| "secondary"
| "link"
, nextStep?
: StepData
) => boolean
Handler for when a primary or secondary CTA is clicked (regardless if step is completed or not). Return true if your app performs an action (e.g. open other modal or page transition).
Parameters
Name | Type |
---|---|
step | StepData |
index? | number |
cta? | "primary" | "secondary" | "link" |
nextStep? | StepData |
Returns
boolean
onComplete
Optional
onComplete: () => void
Returns
void
onDismiss
Optional
onDismiss: () => void
Returns
void
onFormDataChange
Optional
onFormDataChange: (allFormData
: any
, stepSpecificFormData
: any
, step
: StepData
, index
: number
) => void
Handler that is called when the form data changes.
Parameters
Name | Type |
---|---|
allFormData | any |
stepSpecificFormData | any |
step | StepData |
index | number |
Returns
void
onStepCompletion
Optional
onStepCompletion: (step
: StepData
, index
: number
, nextStep?
: StepData
, allFormData?
: any
, stepSpecificFormData?
: any
) => boolean
Handler for when a step is completed.
Parameters
Name | Type | Description |
---|---|---|
step | StepData | |
index | number | |
nextStep? | StepData | |
allFormData? | any | All form data collected so far (only applicable to FrigadeForms) |
stepSpecificFormData? | any | Form data collected for the finished step (only applicable to FrigadeForms) |
Returns
boolean
prefillData
Optional
prefillData: Record
<string
, any
>
Data to use for prefilling forms with data. Useful when you want to prefill a form with data from another source. The format of the data maps a step id to the prefill data. Depending on the implementation of the given step type, the value of the data will follow a different structure.
For type
multiInputStep, the value contains another map similar to the structure returned from onFormDataChange
repeatable
Optional
repeatable: boolean
If true, the form can be repeated multiple times. Default is false. Useful for e.g. contact/support forms.
setVisible
Optional
setVisible: (visible
: boolean
) => void
Parameters
Name | Type |
---|---|
visible | boolean |
Returns
void
showFooter
Optional
showFooter: boolean
Show or hide the form footer
showPagination
Optional
showPagination: boolean
Show a pagination indicator at the bottom of the form. Default is false.
style
Optional
style: CSSProperties
type
Optional
type: FrigadeFormType
updateUrlOnPageChange
Optional
updateUrlOnPageChange: boolean
Whether to update the url when the page changes in multi-page forms. If enabled, the current url will be updated with the current step id in the following format: <my_url>?p=<current_step_id>
This is useful when wanting to capture URL changes with third-party tracking tools.
Default is false.
validationHandler
Optional
validationHandler: (step
: StepData
, index
: number
, nextStep?
: StepData
, allFormData?
: any
, stepSpecificFormData?
: any
) => Promise
<string
| boolean
>
Async function resolved when the user submits data in a step.
If the promise evaluates to a string or false
, the flow will not proceed to the next step. The string will be displayed as an error message if passed.
If the promise evaluates to true
, the flow will proceed to the next step.
Parameters
Name | Type |
---|---|
step | StepData |
index | number |
nextStep? | StepData |
allFormData? | any |
stepSpecificFormData? | any |
Returns
Promise
<string
| boolean
>
visible
Optional
visible: boolean