by
KK » Sun Aug 26, 2012 7:34 am
As promised, here is my first take on the multi-step-form problem.
The solution involves a bit of PHP in the background. However, since you, as the designer, won't have to deal with it in any way, I have abstracted that part of code away in a snippet (attached with this post as 'multi_form_handler.html') that will need to be embedded in our multi-step form.
So to begin with, place the attached 'multi_form_handler.html' in your 'couch/snippets' folder (or whatever you might have renamed the folder to).
Next, before coding up the real form please take a look at the following skeletal form to get an overview.
Please take time to read the comments explaining the logic.
- Code: Select all
<!-- Regular form. Just make sure the method is 'post' -->
<cms:form anchor='0' method='post'>
<!-- Set the total number of steps (sub-forms) in this form -->
<cms:set total_pages = '3' />
<!--
Embed the PHP code that does all the grunge work in background.
IMP. This has to come after we have set the 'total_pages', as above.
-->
<cms:embed 'multi_form_handler.html' />
<!--
Following is the usual logic of a normal form in Couch.
The code we embedded above sets an important variable 'k_current_step'
that gives us the number of the current step (sub-form)we are on.
e.g. first sub-form will be '1', second will be '2' and so on.
Notice how we make use of this variable to display our form below.
-->
<cms:if k_current_step gt total_pages >
<!--
This is the 'success' condition of our form.
The 'k_current_step' variable (mentioned above) keeps increasing
as the user submits the sub-forms. When the last sub-form gets successfuly
submitted, the value of 'k_current_step' becomes
greater than the total number of sub-forms (the 'total_pages' value we set at the top).
All the submitted values are available here and we can use them to, say, email etc.
-->
<cms:else />
<!--
If we are not yet at the end,
display whatever sub-form is being visited (indicated by 'k_current_step').
Use the regular Couch markup with validation etc.
If your form has more than the shown three steps, create a similar block
for each additional step.
-->
<cms:if k_current_step='1' >
<!-- The markup for your first sub-form -->
</cms:if>
<cms:if k_current_step='2' >
<!-- The markup for your second sub-form -->
</cms:if>
<cms:if k_current_step='3' >
<!-- The markup for your third sub-form -->
</cms:if>
<!--
Navigation with 'Next' and 'Previous' buttons.
IMP! The button that navigates back has to be named 'back'
-->
<p class="nav">
<cms:if k_current_step gt '1'><input type="submit" name="back" value="Previous"></cms:if>
<input type="submit" name="next" value="<cms:if k_current_step=total_pages>Finish<cms:else />Next</cms:if>">
</p>
</cms:if>
</cms:form>
Please note that there are only two things that you'll need to change in the above form to get it working -
1. Set the 'total_pages' to the total number of sub-forms you'll display
2. Place the markup for each sub-form in the indicated blocks (if there are more/less than three, create/remove blocks accordingly).
This is a fully functional sample form created by filling out the skeletal code above (with comments removed)-
- Code: Select all
<cms:form anchor='0' method='post'>
<cms:set total_pages = '3' />
<cms:embed 'multi_form_handler.html' />
<cms:if k_current_step gt total_pages >
<h2>Thank you for contacting us</h2>
<h4>Current Values:</h4>
<p>
Element 1: <cms:show frm_element_1 /><br>
Element 2: <cms:show frm_element_2 /><br>
Element 3: <cms:show frm_element_3 /><br>
Element 4: <cms:show frm_element_4 /><br>
Element 5: <cms:show frm_element_5 /><br>
Element 6: <cms:show frm_element_6 />
</p>
<cms:else />
<cms:if k_current_step='1' >
<fieldset>
<legend>Page One (1 of 3)</legend>
<p>
<label for='element_1'>Element 1:</label><cms:input type='text' name='element_1' required='1' /> (required)
<cms:if k_error_element_1 ><span style="color:red"><cms:show k_error_element_1 /></span></cms:if>
</p>
<p><label for='element_2'>Element 2:</label><cms:input type='text' name='element_2' /></p>
</fieldset>
</cms:if>
<cms:if k_current_step='2' >
<fieldset>
<legend>Page Two (2 of 3)</legend>
<p><label for='element_3'>Element 3:</label><cms:input type='text' name='element_3' /></p>
<p>
<label for='element_4'>Element 4:</label><cms:input type='text' name='element_4' required='1' /> (required)
<cms:if k_error_element_4 ><span style="color:red"><cms:show k_error_element_4 /></span></cms:if>
</p>
</fieldset>
</cms:if>
<cms:if k_current_step='3' >
<fieldset>
<legend>Page Three (3 of 3)</legend>
<p><label for='element_5'>Element 5:</label><cms:input type='text' name='element_5' /></p>
<p><label for='element_6'>Element 6:</label><cms:input type='text' name='element_6'/></p>
</fieldset>
</cms:if>
<p class="nav">
<cms:if k_current_step gt '1'><input type="submit" name="back" value="Previous"></cms:if>
<input type="submit" name="next" value="<cms:if k_current_step=total_pages>Finish<cms:else />Next</cms:if>">
</p>
</cms:if>
</cms:form>
And that is it.
Please try it out and see how each sub-form is validated individually. If a sub-from fails validation, the user is not allowed to move to the next sub-form. Navigating to a previously submitted sub-form will show how the submitted values are retained. Finally, all the values from each sub-from are available for use.
Do let me know if this is useful. Thanks.