Is it possible to stop a user clicking away from a page before clicking SAVE?

We have a page where users can edit a form that they have created already. We need to make sure that they SAVE before clicking away from the page. How can we do this?

A good idea but I imagine the security or browser issues would prevent this.

Give 'em just one option - maybe make a pop up where the only highlighted item is a SAVE button

I had the same question. I’ve seen other webforms do this (even on this very forum), so I don’t think it is a security restriction.

How would you set this up? We don’t want the form they user completes to be in a popup itself…

The idea is to visually make clear to the user that there’s only one option (the CTA “save” button). I’d use light colors for all elements of the page/group for this form and a colorful SAVE button.

I’d also display a sentence in red “Your form is not saved yet (, please click save)”, and after the “save” click by the user switch it for a green “Saved :heavy_check_mark:” text for confirmation.

Interesting method, but I wondered if there was an actual setting somewhere @Emmanuel @georgeciobanu

1 Like

I really would like to know if we can have this. Something similar to when we are editing in bubble, it autosave when we make any change.

1 Like

There’s a way to signal the browser there are unsaved changes before the page unload event, but we haven’t surfaced that in Bubble yet. It would likely be an event just like page load.
Very good point about autosave, we’ll look into it a well.

1 Like

You could use workflow that sets a hidden field to true/false when certain important fields change (this is usually referred to as a “dirty”/change state).

If they try to click on “previous/next”, and the “dirty” field = “true”, then either save for them, upon button click, or throw up a warning, and prevent navigating to another page.

1 Like

Fundamentally I think it is poor UX to do the spammy “you can’t leave my page” thing. You can’t stop people using their browser controls or history to go elsewhere. You can just control reentry.

Far better to save as you go along, then if they do come back to the page you can have saved the state and do a more graceful “It looks like you didn’t finish last time you were here, do you want to pick up where you left off” thing.

1 Like

It might be poor UX, but we can only use the inputs we’re given with Bubble. So if I’m filling in a form that contains the google address input, and I hit Enter, rather than click on the next field, the page saves halfway through the form.

That’s a different issue though, isn’t it ?

It’s kind of all part of the same process… How to make sure forms are filled in correctly and then data is saved before clicking off to another page…

I think that depends what you mean by “clicking off to another page”. Same page on your site then, yes. User clicking Home, or to another site … not so sure.

Make the save button only appear if the field/input is changed. Then make all buttons leading to other pages scroll to “save” if the Save button is visible.

2 Likes