Canvas Pages and Modules
3.0.0
3.0.0
  • Welcome
  • PAGES
    • Page Flair Group
    • Free Bubble Marketing Page
    • Premium Bubble Marketing Page
    • Centered Profile Page
    • Left-Justified Profile Page
    • Standard Page
    • Toggle Tabs Page
    • Menu Page
    • Mobile Menu Page
    • Video List Page
    • Standard Portal / Dashboard Page
    • Simple Portal / Dashboard Page with Icons
    • Double Sidebar Portal Page Template
    • Search Page
    • Map Search Page with Toggle and Filters
    • Floating Map Search Page
    • Search Bar Page
    • Multi-Step Page With Progress Bar
    • Standard Multi-Step Process Page
    • Multi-Step Process Page with Sidebar
    • Gallery Profile or Product Page
    • Sidebar Profile Page
    • 2-Column Menu Tabs Page
    • 2-Column Checkout Page
    • 2-Column Video Chat Page
    • Vertical Multi-Step Page Template
  • BLOCKS
    • Monthly Calendar Scheduling Widget
    • No Reply Comments Thread
    • Nested Comments Thread (with Like and Reply)
    • Placeholder Group
    • List with Circular Progress Bar Repeating Group
    • Top Input Chat Widget
    • Bottom Input Chat Widget
    • Toggle Tabs Group
    • Single-Select or Multi-Select Pill Tabs Group
    • To-Do List Repeating Group
    • Title Group with Button and Filters
    • Product Details Group With Progress Bar
    • Listing details with Icons and Menu Focus Group
    • Week Daily Availability Group
    • Frequently Asked Questions (FAQ) Repeating Group
    • Dismissible Module
    • Video Group
    • About Group
    • Add to Cart Group
    • Full Width Map with Directions Link
    • Location Module (Map and Directions)
    • Drag and Drop Repeating Group
    • Advanced Form Inputs Group
    • Reviews Repeating Group with User Images
    • Reviews (Text Only) Repeating Group
    • Nested Repeating Group
    • Standard Repeating Group with Image
    • Search Bar Group
    • Listing Details Group
    • Post Group with Upvoting UI
    • Large Chart Dashboard Widget
    • Chart With Key Metrics Dashboard Widget
    • Main Image with Thumbnails
    • Centered Profile Block
    • Left-justified Profile Block
    • Tile Image Gallery and Popup
    • Image Feed with Nested Comments Thread
    • 1-Column Standard Form Inputs Group
    • 2-Column Repeating Group (Text, Link, Image, and Description)
    • 2-Column Repeating Group (Link, Text, and Button)
    • 2-Column Repeating Group with Actions
    • 2-Column Grid Tiles Repeating Group
    • 2-Column Form Group
    • 2-Column Sortable List Repeating Group (With Image, Link, Star Rating, and Text)
    • 2-Column Table and Key Metrics Dashboard Widgets
    • 2-Column Progress Bar Chart Dashboard Widgets
    • 2-Column Chart and Key Metrics Dashboard Widgets
    • 2-Column Large Metrics Dashboard Widgets
    • 3-Column Large Metrics Dashboard Widgets
    • 3-Column Dashboard Widgets
    • 3-Column Repeating Group (Text, Link, Image, and Description)
    • 3-Column Text and Link Repeating Group
    • 3-Column Icons with Labels Repeating Group
    • 3-Column Grid Tiles Repeating Group
    • 3-Column Mini Grid Tiles Repeating Group
    • 3-Column Tiles with Buttons Repeating Group
    • 3-Column Horizontal Scroll Repeating Group
    • 4-Column Dashboard Widgets
    • 4-Column Large Metrics Dashboard Widgets
    • 4-Column Tiles Repeating Group
    • 4-Column Icon Tiles Repeating Group
    • 4-Column Profile Tiles Repeating Group
    • Standard Data Table
    • Mobile-Friendly Data Table
    • Standard Horizontal Scroll Data Table
    • Infinite Columns Horizontal Scroll Data Table
    • Infinite Columns Horizontal Scroll Data Table with Fixed First Column
  • Popups
    • Confirmation Popup
    • Message Popup
    • Image Popup
    • Video Popup
    • Vertical Scroll Popup
    • Edit Popup
    • Standard Form Popup
    • Subscribe Popup
    • Feedback / Contact Popup
    • Details Popup
    • Add List Popup
    • Advanced Form Popup
    • Rating Popup
    • Toggle Tabs Popup
    • Share Popup
    • Multi-Step Popup
    • Invoice Popup
    • Stripe Credit Card Purchase Popup
    • View Profile Popup
    • Send Message Popup
    • Multi-Select Pill Tabs Popup
    • Pricing Plans Popup
  • Reusables
    • filters_template
    • menufocus_template or Menu options (︙)
Powered by GitBook
On this page
  • Overview
  • Structure
  • How to set up
  • How to set up the custom multi-file uploader
  • How to set up the custom multi-image_uploader

Was this helpful?

  1. Popups

Advanced Form Popup

PreviousAdd List PopupNextRating Popup

Last updated 4 years ago

Was this helpful?

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

  • Multi-image_uploader reusable element contains the following:

    • multi-image_uploader has a custom state of list of files images (type: file) and selected file image (type: file)

  • HTML multi-uploader style includes a code snippet that changes

    multi-file_uploader images upload's color. You can modify the color by updating the HEX codes.

  • Upload images with multi-file_uploader images upload

  • RepeatingGroup uploaded images's displays new_imageuploader's list of files images

  • Clicking on Group Inner delete image deletes a file image

  • Add workflows to Group Inner move left and Group Inner move right. These groups should be used when you want to edit the order of a list of file images.

  • Clicking on Group Inner select image_file will update RepeatingGroup uploaded images's selected file image. This should be used when you want to select a main image from a list of images (e.g., cover photo, profile picture, or main listing image).