Add a transparent screen to form when submitting + 2 situation specific obstacles

[sridharan.s]

I’d like to add a transparent group or shape to my form that would be displayed when users click the submit button. Two major catches I’m running into:

1. We have groups that are collapsed/hidden on the form. Adding a shape on top of them prevents them from being collapsed which means there’s way to much white space before groups of shown. As such, this seems to rule out shapes, groups, and floating groups.

• Once the form is submitted, we take them to another tab on the same page. We then display a modal saying “congratulations.” This is done via URL parameters and the way Bubble handles this, the page doesn’t actually reload. The modals on the other tab conflict if we use group focus since the group focus often doesn’t disappear before the modal appears (which doesn’t work from a UX standpoint).

I’m out of ideas. Anyone else know of a potential solution?

[romanmg]

For method 1… can you add a group instead of shape but also make it collapse height when hidden? Maybe place it at the top of the form (in Y axis, not Z)?

[sridharan.s]

We’ve tried groups that collapse when hidden, but they don’t collapse when hidden if there are other groups underneath them (z-axis) that are also hidden + collapse when hidden. Have tried this on other pages as well without any luck. Have you seen this work elsewhere? Perhaps there’s a trick to get it to work that I don’t know?

[romanmg]

Right, it would need to not share Z space with anything. Is your particular design preventing a group from existing in its own Z space? You’d have to shift everything down below it so that it can.

[sridharan.s]

Interesting. I didn’t know that I had much control over the Z space. All I’ve used is “bring to front” and “send to back.” Didn’t even see a visual output within Bubble that displays the z-index is for each item. Perhaps I’m missing something?

I’ve tried using a group that collapses when hidden, is full page in size, and I’ve selected “bring to front” so in my mental model that means it’d have it’s own z-index above everything else. Are you suggesting something different?

[romanmg]

Sorry I meant shift everything below the group in Y space so that the group’s Z space is not interfering with anything. Just have it not layered on top or below anything else. Because when hidden, everything below it will shift up…

… but now as I’m typing this, you probably want the group to intentionally be layered on top when visible and not push stuff down which is what my suggestion would do… hmm… ok, ok I see your issue here.

Have you thought about a popup for this?

[sridharan.s]

Yeah, I tried a popup. We have another pop-up display on success, and I couldn’t get the transition from one popup to the next looking okay – mostly because of timing.

Perhaps I can just add a popup where the popup box itself is transparent and the background color is also transparent. That seems like it might work. I’ll give that a try later today and will let you know how it goes.

Thanks for thinking this through with me. It’s helpful.

[sridharan.s]

Got this working. The key, for my situation, was to use a modal without any text and make the box and background 100% transparent so that if it continued to show up when the next modal was loaded, it wasn’t noticeable to users.