Forum for discussing general topics related to Couch.
35 posts Page 2 of 4
thanks cheesypoof!

I will check the links, and hope to understand the code until KK comes with the extended solution...

Thanks KK for extending this code further!!!! I am looking forward to it...


best regards

Tanja
You could always just do this with CSS and anchor links: http://jsfiddle.net/FH2Ck/. Don't know why I was so late to suggest it. :|
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.
multi_form_handler.zip
(900 Bytes) Downloaded 762 times

multi_form_handler2.zip
Please use this version with Couch 1.4 onwards!
(957 Bytes) Downloaded 710 times

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.
Dear KK!!!

Thanks a lot!!!
I am sure the code and snippet are useful!!!
Thanks also for explaining it all......
I will try it all out immediately and give you a feedback......

Many thanks!!

Tanja
I delete this as it is resolved
Just make sure the method is 'post'

What would need to change if I would like the method to be "create"? In the end I want to use a multi-step form for the registration process of new users (extended users).
@klaus, I think you mean to use this multi-step form as a DataBound Form, right?

I think a better approach would be to use the multi-step from as a normal form (the way described in this thread) and then in the last step use cms:db_persist tag to create a new extended-user cloned page (which would automatically result in creation of a user account).

Please see viewtopic.php?p=15104#p15104 for usage of cms:db_persist tag.
Thanks again!! Works wonderfully!

... I'm left with another question though: I want the page_name to differ from the page_title for users. Like "Paul" being the title, but "paul-walker" the page name.

How can I convert the value of a variable to become "title_ready"?
Glad it worked :)

How can I convert the value of a variable to become "title_ready"?

We can use an internal function of Couch to do that for us -
Code: Select all
<cms:php>
    global $FUNCS;
    echo $FUNCS->get_clean_url( 'Paul Walker' );
</cms:php>

Does it help?
Yes, thanks!!!
35 posts Page 2 of 4