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.

​
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