I have a form with the normal sets of controls (checkboxes, select dropdowns, text input, etc) and i also have a table inside of the form so it looks like this:
to Add / Edit items in the table, you click on "Add Person" button and that displays a popup dialog like this:
once you click "Add", it creates a new row on the table.
My issue is that the table is just stored locally and only gets saved when you click "Save Form". This issue is that many users have gotten confused by going into a form, adding a few people (rows on that table) and then leaving the page (assuming that by clicking "Add" in the dialog and seeing the row added to table means that this data is saved to the backend as well). They didn't realize they need to click Save Form to actually persist the changes.
I wanted to get suggestions on what are good UI options to make it VERY clear to the user that until you click "Save Form" you have not persisted any changes?
For those who suggest to save upfront, Note that these "sub records" have a relationpship to this forms main entity so I can't save these subrecords until they have a foreign key of the main entity to align with. I guess i could save a "partial" main entity but that seems like it will get messy result in a lot of unnecessary persisted data.