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

• Form Validation

​

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:

​

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:

​

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.

​

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