Form Builder Page
Use this to create forms, surveys, and quizzes with multiple question types
Overview
This page enables form creators to design, edit, publish/unpublish, view, and delete forms. Form creators can also access and download all form responses. When a form is published, other users can view and submit their responses.
Structure
When integrated into your app, this page will include different option sets, data types, reusable elements, and UI components:
Option sets
Form field type - stores the form question types (e.g. feather icon, name, form field category, and list). Used in Popup Add form field.
Data types
Form
Description (text) - form description.
Name (text) - form name.
Published (yes/no) - If yes, other users will be able to view the form and submit responses. If no, only the form creator can view the form and submit responses.
Form field - questions in a form.
Form (form) - form that the question belongs to.
Form field options (list of form field options data type) - stores the list of options for questions that include a list (e.g. multiple choices, dropdown, and radio).
Form field type (form field type option set) - identifies the question type.
Order (number) - identifies the order of the question in the form.
Prompt (text) - question text.
Required (yes/no) - If yes, users are required to answer the form question before they can submit their form responses.
Form field option - stores the list of options for questions that include a list (e.g. multiple choices, dropdown, and radio).
Form field (form field) - identifies the question that includes options.
Image (image) - image associated with the form field option.
Include input? (yes/no) - identifies if the form field option should include an 'Other' input at the end of the list, allowing users to submit their own answers instead of selecting an existing option.
Label (text) - form option text.
Order (number) - identifies the order of the question in the form field options list.
Form response - saves a user's form answers.
Answers (list of form response answers) - list of answers to the form questions.
Form (form) - form the response belongs to.
Submitted? (yes/no) - identifies if a form response has been successfully submitted.
Form response answer - stores the user's answer for each form field or form question.
Form field (form field) - identifies the form question this answer corresponds to.
Form response (form response) - identifies the form response this answer corresponds to.
Value - address (geo address) - answer for address question type.
Value - date (date) - answer for date question type.
Value - date and time (date) - answer for date and time question type.
Value - dropdown (form field option) - selected answer from dropdown question type.
Value - email (email) - answer for email question type.
Value - file (file) - answer for file question type.
Value - image (image) - answer for image question type.
Value - link (text) - answer for link question type.
Value - long text (text) - answer for long text question type.
Value - multiple choice (list of form field options) - selected answer(s) from multiple choice question type.
Value - number (number) - answer for number question type.
Value - other (multiple choice) (text) - answer for 'Other' input in multiple choice question type.
Value - other (radio) (text) - answer for 'Other' input in radio question type.
Value - phone (text) - answer for phone question type.
Value - radio (form field option) - selected answer from radio question type.
Value - short text (text) - answer for short text question type.
Reusable elements
formresponse - Includes the UI for displaying all the form fields in a form, allowing users to submit a form response and a form creator to preview form answers
formresponse_menu - Menu dropdown for the form creator to delete a form response
formfield_menu - Menu dropdown for the form creator to duplicate or delete a form field/question in a form
Plugin
Due to the form builder's complex database structure, we use Eli's free 1T - CSV Creator plugin to format and generate the form responses CSV file. The plugin action is used on the Responses tab when the form creator clicks on the 'Download' form responses button.
Main UI components
When this page is added to your app, it will come with various UI components:
FloatingGroup Form editor controls This sticky floating group includes all the admin controls for a form creator to:
View the questions tab and create form fields
View all form responses and preview the answers
Preview an unpublished form to submit a form response
Publish form
Unpublish form
Delete form
Get form link to share
Popup Hidden Variables
This popup includes all the hidden variables that are referenced and used throughout the form.
var - ⚙️ App settings - This group stores the
App settings(e.g., app name, primary color, and etc.)var - current user viewing form (user) - This group stores the user viewing the form and controls the display settings
var - form (form) - This group stores the unique id of the form by getting the form parameter from the page url
var - form field type (form field type) - This group stores the question type to create a new form
var - form field order (number) - This group stores the original order of a form field/question before updating its order in the form
var - selected form response (form response) - This group stores the form response the form creator is currently viewing
var - edit mode on? (y/n) - This group stores value of if the form is on edit mode by getting the edit parameter yes/no value from the page url. On page load, there are two workflows to check if the current user is the form creator and has the permission to enter edit mode for the form.
var - admin preview (y/n) - This group stores the formresponse reusable elements admin preview state. If the reusable's state is set to yes, it will allow the form creator to preview the form and its questions, even if the form itself hasn't been published yet.
Group Main form field - questions tab
This group will be visible only when the form creator is on the Questions tab.
Group Main no questions (form fields) - This group is visible when the current form has no form fields/questions
Group Main form field content - This group is visible when the current form includes at least one form field/question
RepeatingGroup Form field stores current form's list of form fields/questions
Each question type has a collapsible group and will only be visible when current cells's form field's form type matches the question type
If you want to add a new question type, you would need to build and include the UI for that new question type in this repeating group.
Group Main form responses - responses tab
This group will be visible only when the form creator is on the Responses tab.
RepeatingGroup Form Response stores all the current form's submitted form responses
A form creator can click on a form response to preview the user's submission and answers. This will set the formresponse reusable element's view response? (y/n) state to 'yes' and change the form response's display settings to allow the form creator to view the user's submitted form response answers with the inputs disabled.
Deleting a form response will delete all of the user's form field answers that are associated with the user's form response and the user's form response. This action cannot be undone.
Clicking the 'Download' button will generate a CSV file for the form creator to download all form responses.
Formresponse reusable element
The formresponse reusable element includes all the UI components for displaying the form fields/questions in a form.
RepeatingGroup Form Field shows the form's form field/questions. If you end up adding a new question type, you will need to include a new collapsible group here with the corresponding UI components for the question type.
Every time a user answers a form field question, the user's answer will be autosaved. In the background, a form response answer entry will be created and added to the user's form response.
How to set up
Update page load conditional statement
Locate the page is loaded workflow on the page and add an 'only when' for Current user is logged in. The conditional statement has been removed for demo purpose but to make your form more secure, the user should be logged in to create a form.
Linking to the form builder page
You'll likely want to link to this form builder page from a separate page. On this separate page, you should have a repeating group with Forms set as its data source. You'll likely want to include a filter for only forms created by the current user. There should be some UI here that will navigate the user to the form builder page with a few url parameters when the user clicks on a form to edit. Here are some example workflows:
Create new form - navigate the user to the form builder page without any url parameters. As long as the user is logged in, the form builder page will automatically generate a new form for the user.
Edit a form - navigate the user to the form builder page and pass a 'form' url parameter that is equal to the repeating group current cell's form's unique id.
Adding a new question type
To add a new question type, follow the steps below:
From your Bubble editor, go to the Data tab > Option sets > Form Field Type > and Add a new option.
After adding the new option, click on 'Modify attributes' next to it and fill out the details.
Go to Data tab > Form response answer data type and add a field for the new question type.
Go back to the form builder page, and go to RepeatingGroup Form field and add the corresponding UI for the new question type. Make sure to hide and collapse the UI by default and add a conditional statement on when to show the UI.
Next, go the formresponse reusable element and add the corresponding UI for the new question type in Group Inner form field question. Make sure to hide and collapse the UI by default and add conditional statements on when to show the UI.
Open the Hidden Variables Popup in the formresponse reusable element, add a new variable group for your question type (e.g: var - answer new question), and update the type of content to match the new question type's value.
Add a workflow for the new question type that says 'When ...input is changed', display data in var - answer new question and then trigger create / update form response answer.
Go to the custom workflow update form response answer and in the make changes to form response answer workflow, add the new question type you've created to equal var - answer new question.
Since you added a new question, we need to include that in the form response CSV download. Go back to the form builder page and find the workflow for when 'Button Download is clicked'.
From here, add something like the following: This Form Response Answer's Value - new question is not empty: formatted as text - Formatting for yes: This Form Response Answer's Value - new question - Formatting for no: leave blank
When happens to my form and form responses if I delete or change a form field/question?
Like Google Form, if you change a form field/question prompt, then the change will be reflected everywhere including previously submitted form responses. If you delete a form field/question, then all from responses for that question will be deleted as well. We recommend downloading all form responses as a back up before deleting a question.
