How to submit data from a form into a new page?

Is there a way of setting up a form so when the user submits the data it stores the data in a different page so that its there for later reference if needed?

Hi @sam.linforth, I’d recommend taking a look at some of Bubble’s intro lessons here: https://bubble.io/lessons

Particularly the ones on saving data and sending data to pages. Those should cover the functions you’re wanting to achieve. If something isn’t clicking, feel free to keep asking questions here!


Gaby | Private coaching, courses, and tons of free resources

Become a VIP Member for immediate access to 100+ lessons, videos, webinars, and more

1 Like

thanks for your advise, another question is I want to be able to send orders to plumbing merchants within the app but I need the order forms to look exactly how ive created them when sending them by email within the app , how can I do this ? as the email function that comes with bubble doesn’t look professional at all when sending emails

ive watched the tutorial and tried doing it myself , I just cant get the data to send to the certain page that I want it too.

I have the same question. Is there any documentation that we can use to better understand this?

Answered by @romanmg, above.

What you and @sam.linforth are probably not grokking are the following, very basic, concepts:

  1. If you have a page wherein a user is entering data. You should be storing that data in the database by creating and/or modifying “things” (Bubble’s odd name for data of varying types).

  2. Once this data is in the database, you can easily have another page that makes use of that data… By retrieving it from the database.

  3. Bubble makes data retrieval very easy in many ways. The most common ways are for one’s page (or a group on that page) to have a data type.

That page or group then will have a data source.

The data source might be (1) the result of a search operation (“Do a search for… some thing of the specified type”), or it might be (2) passed by the unique ID of a specific thing.

The way you do (2) is by Navigate > some page > data to send is some thing.

What that does is constructs a URL where the last part is the unique ID of the thing in question.

Here is an example. Have a look at this page on my site:

Scroll down a bit and you’ll see a little calendar. Below that, there is a link to see that calendar on its own page. Go ahead and click it:

Note the URL of the new page that appears. It’s like this:

https://grupz.com/avail-calendar-medium-18/1533598513737x940983987061391400

This page, which displays an availability calendar for a thing that I call a “Listing”, has a data type. That type, in my case, is “Listing”. The numbers/code you see at the end of the URL is the unique ID of the Listing whose data is being displayed.

So this page is displaying information about the Listing whose unique ID is 1533598513737x940983987061391400.

Various fields of “Listing” (such as external calendars that this thing is synchronizing to) are defined elsewhere in my app. Users who use this service configure stuff by visiting various pages in my app.

Here’s an image of one of those administrative pages:

That long string of numbers and digits at the end of the URL shown there (it’s cut off in the screenshot) is the same string as the one on the calendar page I just showed you.

So the image above represents an a page where the User can edit various settings for that listing.

So:

URL 1: What we might call a presentation view of a Listing.
URL 2: What we might call an editing view of a Listing.

See how those work together? They are both displaying info from the same data object. But in one case, it’s just a static view and in the other case, the User can make changes to the thing.

This is exactly analogous to what @sam.linforth wants to do. Sam has an order entry page or something. Sam then wants to display the order to someone else. The order entry page is the editing view and the order display page is the presentation view.

Both would be accessing data about the same ORDER object.

Now that we understand these concepts, the tutorial lessons might make more sense.


PS: There are times when we need (or want) to pass data between pages in a different way. Let’s say that within my app, I have a button that sends the user to this page so they can edit their calendar. But I want the page to display WITHOUT showing the nice little User info header. This thing:

How might we do that? Well, I could put a CONDITION on the group where all of that user info is displayed and it would be something like this:

^^^ If we visit this page with a URL parameter “hideheader” and that parameter is set to true, this element will hide itself.

So if I send the user to this page with “?hideheader=true” appended to the “normal” URL, we will get the hiding behavior. The general form of the URL would look like this:

https://example.com/the_page_name/unique_id?hideheader=true

“hideheader” is what is called a URL parameter. “true” is its value. You don’t have to construct these URLs yourself. They are created for you when you use the Navigate action and tell it about your URL parameters.

how do I create a database to store the data?

This topic was automatically closed after 70 days. New replies are no longer allowed.