# Advanced Form Popup

## Overview

![](https://content.gitbook.com/content/HCmz75EtH7rhYwwnva6o/blobs/K6ZidjdY9IsgNralk6jW/102.png)

A popup that includes custom inputs such as multi-select checkboxes, multi-file and multi-image uploaders.

## Structure

The block includes the following:

* Various bubble input elements (input, multi-line input, dropdown, date/time input, radio buttons, search box, and multi-dropdown)
* Four custom inputs:
  * **Group Inner multi-select options**
    * **RepeatingGroup Options** displays a list of options (set to dummy data for now)
  * **Group Inner single checkbox\_yes / no**
  * **Multi-file\_uploader** (reusable)
  * [**Multi-image\_uploader**](https://docs.airdev.co/canvas/5.2/canvas-library/reusables/multimage-uploader) (reusable)

## How to set up

* Update the data source for all standard Bubble inputs
* Update the data source for **RepeatingGroup Options** and its associated workflows
  * Clicking on **Group Main select option** will add the current option to a list of `selected options` on **RepeatingGroup Options**
  * **RepeatingGroup Options** has a custom state `selected options` of type `Dummy`. Modify the custom state's type.

![](https://content.gitbook.com/content/HCmz75EtH7rhYwwnva6o/blobs/Y2uxNJpnhp67wVICizW9/103.png)

* Update **Text Click to check this**
  \*
  * **Group Inner single checkbox\_yes / no** has a `yes/no` data type. Clicking on the group will display "yes" in the group (check the box) or "no" in the group (uncheck the box)
* Add workflows to **Button Cancel** and **Button Save changes**

## How to set up the custom multi-file uploader

* **Multi-file\_uploader** reusable element contains the following:
  * **Multi-file\_fileuploader** has a custom state of `list of files (type: file)`

![](https://content.gitbook.com/content/HCmz75EtH7rhYwwnva6o/blobs/aCK3hslowoKwAAGtiKWA/104.png)

* **HTML multiuploader style** includes a code snippet that changes 

  **Multi-File\_uploader files's** color. You can modify the color by updating the HEX codes.

![](https://content.gitbook.com/content/HCmz75EtH7rhYwwnva6o/blobs/gA86rMwi0z7gvIK2tz1B/105.png)

* Upload files (videos, images, and documents) with **multi-file\_uploader files**
* **RepeatingGroup uploaded files** displays **multi-file\_uploader's** list of files 
* Clicking on **Group Main delete file** deletes a file
* **Group Inner image\_file** contains an image with link preview, a document icon, and a video icon
* If needed, modify the conditional statement on **Image file preview** and add any additional file extension you might want to include. The default file extensions include:
  * .jpg
  * .jpeg
  * .png
  * .svg
  * .gif

![](https://content.gitbook.com/content/HCmz75EtH7rhYwwnva6o/blobs/no3c66dCDCtmmjJMPM4z/106.png)

* If needed, modify the conditional statement on **Feathericon doc** and add any additional final extension you might want to include. The default file extensions include:
  * .doc
  * .docx
  * .pdf
  * .xls
  * .xlsx
  * .csv
  * .ppt
  * .pptx

![](https://content.gitbook.com/content/HCmz75EtH7rhYwwnva6o/blobs/35ExH5xVVyqaatTzXNhe/107.png)

* If needed, modify the conditional statement on **Feathericon video** and add any additional final extension you might want to include. The default file extensions include:
  * .mp4
  * .m4a
  * .wmv
  * .mov

![](https://content.gitbook.com/content/HCmz75EtH7rhYwwnva6o/blobs/lNBYxSIeilBYIcn3Gl89/108.png)

## How to set up the custom multi-image uploader

{% content-ref url="../reusables/multimage-uploader" %}
[multimage-uploader](https://docs.airdev.co/canvas/5.2/canvas-library/reusables/multimage-uploader)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.airdev.co/canvas/5.2/canvas-library/popups/advanced-form-popup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.