Output all form steps

(Jon Leverrier) #1

Just placing this here for reference…

If you need to output all the steps in your multi-step formalicious form, so that you can:

  • Visually show what steps a user has to fill out
  • Show which step the user is currently on
  • Show which steps have been completed


The user is on step 2 after completing step 1:

Create a snippet called getFormSteps and place the following code inside it:

 * getFromSteps v.1.0
 * An unoffical utility snippet for Formalicious by Sterc
 * This utility snippet outputs all the steps for a multistep form
 * based on a given form ID
 * Usage:
 * Put the snippet in your &stepTpl and call the snippet like this:
 * [[!getFormSteps? stepFormId=`[[!+form_id]]` &tpl=`myFormStepsTpl`]]
 * Useful placeholders for the snippet tpl are:
 * [[+currentStep]]
 * [[+title]]
 * [[+rank]]

// get the id of the form
$stepFormId = $modx->getOption("stepFormId", $scriptProperties);

// if there is no form id, stop here...
if (empty($stepsFormId)) {
} else {
    // get related steps
    $output = array();
    $getFormSteps = $modx->query("SELECT * FROM `modx_formalicious_steps` WHERE `form_id` ='" . $stepsFormId . "'");

    if ($getFormSteps) {
        while ($row = $getFormSteps->fetch(PDO::FETCH_ASSOC)) {
            $placeholders = array_merge($scriptProperties, $row);
            if (!empty($tpl)) {
                // if a tpl is defined in the snippet call, get placeholders
                $output[] = $modx->getChunk($tpl, $placeholders);
            } else {
                // if no tpl is defined in the snippet call, output an array
                $output[] = "<pre>" . print_r($placeholders, true) . "</pre>";
    return implode("\n", $output);

In stepTpl add the following example markup somewhere in your template:

<div class="c-stepprocess">
    <ol class="c-stepprocess__items">
        [[!getFormSteps? &stepsFormId=`[[!+form_id]]` &tpl=`tpl_getformsteps_row`]]

Create a chunk called tpl_getformsteps_row (this is referenced in the snippet above):

<li class="c-stepprocess__item [[+rank:add=`1`:eq=`[[+currentStep]]`:then=`c-stepprocess__item--active`:else=``]] [[+rank:add=`1`:lt=`[[+currentStep]]`:then=`c-stepprocess__item--complete`:else=``]]"><span>[[+title]]</span></li>

Then with a bit of css styling (in particular, using css counter-increment), you can create something like the example image shown above.