Forum for discussing general topics related to Couch.
35 posts Page 1 of 4
Hello!
I would like to ask, if it is possible to make multi-step forms with Couch? What I exactly mean is - only with HTML and CSS and Couch?
I cannot figure this out just from documentation....
And, if there is another Captcha design available?

Thanks for advance for the information....

Tanja
Hi Tanja,

You should take a look at http://www.couchcms.com/forum/viewtopic.php?f=8&t=7047 in regard to the captcha matter.

I'm not sure what you mean by a multi-step form, so we could be thinking about different things. Is something like this what you meant: http://www.surveymonkey.com/s/360-Degree-Employee-Evaluation-Template, where you only see a few fields at a time and need to click next to continue filling out the form?
Hi cheesypoof, thanks for the captcha link!

Regarding forms, yes that is exactly what I mean - form where "you only see a few fields at a time and need to click next to continue filling out the form"....

best regards

Tanja
This is one way of doing it, with JavaScript/jQuery: http://xoxco.com/projects/code/multipage/. What this does is create a 'pagination' effect, so that only a few fields are displayed at a time. It is important to note though, your form would still work fine if a user has JavaScript disabled. In that situation, all of the fields would be displayed at once.

Depending on your goals this may or may not be what you want. For example, if the purpose of the multi-page form was to send and save data to the server at the end of each page, then this would need to be done server-side by PHP/Couch instead of client-side with JavaScript/jQuery.
Thanks cheesyspof!!!!

I will check the link with jquiery it seems to be nicely explained how to do this...
The form needs just to be sent to an Mail adress, not saved on the server, so I think this will work....

But I have hoped that it would be possible to do multi-page form just with Couch, like braking the form parts in separate pages and validating input from page to page.....



best regards

Tanja
In the back of my mind I knew you would say that. :)

Possibly a solution like below could work, but you should wait for KK to hopefully let us know what he thinks on the matter. This is incomplete code, it is only meant to prove the concept that you can retain data across posts.
Code: Select all
<?php require_once( 'couch/cms.php' ); ?><cms:template title='Multi-Page Test' />
<cms:if "<cms:gpc 'page' method='get' />" ><cms:set page = "<cms:gpc 'page' method='get' />" /></cms:if>
<!DOCTYPE html>
<html>
   <body>
      <cms:form name='multi-page' anchor='0' method='post' action="?page=<cms:if page ><cms:add page '1' /><cms:else/>2</cms:if>">
            <cms:if page >
               <cms:input type='hidden' name='element_1' value=frm_element_1 />
               <cms:input type='hidden' name='element_2' value=frm_element_2 />
            <cms:else/>
               <fieldset id="page-1">
                  <legend>Page One</legend>
                  <p><label for='element_1'>Element 1:</label><cms:input type='text' name='element_1' /></p>
                  <p><label for='element_2'>Element 2:</label><cms:input type='text' name='element_2' /></p>
                  <p><input type="submit" value="Next"></p>
               </fieldset>
            </cms:if>
            <cms:if page='2' >
               <fieldset id="page-2">
                  <legend>Page Two</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' /></p>
                  <p><input type="submit" value="Next"></p>
               </fieldset>
            <cms:else/>
               <cms:input type='hidden' name='element_3' value=frm_element_3 />
               <cms:input type='hidden' name='element_4' value=frm_element_4 />
            </cms:if>
            <cms:if page='3' >
               <fieldset id="page-3">
                  <legend>Page Three</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>
                  <p><input type="submit" value="Submit"></p>
               </fieldset>
            <cms:else/>
               <cms:input type='hidden' name='element_5' value=frm_element_5 />
               <cms:input type='hidden' name='element_6' value=frm_element_6 />
            </cms:if>
            <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:form>
   </body>
</html>
<?php COUCH::invoke(); ?>
Thanks cheespoof!!!!

This is exactly what I was wishing to be possible!!!!



I'll try it out in the real life now.....

best regards


Tanja
Hi cheesypoof!

I am trying to understand your code, but I do not quiet understand what exactly happens with the following code at the begining:

Code: Select all
<cms:if "<cms:gpc 'page' method='get' />" ><cms:set page = "<cms:gpc '
page' method='get' />" /></cms:if>


The code is asking if there is any variable to get from 'page' parameter, and if there is , than happens what?

Could you please explain this to me....

thanks in advance


Tanja
Please read these links first: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-method and http://couchcms.com/docs/tags-reference/gpc.html.

What the code says is, if in the URL there is a "?page=2" or "?page=3", etc... attached to the end of it, save the number to a variable called 'page'.

So lets say I did this on a URL like:
http://www.example.com/products.php?size=medium
Code: Select all
<cms:if "<cms:gpc 'size' method='get' />" >
     <cms:set size = "<cms:gpc 'size' method='get' />" />
</cms:if>
If I were now to use <cms:show size />, it would output 'medium'.
@tanja, @cheesypoof

I am moving ahead with cheesypoof's solution to cover some missing functionality (i.e. not going to the next page if validation of current page fails, a back button to retrace steps to the previously filled pages with the data intact).

Please allow me a day or so and, hopefully, I should have something working to show.

Thanks
35 posts Page 1 of 4