Does Formulate support multi-step forms? I couldn't see anything in the documentation oh how this can be achieved, unless I missed something glaringly obvious.
If Formulate does support multi-step, would it be possible to implement some kind of decision tree? For instance, selecting a Yes/No radio button would show a different form in the next step depending on the choice made. I'm assuming this is something that would need to be handled in code rather than some configuration from the backoffice.
It support it to a degree. Basically, it has some plumbing that makes it possible for you to implement it. Here's what I've done before:
Single Form Create a single form with all the fields for each step of the form.
Multiple Layouts Create one layout per step, selecting only the fields belonging to that step. You'll also create a configured form per layout.
Specialized Buttons Modify the configuration file so buttons can have specialized types (e.g., previous, next, submit).
Render Forms Render one Formulate form per configured form, but as part of a single multi-step form widget that you create.
Intercept Submissions Listen for JavaScript events emitted by Formulate to intercept submissions, then cancel those submissions and show the next step (until the final step, which is submitted). I think you have to do a bit of aggregation of data from each step as well.
I can probably dig up some code if you are interested in seeing it.
This event sends an object containing a "cancelSubmit" property that you can set to false to avoid submitting the form.
I believe you can also use the fields and/or payload properties to aggregate the data. So, when proceeding to the next step in the form, you can save the data. Then when you get to the final step, you can set the properties based on the combined data.
Multi-step form
Hi
Does Formulate support multi-step forms? I couldn't see anything in the documentation oh how this can be achieved, unless I missed something glaringly obvious.
If Formulate does support multi-step, would it be possible to implement some kind of decision tree? For instance, selecting a Yes/No radio button would show a different form in the next step depending on the choice made. I'm assuming this is something that would need to be handled in code rather than some configuration from the backoffice.
Thanks B.
It support it to a degree. Basically, it has some plumbing that makes it possible for you to implement it. Here's what I've done before:
I can probably dig up some code if you are interested in seeing it.
Thanks for your reply Nicholas. Your process makes sense, something we would need to try.
Yes, definitely interested in seeing code if you have it to hand.
Hmmm, I can't seem to find an example with the plain JavaScript template.
However, you'll want to start by adding an event listener for the
formulate: validation: successevent (this occurs just before sending the data to the server): https://github.com/rhythmagency/formulate/blob/1a3afe5f6146f1f244eec34a36f279187ece107d/src/formulate.frontend/responsive.plain-javascript/steps/render-forms.js#L76-L82This event sends an object containing a "cancelSubmit" property that you can set to false to avoid submitting the form.
I believe you can also use the fields and/or payload properties to aggregate the data. So, when proceeding to the next step in the form, you can save the data. Then when you get to the final step, you can set the properties based on the combined data.
This should give you an idea of how to interact with the fields and payload properties: https://github.com/rhythmagency/formulate/blob/1a3afe5f6146f1f244eec34a36f279187ece107d/src/formulate.frontend/responsive.plain-javascript/steps/render-forms.js#L137-L191
Thanks for the tips. I'll give it a go and see how I get on.
FYI, I have a working prototype for multi-step forms in the develop branch for Formulate 3.
You can follow the progress here: https://github.com/rhythmagency/formulate/issues/165
Multi-step forms were released as part of Formulate 3.2.1: https://github.com/rhythmagency/formulate/releases/tag/v3.2.1
is working on a reply...