> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-in-group-react-v6.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Form Message

> Form Message — CometChat documentation.

The `FormMessage` class is used to create an interactive form message that can be sent via CometChat. It extends the `InteractiveMessage` class from CometChat.

### Constructor

| Name          | Type                  | Description                   |
| ------------- | --------------------- | ----------------------------- |
| receiverId    | string                | The ID of the receiver        |
| receiverType  | string                | The type of the receiver      |
| title         | string                | The title of the form         |
| formFields    | Array\<ElementEntity> | The fields of the form        |
| submitElement | ButtonElement         | The submit button of the form |

### Class Usage

How to create an instance of the `FormMessage` class:

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    // Create an instance of APIAction
    let apiAction = new APIAction("https://example.com/api", "POST");

    // Create an instance of ButtonElement
    let submitButton = new ButtonElement("1", apiAction, "Submit");

    // Create an instance of TextInput
    let nameInput = new TextInput("1", "Please enter your name");
    // Create a new instance of FormMessage

    let formMessage = new FormMessage("receiverId", CometChat.RECEIVER_TYPE.USER, "Title", [nameInput], submitButton);
    ```
  </Tab>
</Tabs>

### Key Properties and Methods

#### Goal Completion Text

The `setGoalCompletionText()` method sets the goal completion text of the form.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    let formMessage = new FormMessage("receiverId", CometChat.RECEIVER_TYPE.USER, "Title", [nameInput], submitButton);
    formMessage.setGoalCompletionText("Goal completed");
    ```
  </Tab>
</Tabs>

### Creating a FormMessage from JSON

The static `fromJSON()` method creates an instance of `FormMessage` from a provided JSON object.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    // Create a FormMessage from JSON
    let json = { 
        receiver: "receiverId",
        receiverType: CometChat.RECEIVER_TYPE.USER,
        type: "form",
        data: {
            interactiveData: {
                title: "Title",
                formFields: [],
                submitElement: new ButtonElement("1", new APIAction("https://example.com/api", "POST"), "Submit")
            }
        }
    };

    let formMessageFromJSON = FormMessage.fromJSON(json);
    ```
  </Tab>
</Tabs>

### Example

Below is an example that showcases the creation and manipulation of an instance of `FormMessage`:

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    // Create an instance of APIAction

    let apiAction = new APIAction("https://example.com/api", "POST");

    // Create an instance of ButtonElement

    let submitButton = new ButtonElement("1", apiAction, "Submit");

    // Create a new instance of FormMessage

    let formMessage = new FormMessage("receiverId", CometChat.RECEIVER_TYPE.USER, "customType", "Title", [], submitButton);

    formMessage.setGoalCompletionText("Goal completed");

    // Create a FormMessage from JSON

    let json = { 
        receiver: "receiverId",
        receiverType: CometChat.RECEIVER_TYPE.USER,
        type: "form",
        data: {
            interactiveData: {
                title: "Title",
                formFields: [],
                submitElement: new ButtonElement("1", new APIAction("https://example.com/api", "POST"), "Submit")
            }
        }
    };

    let formMessageFromJSON = FormMessage.fromJSON(json);
    ```
  </Tab>
</Tabs>

In this example, a new instance of the `FormMessage` class is created. The title, form fields, submit element, and goal completion text are retrieved, updated, and retrieved again. Then a new `FormMessage` instance is made from a JSON object, and the title is retrieved and logged.