Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Bijesh Tank 187 posts 414 karma points
    Nov 20, 2019 @ 12:59
    Bijesh Tank
    0

    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.

  • Nicholas Westby 1923 posts 6445 karma points c-trib
    Nov 20, 2019 @ 17:25
    Nicholas Westby
    0

    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.

  • Bijesh Tank 187 posts 414 karma points
    Nov 21, 2019 @ 16:26
    Bijesh Tank
    0

    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.

  • Nicholas Westby 1923 posts 6445 karma points c-trib
    Nov 23, 2019 @ 00:23
    Nicholas Westby
    0

    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: success event (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-L82

    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.

    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

  • Bijesh Tank 187 posts 414 karma points
    Nov 25, 2019 @ 10:28
    Bijesh Tank
    0

    Thanks for the tips. I'll give it a go and see how I get on.

  • Nicholas Westby 1923 posts 6445 karma points c-trib
    Feb 10, 2020 @ 16:14
    Nicholas Westby
    0

    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

  • Nicholas Westby 1923 posts 6445 karma points c-trib
    1 week ago
    Nicholas Westby
    0

    Multi-step forms were released as part of Formulate 3.2.1: https://github.com/rhythmagency/formulate/releases/tag/v3.2.1

Please Sign in or register to post replies

Write your reply to:

Draft