Guide: Forms

A simple <FrigadeForm/> in a popup modal
Frigade provides a set of components to help you build forms. Typical use-cases include lead collection, short user surveys, and adhoc data entry.
You can create production-ready flows for any of the components below with one click from the Components tab in the Admin Dashboard.
Related resources
Using your own components
Frigade allows you to easily use your own React components in your forms. You can either create full custom form page or use your own components for specific form elements.
Using your own input components for specific form elements
If you want to use your own input components for specific form elements, you can do so by passing in a customFormElements
prop to the <FrigadeForm/>
component.
For instance, suppose you wanted to use your own calendar picker component for a date input, you could do so in the following way:
<FrigadeForm
customFormElements={{
myDatePicker: (props) => {
const [date, setDate] = useState(props.inputData);
const handleDateChange = (date) => {
setDate(date);
props.onSaveInputData(date);
};
return (
<MyCustomCalendarPicker
date={date}
onDateChange={handleDateChange}
/>
);
},
}}
/>
Creating a full custom form page
If the built-in form types do not meet your use case, you can easily implement your own step in a <FrigadeForm/>
.
This is done using the customStepTypes
prop. For instance, if you wanted to build a step in a form that uses an existing React component for searching through a list of cities,
you could implement a custom form step in the following way:
<FrigadeForm
flowId='flow_laJhda4sgJCdsCy6'
customStepTypes={{
citySelector: (
// Frigade will pass in a series of convenient props to your components including the config.yml, the ability to save data, and form validation handlers
flowId,
stepData,
canContinue,
setCanContinue,
onSaveData,
appearance,
customFormElements,
prefillData) => {
const [selectedCity, setSelectedCity] = useState(null);
const [zipCode, setZipCode] = useState(null);
const handleCityChange = (city) => {
setSelectedCity(city);
setCanContinue(true);
};
const handleZipCodeChange = (zipCode) => {
setZipCode(zipCode);
setCanContinue(true);
};
const handleSaveData = () => {
onSaveData({
city: selectedCity,
zipCode,
});
};
return (
<div className="flex flex-col items-center">
<h1 className="text-2xl font-bold mb-4">{stepData.title}</h1>
<MyCustomCitySelectorComponent
startZipCode={stepData.startZipCode}
onCityChange={handleCityChange}
onZipCodeChange={handleZipCodeChange}
/>
<button
className="bg-blue-500 text-white px-4 py-2 rounded mt-4"
onClick={handleSaveData}
>
Continue
</button>
</div>
);
},
}}
/>
Example forms
Feedback Form

Example modal form
The code below shows the Component and Flow configuration required to render a form like the one in the screenshot above.
In this case, the form will be rendered as a modal due to the type
, but inline forms are also supported.
Additionally, this component leverages the appearance prop to customize the look and feel of the form.
<FrigadeForm
flowId='flow_U9PfpuWJeRUjLo0x'
type='modal'
appearance={{
styleOverrides: {
modalContainer: 'bg-white w-[450px]',
button: 'w-full mt-8',
},
theme: {
colorPrimary: '#3661E1',
colorTextOnPrimaryBackground: '#fff',
}
}}
/>
Customer Support Form
data:
- id: support-page
title: Hi there, how can we help?
type: multiInput
primaryButtonTitle: Submit
props:
data:
- id: urgency
type: multipleChoice
title: Urgency
required: true
placeholder: Select an option
props:
minChoices: 1
maxChoices: 1
options:
- id: low
title: Low
- id: medium
title: Medium
- id: critical-blocker
title: Critical blocker
- id: subject
type: text
title: Subject
required: true
placeholder: Enter subject
- id: question-text
type: text
title: What is your question?
multiline: true
required: true