Make popup prevent the navigation to a new page

[oodiasejr]

To explain the situation: I would like the user to click “Submit” on a form, then navigate to another page. This will happen if a user submits the form and clicks “No” (on an arbitrary radio button). However:

When a user submits a form and they click “Yes”, a pop up form should appear for them to sign up. If they sign up/log in, the form should disappear and they should navigate to the next page. If they choose to not sign up/log in, they can click the “x” at the top right of the screen, hide the form, then navigate to the new page.

What I need help with is: how do I get the logic to allow the above paragraph to happen? I would love to say navigate to the new page only when the pop up is not visible, however, that option doesn’t seem to be available.

I would love to know if anyone has had a similar problem or has a solution. Thank you!

[bubblealex]

Hey @oodiasejr ,
This doesn’t seem hard. Just need to understand how you are navigating between pages. Are you going between different bubble pages or is this a single page app and you’re navigating between different groups?

Alex

[oodiasejr]

Thanks for the quick reply @bubblealex !

I’m navigating between different bubble pages.

[bubblealex]

Okay great! I’m assuming you have:

1. A “submit” button
2. A radio button with yes/no
3. A popup to sign a user up

We’ll cover this part first: When a user Click’s Submit and the radio button is set to “No”:

1. Click on the submit button and click “Start/Edit workflow”
   

   

2. In the workflow section, we’ll add an “Only when” to the workflow to say when the RadioButton’s value is No, then run this workflow.
   

   

3. Next we need to navigate the user. Click to add an action and select Navigation > Go to page…
   

   

4. For “Destination” select the page you want to navigate the user to
   

   

---

Next we’ll cover: When a user CLick’s submit and the radio button is set to “Yes”:

1. We already have a workflow when a user click’s submit and radio button is set to No. Let’s right click on that workflow, select copy, then right click on the “Click here to add an event” section and select paste.

2. Check the “Only when” section to Yes instead of No
   

   

3. Delete step 1
   

4. Add a step to show an element (Element Actions > Show)

5. Select your popup in the “Element” dropdown
   

---

The last part is to do this for when a user is in the popup and clicks the X button to close the popup. You’ll just repeat the steps above to create a workflow for when the X button is clicked and add a step to navigate the user to the next page.

Hope this helps,
Alex

[oodiasejr]

Thank you for the help Alex! I’m completely aligned with your thinking on this. I feel the two reasons I was running into problems are:

1. The pop up is a reusable item
2. I need to send parameters from the current page to the next page (the reusable element does not have access to those parameters)

I’ve been tinkering with this for a while now and I believe I might have just found a solution. Please let me know if there’s an easier way to do this:

1. I created two custom states, on the reusable element,(since I have two parameters I need to send to the new page) that fit the “data type” that I need the parameters to be.
2. Following your logic, on the reusable element, when a user either: clicks on the “x” button or successfully logs in/signs up, I will send them to the designated page. (Within the parameters, I put in the respective custom state values from Step 1)
3. On the page where I want them to use the reusable element: In the workflow step before I show the reusable sign up form, I set the values of the two custom states (from Step 1) to the desired parameter values that I need to move to the next page.

That’s my current approach. I’m completely open to pivoting if there’s a better solution out there. Thank you!