Issues with Multi-Page Forms in Formie Plugin with Varnish Cache

[DieterVanhove]

Hi there,

I'm experiencing an issue with the Formie plugin in Craft CMS on my website, which is set up with Varnish cache. The problem specifically occurs with multi-page forms. When the page is cached, the "Next" button does not work correctly.

Here is a more detailed description of the problem:

Environment Details:

Craft CMS Version: 4.8.10
Formie Plugin Version: 2.1.12
Varnish Version: vcl 4.0

Problem Description:

Single-page forms work as expected.
Multi-page forms exhibit issues when the page is cached by Varnish. Specifically, the "Next" button does not function properly.

Investigation and Findings:

Initially, I suspected that the responses were being cached, causing the issue. However, after further investigation, I found that this is not the case.
The issue appears to be related to the _returnJsonResponse() function, which utilizes getCurrentPage() located in elements/Form.php.
The current page is determined by the following line of code: $pageId = Session::get($this->_getSessionKey('pageId'));
It seems that this problem arises because Varnish does not work with sessions.

Question:

How can I work around this issue given that Varnish does not support sessions?
Is there an alternative way to handle multi-page form navigation that is compatible with Varnish cache?
Any guidance or suggestions would be greatly appreciated!

Thank you!

[engram-design]

Is this a Page Reload form, or an Ajax one? If the former, that's going to be an issue, as when the page reloads it's not typically going to hit your server to even determine what the current page is on. Hence the page will be cached and you'll just see the same page.

If this is an Ajax-based form, that shouldn't be the behaviour you see, as the page-changing mechanism is via JS, and any calls to the server will still use sessions to determine the current page, but it won't be refreshing the page.

I wouldn't have thought Varnish be caching the requests to submit the form? If an Ajax form, you should be able to check the response data, and see the nextPageId be the next page.

We've toyed with some configurable options for how to handle multi-page forms (I believe plugins like Freeform have something like this), but haven't come up with some solid proposals that work in the variety of different front-ends out there.

[Tim-Wils]

We’ve ran info this problem as well (Also on ajax forms). The main problem seems to be static cached pages don’t have sessions. Formie is then lost to which is the currentpage and the nextpage.

It’s a bit hacky, but I worked around this by manually validate pages only on the front-end and submit the whole form only at the last page by adding hidden input with the name submissionIsComplete (could be a bit different, trying to remember it on my phone) with a true value .

The trick is to call Craft::$app->session->open() on beforesubmit and beforesave.

@engram-design Statically caching pages is pretty common. Is manually opening the session the best solution, or is it a bug where the currentPage and nextPage should work nontheless?

[Tim-Wils]

@DieterVanhove I feel there's some similar underlying problem, but our exact problem was the $nextPage wasn't setting properly, so the form doesn't know where it was and didn't complete, because the page is starting from the beginning, because it lost track:

• $nextPage should be filled from this line:
  

  formie/src/controllers/SubmissionsController.php

  Line 516 in 5c18069

  $nextPage = $form->getNextPage(null, $submission);

• And in getNextPage() there was no session, so the $pageId couldn't be resolved and therefore the $currentPage stayed null
  

  formie/src/elements/Form.php

  Line 842 in 5c18069

  $pageId = Session::get($this->_getSessionKey('pageId'));

Starting the session solved our problem, because that way it knows again where it was by getting the pageId from the session.

[DieterVanhove]

@engram-design what if we would store the currentPage on a submission or did you have something else in mind?

[engram-design]

@DieterVanhove It's an option. The only issue is that we use sessions to remember the current submission for a form as well. But that's not exactly going to work anyway given a cached environment.

I'm almost certainly looking at adding a Formie plugin setting like staticCacheMode or similar that when enabled will toggle a bunch of this sort of functionality so that everything "just works". Otherwise, there's just a whole lot of dev work for people to do to get cached forms to work, and I don't like that DX.

[DieterVanhove]

Hi @engram-design,

I'm wondering if you have any updates or a timeline on when a solution, such as the proposed staticCacheMode setting, might be implemented?

Thank you!

[engram-design]

It's not a quick-fix feature at this stage, I'm still working through the implications of a static cache mode, and what that entails.

What's probably more important here is creating another mechanism to store the current state of a multi-page form. I've got some ideas, but again, they're not something quick and easy. It'll require some serious refactoring to allow multiple mechanisms for retaining a "session" without relying on sessions due to caching implications.