> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-native-development.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>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.