Form

​

About this component

The Form component is a super versatile tool that can fit right into your product UI or pop up in a modal for things like surveys. They can be used for wide range of use cases including registration flows, surveys, feedback forms, and more. The component supports form validation (client and server-side), conditional fields, branching logic, and multi-step Flows.

When to Use Forms:

• Embedded in UI: Forms work great for tasks like product registration, helping users get started smoothly without leaving the page.
• Modal Surveys: Use forms in modals for surveys or feedback, making it easy for users to share their thoughts without disrupting their experience.

Why Forms Are Powerful:

• Conditional and Branching Logic: Forms can adapt based on user responses, guiding them through a tailored experience that feels intuitive.
• Custom React Steps: You can embed custom React components to invite teammates or perform API lookups, adding a personal touch to your forms.
• Customizable Input Types: With a variety of built-in input types—like text fields, multiple-choice options, and dropdowns—you can design forms that suit your specific needs.

Best Practices for Forms:

• Provide Progress Indicators: Adding progress bars or step indicators (like “Step X of Y”) can help users see how far they’ve come and what’s left to do. This makes the process feel less daunting and more manageable.
• Streamlined Data Collection: Frigade makes it easy to create new forms quickly, allowing you to gather user data and send it wherever you need it in your system.

​

Resources

• Create a form and send events to Slack
• Launch pop-up forms and surveys with no-code using Collections
• Target your form to specific users with Targeting
• See industry examples of forms

​

Demo

• See forms in action in our live demo

​

Customization

To learn about how to customize Frigade components, see the customization documentation and examples of custom themes in action.

​

Examples

The following section includes ready-made examples and code for various form use cases.

​

Simple Modal Form

​

Churn Survey

​

Dynamic Fields

​

Branching Forms

​

Supported Field Types

The component supports the following builtin field types that correspond to their respective HTML input types:

• select

• radio

• text

• textarea

• checkbox

​

Overriding Field Attributes

You can override or add any attribute for a field by using the props property in the field configuration. For instance, this is useful if you want to use the text field type, but override the type to email or tel. It can also be used to add any attribute such as a css class, data, or styling.

steps:
  - id: step-1
    title: This is page 1
    fields:
      - id: email
        type: text
        props:
          type: email
          className: "my-custom-class"
          data-attr: "my-custom-data-attr"
          style:
            color: "red"

​

Custom Field Types

The Form SDK is built on top of react-hook-form, which means you can use the majority of its features in your forms. You can define your own custom field types using the fieldTypes prop. For instance, you can implement a simple calendar datepicker field type as such:

import { FormFieldProps } from "@frigade/react";
import * as Frigade from "@frigade/react";

function CalendarField({ field, submit }: FormFieldProps) {
  return (
    <div>
      <input type="date" onChange={field.onChange} value={field.value} />
    </div>
  );
}

// ...

<Frigade.Form flowId="my-flow-id" fieldTypes={{ calendar: CalendarField }} />;

It is also possible to conditionally render a field based on the value of another field by using the formContext provided by react-hook-form. For instance, if you want a custom field called company-size to show up when a user selects company in the customer-type field:

import { type FormFieldProps, SelectField } from "@frigade/react";
import * as Frigade from "@frigade/react";

<Frigade.Form
  flowId="myflowid"
  fieldTypes={{
    "company-size": (props: FormFieldProps) => {
      const customerTypeValue = props.formContext.watch("customer-type");

      if (customerTypeValue !== "company") {
        return null;
      }

      return <div>My custom conditional field</div>;
    },
  }}
/>;

​

Form Validation

The component supports client-side and server-side validation out of the box. You can define validation rules for each field in the form configuration using the pattern property with a regular expression. The example below shows how to validate an email field:

steps:
  - id: collect-intend
    fields:
      - id: email
        type: text
        required: true
        pattern:
          message: Please provide a valid email
          value: ^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$

​

Server-side Validation

You can perform server-side validation by returning a Promise from the onPrimary event handler. If the promise resolves to false, the current step in the form will not be marked as completed. The onPrimary event handler also contains all form data collected in the session, which allows you to send the data to your server for validation or storage.

import { StepHandlerProp } from "@frigade/react";
import * as Frigade from "@frigade/react";

const App = () => {
  const handlePrimary: StepHandlerProp = async (step, event, properties) => {
    const response = await fetch("https://my-server.com/validate", {
      method: "POST",
      body: JSON.stringify(properties),
      headers: {
        "Content-Type": "application/json",
      },
    });

    if (response.ok) {
      return true;
    }

    // The current step in the form will be marked as completed
    return false;
  };

  return <Frigade.Form flowId="my-flow-id" onPrimary={handlePrimary} />;
};

​

Prefilling a form

Forms can be prefilled by using Dynamic Variables by linking the value of a field to the variables prop of the Form component. The example below shows how to prefill a form with the user’s name:

import * as Frigade from '@frigade/react';

const App = () => {
return (

<Frigade.Form
flowId="my-flow-id"
variables={{
  name: "John Doe",
}}
/>
) }

​

Customization

To learn about how to customize Frigade components, see the customization documentation and examples of custom themes in action.

​

SDK Properties

<Frigade.Checklist css={{ backgroundColor: "pink", ".fr-button-primary": { backgroundColor: "fuchsia" } }} />

import { Form, FormFieldProps } from '@frigade/react'

function CalendarField({ field, submit }: FormFieldProps) {
  return (
   <div>
     <input type="date" onChange={field.onChange} value={field.value} />
   </div>
  )
}

 // ...

 <Form flowId="my-flow-id" fieldTypes={{ calendar: CalendarField }} />