How to refresh Sitecore Form without page Load

Question

We are trying to load a sitecore Form on Modal. On submit, Form goes from "Page1" to a "Page2" using "go to" action on submit button condition. On Closing of the modal, Form must refresh and show "Page1" without reloading the whole page. Is there any way to achieve this scenario ??

Answer 1

In Sitecore FORMS we have an option called Ajax Enabled in Advanced Settings, if we enable the Ajax option FORM will be submitted without loading the whole page.

Thanks

Answer 2

First, when it comes to modals with forms rendered within them, one should consider the following:

• Which actions can trigger a close of the modal?
  • A close button?
  • Form submit?
  • Clicking outside of the modal?
  • Hotkey (eg. ESCAPE key)?
• Is it easy for a user to accidentally close the modal and potentially lose their form progress?
• If a modal is closed and reopened, should it preserve the state that existed prior to the close action?
• What if a form is only partially complete and a close action occurs? Should the user be notified that the form is in progress and be forced to confirm that they want to close the modal?
• What if a manual page refresh event is encountered?

In your case, it sounds like you have a modal with a form that has two pages, and that you are ostensibly handling the case in which a user submits the form, is shown the second form page (perhaps a "thank you for submitting" page), and you want to ensure that when the modal is closed, the form state is cleared and that the first page of the form is shown again, should the user open up the modal again without refreshing the page.

Depending on your UX requirements, one idea would be to render the form in an iframe. You would then have the ability to destroy the iframe element on modal close and have it render again on open.

If you want to do any communication between your webpage and the iframe, consider looking into window.postMessage() (docs).

Answer 3

Well, it's not so simple and might be a little complex but I think there's a way that might work:

1. Add a new class to the Submit button on the Form, such as form-submission
2. Attach an Event for the class (form-submission) using JavaScript
3. This event will trigger, via Ajax, a method from your Controller.
4. In the Controller you render just the modal.
5. The Ajax receives the View from the Controller as a result of the call done in step 3.
6. Replace the current Modal, with the new Modal returned by the Ajax call.