Sending Input and Check-Box Data to Final Page

[hattford]

How do you send input data from several “inputs” on one page to another page after you’ve clicked on a button? For example…

1. On the first page, I fill out 4 different “input” sections with information.
2. I then click on a button that takes me to another page with more “input” and “check-box” options/sections to fill out. I have 4 pages worth of this.
3. The final page should include all the answers from all the “inputs” and “check-box” options/sections.

I have searched the Bubble Forums and YouTube and can’t find an answer. It’s as simple as a Google Form. It seems like a super easy fix but struggling to find an answer. Thoughts?

[hattford]

Here’s what I’m creating for context.

[romanmg]

Hi @hattford,

If you’re wanting to pass data from page to page, you have two options: URL parameters or your database.

URL Parameters
Whenever you use the action Go to Page to navigate to next page, you can add parameters to pass values to the page. A parameter is made up of a key and value pair.

So, if the user typed in their name in an input, then one of your parameter keys could be “name” and the value would be “Input First Name’s value.” This would add the parameter to the URL in the target page. E.g. myapp.com/page2?name=henry

You can send multiple parameters too.

The url of this set up would look something like this:

app.com/bug-report?name=henry&age=20&color=red

Then, on the other page, you’ll be able to extract each parameter value using “Get data from page url” - check out this video to see this in action: https://www.youtube.com/watch?v=vLHiC4Iq8u0

Database
If you have a lot of data to pass between pages, I recommend using your database rather than sending everything via the URL because it’ll be a lot to manage to send and extract. A lot of room for error.

So, in the first step of the form, create a new record of some Thing in your database. For example, if this is an event registration form, then you could have a data type called “Registration” with a bunch of fields that the participant will fill out and save. Step one’s workflow would be Create a New Registration, and you SAVE the values of the inputs to the record, then Go to Page 2 and pass only the record.

Page 2 can now make a change to the record passed to it and save the inputs on its page only. Then it goes to Page 3 and also passes the same record, and so on.

To pass a record to another page, you’ll want to give the target page a Content Type, which will in turn require you to Send Data of that Type in the Go to Page action. I recommend doing Bubble’s lesson on Sending Data to Pages to get up to speed on that concept: Lessons | Bubble.

There is often more than one way to do something in Bubble. Hopefully the above gets you moving forward. If you’re interested in some other methods, you can also:

• Pass a record from one page to another via URL parameter as well (the value would be the record’s unique ID), and when extracting on the target page, you’ll need to define the parameter’s type.
• Use custom states for your form to happen on a single page rather than multiple pages.
• Or for super straight-forward functionality, have one page with multiple groups that you show/hide between steps.

Cheers!

---

Gaby at Coaching No Code Apps (formerly Coaching Bubble)

Courses & Products, Tutorials, Private Coaching, and High-level Development

Start Learning Today

[hattford]

This is very helpful thanks. “Or for super straight-forward functionality, have one page with multiple groups that you show/hide between steps.” I’m all for super straight-forward. Do you have any articles on this? I found this forum article here: Showing/Hiding Groups Do you have any videos as well? I can only find one on parent vs grand parent groups.

Thanks in advance!

[romanmg]

You’re welcome!

I don’t have anything specifically on this, but I’ll break it down for you here:

1. Create a separate group for each step. Make each step not visible on page load (it’s a checkbox in the Appearance tab).

2. Workflow: When page is loaded > Show Step 1’s group element

3. In each group, you can have previous and next buttons. Step 1 would only have a next button. When that button is clicked > hide Step 1 > Show Step 2. Step 2’s next button would hide 2 and show 3; Step 2’s prev button would hide 2 and show 1, etc.!

4. Each step’s group would have whatever inputs you need for that step. Hiding the group won’t clear the inputs.

5. At the final step, you can retrieve the values of all those inputs to display in one place as a summary. If you’re saving this all to the database as well, a “Complete” button in the last step can do this in a workflow to Create a New Thing, where each field under the Thing equals the appropriate input value.

That should do it!

[hattford]

@romanmg

At the final step, you can retrieve the values of all those inputs to display in one place as a summary. If you’re saving this all to the database as well, a “Complete” button in the last step can do this in a workflow to Create a New Thing, where each field under the Thing equals the appropriate input value.

So this Show/Hide aspect is working really well but I can’t seem to get the information to display at the final step. Are my settings correct (pictures attached)?

Cheers,
Matt

[romanmg]

Hi Matt, you’re saving all those values to the same field it looks like (Client Info). You need to create separate fields under the Client Information data type for each input.

Client Information

• Contact Name (text)
• Address (geographic location)
• Phone (text)

etc.

That way each field = it’s own input value. What you have now is just going to save one of those values to the single field.

To display it at the end, you’d need to pass the newly created Client Information record to a group that is visible at the end with the Display Data action. That way text inside that group can display “parent group’s [field]” (separate text for each field). See this video to help with that: https://www.youtube.com/watch?v=fcdD6UED_PA

[hattford]

Very helpful Romanmg. I’ve tried to follow all your steps and I have watched your videos multiple times/done the lessons multiple times and I can’t get the input “Client Info” to show on the final page.

Step 1: This is the opening shot (where I input the Client Name)

Here’s the workflow for the button:

Step 2: On the final page I want to have the input for “Client Info” to go in this spot

Here’s a shot of the text section within the group

Do you have any insight into what I’m missing? I’m a little baffled at the moment.

Cheers!

[keith]

You’re not feeding the group any data:

“Data source” is how you tell the group WHICH Client Information object to load.

I can guess your next question (“How do I get that?”). The answer is:

This whole process of yours is making a thing. I’m guessing that that thing is ultimately a “Quick Contract”. You should be creating a new Quick Contract at the very first step in your process. Quick Contract objects would have Client, Contract Name, Phone, Address, and perhaps other fields on them, eh?

(Those fields do not have to be primitive data types. For example, it seems to me that you should have a Client data type with fields Name, Contact Name, Phone, Address, etc. and so THAT is where such information should go.)

Then your pages where you’re doing all of this should have a type. That type should be Quick Contract and the unique ID that you pass to those pages (Bubble refers to this as “Data to send to the page”) is the Quick Contract you created in the very first stages of this process.

Now that you have a better understanding of all of this (via the ever-helpful @romanmg), you can probably see how you were making this way harder than it needs to be. (This is kind of a nice way of saying you should kind of start over and do all of this the way Bubble intends for you to do it.)

[romanmg]

As @keith pointed out, your blank data source is the immediate issue. You’ve cut off connection between text and the record you’ve passed to the page. If you’re still doing a multi-page form, the data source of that group would likely be “Current Page’s Client Information” - that way the record reference is passed through all the way down to group and eventually the text.

[cajudick]

That is a great read. Thank you all. I am generally familiar with passing information between pages via the two different ways mentioned above (URL parameter and DB). However I am struggling since I am accessing a page of type “Thing” via external URL (encoded in QR Code). So now I can only pass URL parameters…However if I extract the parameter it is always of type “text” and never of type “Thing” even if I pass the unique_id of “Thing” via parameter to that page…My question now is how can I manually “set” the “Current page Thing” of the page? @romanmg Above you mention the following additional options

• Pass a record from one page to another via URL parameter as well (the value would be the record’s unique ID), and when extracting on the target page, you’ll need to define the parameter’s type.

How exactly does “you’ll need to define the parameter’s type” work?? O can’t get my head around, sorry! And thanks to all…