> For the complete documentation index, see [llms.txt](https://docs.airdev.co/canvas/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.airdev.co/canvas/5.2/canvas-library/popups/advanced-form-popup.md).

# Advanced Form Popup

## Overview

![](/files/rldKvgf43L0a3yvj2pAT)

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**](/canvas/5.2/canvas-library/reusables/multimage-uploader.md) (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.

![](/files/d47fV5vnqxRQrrnozq5S)

* 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)`

![](/files/lj4hzYma8BswneaQa6Ky)

* **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.

![](/files/DWc1JrrfqAlcneG8H6uE)

* 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

![](/files/smflkTZuwmuul8kItmSB)

* 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

![](/files/PPiUjDN5H2M4tslfRWeV)

* 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

![](/files/SRoBvsoV2MWA4PU6kd8n)

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

{% content-ref url="/pages/GhN2tZ8KjDjlPui9fljn" %}
[Multimage uploader](/canvas/5.2/canvas-library/reusables/multimage-uploader.md)
{% endcontent-ref %}