> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Form Bubble

> Form Bubble — CometChat documentation.

The `CometChatFormBubble` component is used to render a [form](/ui-kit/flutter/v4/interactive-form-message) within a chat bubble. The form fields are dynamically built based on the data passed in the `message` prop. The form fields can include [TextInput Element](/ui-kit/flutter/v4/interactive-textinput-element), [Label Element](/ui-kit/flutter/v4/interactive-label-element), [Checkbox Element](/ui-kit/flutter/v4/interactive-check-box-element), [Radio Button Element](/ui-kit/flutter/v4/interactive-radio-button-element), [Dropdown](/web-elements/dropdown), [Single Select Element](/ui-kit/flutter/v4/single-select), [Button Element](/ui-kit/flutter/v4/button). Once the form is filled out and submitted, the data will be sent to the provided URL or handled by a custom function.

## Properties

| Properties          | Type                            | Description                                                                                                                                                                                                            |
| ------------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **title**           | String                          |                                                                                                                                                                                                                        |
| **formMessage**     | FormMessage                     | An instance of the FormMessage class which holds information about the form fields. The form inputs are dynamically built based on the form fields' information in the message.                                        |
| **formBubbleStyle** | FormBubbleStyle                 | An object of styles for customizing the UI of the form bubble. You can override styles for the wrapper, title, goal completion text, and form inputs, etc. If a style is not provided, the default style will be used. |
| **onSubmitTap**     | Function(Map\<String, dynamic>) | A parameter that defines if a custom callback is available or not.                                                                                                                                                     |
| **theme**           | CometChatTheme                  | Passes theme to the form bubble.                                                                                                                                                                                       |
| **loggedInUser**    | User                            | An instance of the logged-in user object.                                                                                                                                                                              |
| **QuickViewStyle**  | QuickViewStyle                  | An instance for setting goal completion styling properties.                                                                                                                                                            |

## FormBubbleStyle

`FormBubbleStyle` is a class extending `BaseStyle` containing attributes to customize the appearance of the `CometChatFormBubble` component.

| Properties               | Type                  | Description                                                                                                                   |
| ------------------------ | --------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| **dropDownElementStyle** | DropDownElementStyle  | Used to set the font style of the title. The object should include `fontFamily`, `fontSize`, and `fontWeight`.                |
| **submitButtonStyle**    | ButtonStyle           | Used to set the color of the title.                                                                                           |
| **buttonElementStyle**   | ButtonStyle           | Used to set the background color of the message bubble.                                                                       |
| **labelStyle**           | TextStyle             | Used to set the border radius of the message bubble.                                                                          |
| **textInputStyle**       | TextInputElementStyle | Used to set the padding of the message bubble.                                                                                |
| **checkBoxStyle**        | CheckBoxElementStyle  | Used to set the font style of the goal completion text. The object should include `fontFamily`, `fontSize`, and `fontWeight`. |
| **quickViewStyle**       | QuickViewStyle        | Used to set the color of the goal completion text.                                                                            |

## Usage

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatFormBubble(
      formMessage: formMessage,
      loggedInUser: loggedInUser, // replace this with the logged-in user
    )
    ```
  </Tab>
</Tabs>