Advanced Form Popup

Use this for short forms that need multi-file or multi-image uploaders.

Overview

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

• 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)

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

• 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

• 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

• 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

How to set up the custom multi-image uploader

Multimage uploader