How-to: multiple-page form in MODX w FormIt

Often to avoid huge, long scrolling forms, designers like to break them up into several pages. Here’s a simple, step by step example of how to implement that in MODX with the FormIt add-on package.

1. I got the "quick and dirty" of how to do this from this forum post (thanks odeclas) http://modxcms.com/forums/index.php/topic,60268.msg342846.html#msg342846

2. I’m assuming you’ve used FormIt before, but haven’t used it for a multipage form. Official FormIt documentation can be found here: http://rtfm.modx.com/display/ADDON/FormIt

3. This solution uses FormIt, which comes with FormItRetriever. You’ll need both, because the way this works is that on submitting the first page, FormIt simply "stores" the results - then FormItRetriever "retrieves" them and puts them into placeholders in hidden input fields on the next page. Upon submitting the second page, all of it gets output (to email, in this example).

4. First page FormIt snippet call:

Break it down:
!FormIt? » Calls the snippet.
&hooks » Notice we don’t have email, math, or anything else here. I’m just redirecting to the next page. Someone might suggest I have a spam hook or something here - I don’t think it’s necessary yet.
&store » Tells FormIt to store the results.
&redirectTo » Replace ID with document ID of the next form page.
&validate » This is standard FormIt validation - add any required fields from your form. This page of the form will not submit until it is validated.

There’s nothing special about the form html on this first page, so onwards...

5. Second page FormIt snippet call:

Break it down:
!FormIt? » You must call the snippet again from this page, if that wasn’t obvious.
&hooks » Here you can use any FormIt hooks you’d normally use. In this example, FormIt checks for spam, emails the form results and redirects to a Thank You page.
&emailTpl » Name of your email template chunk. Required - otherwise FormIt sends a list of fields & values.
&emailSubject » Subject of the email report - notice you can use a placeholder for any of the form’s fields.
&emailTo » Recipient array, comma separated.
&redirectTo » Replace ID2 with document ID of your Thank You page.
&validate » More validation options. For usage and a list of built-in validators, check the documentation here: http://rtfm.modx.com/display/ADDON/FormIt.Validators

6. Here’s the important part!!

You must also call FormItRetriever on this page. I’ve done it immediately following the FormIt snippet call and preceding the actual html form. Not sure if it’s necessary to do it in that order, but that seems to work But wait....now that we’ve retrieved the previous page’s form data, where does it go?

7. Add placeholders to output the form data:

These hidden fields are where FormItRetriever will output the stored form data from the first page. Notice the prefix "fi." They should be nested inside your <form> element and I have them grouped preceding the second page form fields, but I suppose they could be anywhere in the form.
In this example, ONLY "this_field" and "that_field" will be output!! All other fields from the first page will be discarded if I don’t add placeholders for them! Tricky, hey?

8. Your email template
Remember to include placeholders from BOTH pages of your form in the email template chunk. No placeholder = nowhere to output data = missing data!

So that’s it. Hope this helps. Thanks MODX Team for a great platform, and FormIt developers for an awesome add-on...

Please add your comments to make this tutorial better (or at least suggest ways that I can make it better, or point out mistakes)

I'm doing this with a Confirmation page for all of the data (wish I had seen this first, but have got it all sorted now). However, I'm having a problem displaying checkbox selections on the confirmation page and then in the following email template. Did you have any problems with this, and if so how did you get around it?

This might help: http://rtfm.modx.com/display/ADDON/FormIt.Handling+Selects,+Checkboxes+and+Radios

I also have problems with arrays and formitretriever.

On my 3th form page I have something like this



at the 4th page this gives no value


Whats wrong?
[ed. note: sjeijk last edited this post 14 years, 8 months ago.]

Quote from: BobRay at Oct 12, 2011, 11:19 PM

This might help: http://rtfm.modx.com/display/ADDON/FormIt.Handling+Selects,+Checkboxes+and+Radios

It didn't. Has anyone come across an answer for this?

Quote from: BobRay at Oct 12, 2011, 11:19 PM

This might help: http://rtfm.modx.com/display/ADDON/FormIt.Handling+Selects,+Checkboxes+and+Radios

It didn't. Has anyone come across an answer for this?

I managed it with the snippet fiProcessArrays which can be found here:

There is another post of the author which I can't find. If you use it in format make sure you call the snippet:



The snippet will return a placeholder like [[+fi.yourarrayname_value]]

mind the _value

https://forums.modx.com/thread/47705/figeneratereport-posthook-formit-email-report-generator [ed. note: sjeijk last edited this post 14 years, 8 months ago.]

Hi Sjeijk,

Thanks for the tip! I've tried using the the fiProcessArrays snippet but I must just not be using it properly as I'm not getting any results.

I've added the hook reference, added the fiProcessArrays code as a snippet and tried to reference my placeholder on the page where I want it displayed, but get nothing. you mention something about the placeholder...could you perhaps explain that a bit more?

Many thanks!