Multi-page Forms

I wanted a multi-page form with a button at the end of each page to go to the next page.
Credit where it's due, I got this javascript from http://phpformgen.sourceforge.net/ and modified it slightly for my purposes.

So here is what worked for me.
In the Form Code HTML box add your form like this:

<!-- begin page one -->
<div  id="mainForm_1">  

<!-- FORM FIELDS FOR PAGE ONE HERE -->

        <!-- next page button -->
<input type=button 
onclick=" collapseElem('mainForm_1'); expandElem('mainForm_2');" 
class="mainForm" value="Next Page" />    

</div> 

<!-- begin page two -->
<div id="mainForm_2">    

<!-- PAGE TWO HERE -->

        <!-- next page button -->
<input type=button 
onclick=" collapseElem('mainForm_3'); expandElem('mainForm_3');" 
class="mainForm" value="Next Page" /> 
        <!-- previous page button -->
 <input type=button onclick="collapseElem('mainForm_2'); expandElem('mainForm_1');" value="Go Back"/>

</div>

<!-- begin page three -->
<div id="mainForm_3">

<!-- PAGE THREE HERE -->

        <!-- previous page button -->
 <input type=button onclick="collapseElem('mainForm_3'); expandElem('mainForm_2');" value="Go Back"/>


</div>

More pages can be added by creating a div for each additional page.
Each additional div should have it's own id of mainForm_4, mainForm_5, mainForm_6, etc.
Don't forget to add "Next Page" and "Previous Page" buttons to each new div, changing the element that colapsed and expanded as necessary.
Note that the first page only has a next page button and the last page only has a previous page button.

In the Form Code Javascript box add this:

         // collapse individual elements
  function collapseElem(obj)
     {
         var el = document.getElementById(obj);
         el.style.display = 'none';
     }


         // expand next element
  function expandElem(obj)
     {
         var el = document.getElementById(obj);
         el.style.display = '';
     }

        
         // collapse all elements, except the first one
   function collapseAll()
         {
   // change the following line to reflect the number of pages
             var numFormPages = 3;

             for(i=2; i <= numFormPages; i++)
             {
                 currPageId = ('mainForm_' + i);
                 collapseElem(currPageId);
             }
         }

         // run the collapseAll function on page load
window.onload = collapseAll; 

In the Javascript above, you will need to make sure that the variable for the number of form pages matches the actual number of pages that you have.
var numFormPages = 3;
Means that there are three pages to the form.

NOTE to simplify this you could eliminate the collapseAll() function from the javaScript by setting the css for the all the mainForm divs (except the first one) to display: none; However, by using javaScript to set the divs to hide visitors will be able to see the entire form even if they have javaScript disabled in their browser. Its just that the Next and Previous Page buttons wont do anything.

Post edited by: jxl, at: 2008/03/30 00:38 to reflect all changes made after the following discussion with our hero Max. Thanks Max!<br><br>Post edited by: jxl, at: 2008/03/31 20:03

you can see this script working at:
http://rmcdr.com/adoption/application

I haven't added any validation yet as this is all volunteer work and I don't have the time yet. I'll get to it when I can but I suspect it will have to be hand written in order to work on a page-by-page case.

Hi Jxl,

To have a multi page form all you need is multiple divs for all pages and on button clicks you just hide show pages code through a simple JS line!!🙂

Cheers

Max

Thanks Max. That's what I did, but I assume my JS is more complicated than need be? Can you give a sample of the JS line that would do the job more efficiently? I'm a novice at this. Thanks.

EDIT: I looked into this a bit more but so far the only way I figured out to both make it simpler AND remove the body onLoad attribute was to hard code a style=display:none into the div tags. That way I can remove the collapseAll function entirely.

The problem with this however, is that if someone does have JavaScript disabled it does not degrade gracefully. That is, the hidden sections of the form will not show and they will never get to see the submit button.
What to do? :unsure:

Post edited by: jxl, at: 2008/03/29 23:36

EDIT: The best I have been able to do so far is to add a line of javaScript to the end of what I had before.

window.onload = collapseAll;

This enables me to remove the onLoad from the body tag but does nothing to make the rest of my JS simpler. I will now make that change to the first post in this thread.<br><br>Post edited by: jxl, at: 2008/03/30 00:35

Hi Jxl,

But will your solution work fine if someone has JS disabled ? if it will not work too then the one I suggested should be much smaller, easier and efficient😉

Cheers

Max

Hi Max, thanks for taking all this time.
The solution I have now will work with JS disabled, you just get the whole form on one page (although you also see the buttons in between each section, so that may be somewhat annoying)

The only problem I have with your solution is I can't figure out how to do it.
My JS works the same way you described, except that I have three functions to do it. I just can't figure out a way to do it with only one line of JS.

The best I have been able to com up with so far is what is in my first post. I just don't understand how to do exactly as you suggested.

I have one function to hide the divs, one function to show the divs, and one function to hide all but the first div (I have 10 pages in my form) to start with.
Then the show and hide functions are called by the next/previous buttons.

You seem to be suggesting that this can be done without the functions but I just can't figure it out.

I did figure out that I can eliminate the third function which hides all but the first div on page load but ended up not doing it that way because they would stay hidden with JS disabled.

I have no clue how to eliminate the other two functions without having to essentially write the same thing for each button, making the JS more complex instead of less.

If you could post instructions or sample code for that I would be really, really grateful.

Hi Jxl,

Its actually as you say, 2 functions, one for the next buttons to show the new form and hide the old one, and one for the back buttons to do the reverse, by default all divs styles are set to display:none except the first one when the form is opened!!😉

Sincerely,

Max

Ok, I'm a bit thick. So I was more or less doing what you suggested, just making things hard for myself.

I changed the first post to reflect the final code I'm using now after this discussion.
I did leave the third function in there because I think it's worthwhile having the entire form show up without javaScript even if it's a little more code.
I also kept the hide and show functions separate instead of combining them because it stays the same no matter how many pages you have on the form. It's still just two functions but with longer forms (mine is ten pages) it's easier to set up.

Next up, a new thread with validation questions! :cheer:

Thanks for everything,
Jonathan<br><br>Post edited by: jxl, at: 2008/03/31 20:15

Jonathan Max,

Thnx!!! This is exactly what i needed!

Jonathan, is it possible to show the results on the last page before it gets submitted?

Grtz,
Raymon

Hi Raymon,

Yes but with JS, it should be very simple, but some code depending on how much fields you had!

Cheers

Max

but how you do with the session time out?, I think that after 20 minutes or more filling a 10 pages form if you take a brake for a drink and comeback you can lost your session and all your work, is there any way to auto save the currend form before submit it?

Hi wgalindo,

You can create a temporary cookie for the form with a life of a day or two, save the data in a database table or a text file and have the form check the cookie and re-load the part completed form if it recognises them.

You do need to have them submit the part-completed form though.

Bob

GreyHead you are a genius, that is a great idea!!!,

that can be a super plus for this great form addon since, long job applications, people doing long surveys etc need that badly

sadly I'm a JS newbie😟 , I will suggest your idea implemented in chronoforms for future versions,
a generic javascript file with functions to do that and handle that (autosave) together with the multi pages <div> that your recommended, it will let the users save long forms the form and recall them later (using the user name in the cookie)

thanks for your feedback😉

Hi wgalindo,

Max has talked about some kind of 'data saving' for the next version of ChronoForms. I'm not sure exactly what it will do as it's aimed at the problem of preserving form data when a wrong image validtion is entered. It might also help with this though.

Bob

By the way the code posted is a little messed up I had to use dreamweaver to re-render the Java code when I copy and pasted;

This works beautifully, but how do I get it so when the person hits next it goes to the top of the form and does not stay at the bottom?

Maybe you can also focus on some element on the top ?

I was thinking about an anchor, but I have no clue how I would implement that into the script. I'm not a programmer ><

just add some element and give it some id and then use document.getElementById('id_here').focus() when the button is clicked!

Ty, All try it out and let know what happens.

just add some element and give it some id and then use document.getElementById('id_here').focus() when the button is clicked!

 <input type=button onClick="collapseElem('mainForm_6'); expandElem('mainForm_5'); document.getElementById('topdiv').focus();" value="Go Back"/> 

I added the code you suggest and added a div with the id of topdiv, but it's not working... not sure how to make this work.

what would be the best element to use for this, perhaps div is not...

Alright i figured it out. I did this;

onClick="collapseElem('mainForm_6'); expandElem('mainForm_5'); scrollTo(0,0)"

excellent idea!🙂

Max and Grey Head--

In looking for php-based multipage forms, I found some free pho codes from FormTools ( http://www.formtools.org/demo/reg_step1.php). I like the one that has the demo payment gateway as it mirrors what I wanted to do.

Questions

1. Is it possible to integrate these codes and use them in Chronoform by copying the codes into the form code tab? I just like the layout and the tabs for navigation.
2. If so, which of these files should be placed where (javascript versus form code tabs)?
3. Some of the codes have the <form > tag included and some onsubmit validations, do I simply delete these lines?
4. Can Chronoform be used in conjunction with Form Tools for form management and if not, is Chrono able to do the same type of management where clients (or accredited users) can be assigned forms that they can manage?
5. My main attraction for the form on this link is the multi-page form with tabs (that are greyed out until one page is completed) and the ability to review data before submission. Can I duplicate this function in Chrono?

Thanks for your assistance. IN your response, please note that I am a newbie and will appreciate step-by-step advice or reference to where I can get detailed help. Forms like this seem common using non-CMS platforms and will like to use it in my Joomla design.

Hi Obisi,

I don't think you can use these forms with Chronoforms or using them is liking reinventing the wheel ? they use their own PHP code while Chronoforms uses Joomla's API, is it the design only you are looking it ? if so then its so easy to get their CSS and HTML (right click view source) and paste in Chronoforms!🙂

I only need their design and html code. I will try the tip you gave and let you know how it goes. Thx

Max--

1. Just tried to look at the page source. It has Jscripts. Should these scripts be copied into the JS tab and leave the rest of the HTML in the form code?

2. SInce this is a multi-page form, do I copy the source code of each form into the same form code or do I have to create multiple forms? If multiple forms, how does Chrono know to link them?

3. Is the thread on form tabs similar to this form in execution except for style? What I really like with this form is the ability to disable tabs that are come next until one form is completed. If I know how to ads this functionality to the example of the form tab, I could follow that example. But if it is easy to use this form tools demo example, pls advise on which parts of the code I need to borrow and where to copy them and have the same funcitonality.

Thx, the wise one.

Hi Obisi,

#1- yes
#2- you will need to use the multi div technique or the tabs one, they are here in the forums!
#3- this is hard to do, I don't know if joomla tabs has such a feature! you can get your own tabs code though.

Regards

Max

Thx for your answers. If you don't mind I want to understand answer #3 more.

1. Do you have a link or advice as to where to get the tab code that will disable inactive tabs until needed since Joomla tabs won't do it?

2. I take it that the tab example in the form tab thread won't do this either.

3. From your sneak preview of the php code or source code of the form tools example, do you see the code segment that performs the disabling and enabling of the tabs so I can borrow same?

4. FInally, I don't recall where on this forum I saw a code snippet for review form data before submission. If I have this, I suppose I can copy it into the multi-div for the review tab.

thx again.

Hi Obisi,

I looked at the form tools again and actually those are not JS tabs but just some way to show which step you are at now, on each step the form makes a normal submission!

Regards

Max

Thx for taking the time to look at the form. With your discovery, how can this functionality (showing step a user is when filling the form) be done in Chrono?

Any insights you can provide will be greatly appreciated. All I want is a multi-part form with the following attributes:

1. 5 pages of group data (personal, event, review,payment, and thank you) done in one submission.
2. Each page enabled in sequence ( no advance preview). That is a previous page must be completed before going to next page (next page disabled)
3. Page that is active /visited has a blue or some colored tab to indicate as such while disabled page is greyed out.
4. User given an option to review and edit data supplied before going forward.
5. Link to Paypal for payment of event registration.

Can I accomplish these using Chronoforms and borrowed scripts? If so, I will greatly appreciate your assistance and pointers. Thx the wise and patient one.

Hi obisi,

adding ideas here will not help you much without some code examples, its hard to add examples too because they will be too many and not tested, I'm upgrading Chronoforms at the moment to release the new version, let me see if I can add a multi page form feature to the new release, I wanted to do this at earlier but didn't have time so keep an eye on the new release, but explaining it here now without any testing is not easy really.

Regards

Max

thx and you can bet I will be the first to snatch up the new release. Muti-page form is essential to an online subscription and /or registration. God bless and strengthen you.

Any idea as to timeframe for the new release?

Hi Obisi,

Thank you, well no timeframes, I will try to have it ready ASAP, may be you can say 5 days, more or less I'm not sure.

Regards

Max

You're simply the best and an encouragement to all young and upcoming developers. Not only are you very good at your craft, you have excellent customer service and that has to be because you are a good person. How else can one explain the amount of time you're devoting to see a community of people have an application that meets users expectations and adequate support.

May God continue to bless you and yours.

I can wait that long because the product is worth more than the wait. Take care my friend.

Thanks Obisi, for your info, a new release will be out in a few hours, this is V3.0 stable, means bugs fixed and code enhanced, the new features will come in the next release which will be V3.1

Regards

MAx

Max the wise one--

Just wondering about the versions of Chronoform. Is version 3.0 and upcoming version 3.1 only for J1.5? I noticed only v2.x is available for J1.0. I am still on J1.0 bcos of some useful extensions that simply don't have a J1.5 version.

IF that is true, then it explains why I don't see the feature for drag and drop for designing the form mentioned on your homepage for Chronoforms. It would be great if some of the critical features (especially the multi-page form you're working on) are also available for J1.0 as there are still many of us using this platform of Joomla.

Thx

Hi Obisi,

It will be hard to add those features to the J1.0 version, I believe that V2.3.9 was the last J1.0 version, maybe we can find some way to add this feature only to the J1.0 version after I do it, however I advise you to try to go to J1.5 somehow!🙂

regards

Max

Hi Obisi,

Which extensions keep you with Joomla 1.0.x??

Bob

Grey head--

The following extensions are the ones keeping me. If I can find alternatives to them, that would be great.

1. mod_lcPlayer -- for live TV broadcast of free online programing. See my website at http://www.houseofpraiseva.org
2.ijoomla:News Portal

Hi obisi7,

Sorry, I don't know either of these well enough to suggest J1.5 alternatives. lCPlayer could probably be ported to 1.5, I have no idea about the News Portal.

Bob

Grey Head--

Thx for giving me some comfort especially regarding lcplayer. How could this be ported to 1.5? The developer seem to have decided not to port this to 1.5 despite its popularity at least for church websites (as I use it).


ANy ideas?

Hi obisi7,

I took closer look at lcPlayer, it's a straightforward piece of code and under GPL. I did something similar for another CMS a few years back and think this could be done in an hour or two. Let me know if you are interested.

Bob

Grey Head--

Sorry for just getting back on your offer to port mod_lcplayer to J1.5. I am very much interested in your solution. That one port will justify my moving to J1.5 as it is a signficant feature of my dev.

Also, how close is version 3.1 of Chronoforms that integrates multipage forms natively? Thx to both you and Max on this beuatiful piece of code; it is worth waiting for.

Hi obisi7,

I have a beta version working in Joomla 1.5, please drop me an email or a PM with the list of station links that you use so I can test them. If that's OK I'll give you the next beta to test.

Bob

PS Email address in my sig or through the link under my pic.

Thx Sir. I've emailed you the TV stations. Since these are public domain stations, I list them here as well.

* http://boss.streamos.com/wmedia-live/daystar/16410/100_daystar-daystar_24_7_070129.asx
* http://boss.streamos.com/wmedia-live/tbn/8031/500_tbn-tbn_050222.asx
* mms://faithvisionnetwork.com/kcm-channel
* mms://faithvisionnetwork.com/fredprice-channel
* mms://64.26.31.226/cornerstone
* http://playlist.yahoo.com/makeplaylist.dll?id=1369080&se gment=149773
* http://endavo.total-stream.net/Endavo3abn

Looking forward to your improved version of lcplayer. thx

Hi obisi7,

They all seem to work fine. My on-line sites are all down at the moment, when I get them back up I'll post a link to a trial version for you too look and and I'll package up the module for you to test-install.

Bob

GRacias!!!!! Danke!!!!!

I can't wait to test and recieve the package. You're so kind and generous. I pray that one day I will be able to learn enough PHP or whatever the coding platform to create modules for the benefit of a community like you have done.

I wish you painless restore of your website and looking forward to the link and module package. Thx much.

Hi obisi7,

Demo is now here Just cleaning up the installer package.

Later: download link now on the page

Bob

thx GreyHead!!!! I am out of the country now; will try it upon return (approx. in 2 weeks). If I can while on the road I will and let you know of the great job you've done. Merci bien pal!

Hi Max--

Just checking if the version 3.1 of Chronoforms that is capable of multi-page forms and data review before submission is any closer now to being available per your advice. I've tried to piece together the interim solutions provided on this forum to accmplish this and have bços of that capability (and yes Grey head's convertion of lcplayer to 1.5 version with thanks) now migrated to J1.5

I eagerly look forward to this version to hanlde miriad of multi-page forms I am setting up. Thx

Hi obisi,

I will try to do this ASAP, no idea when, its under development, what I'm working on now is to make the form wizard able to edit forms and new features for it too!

Cheers,

Max

Great, Just great...
There are only two things.

First. The required fields are not working. It says "this field is required" but when you click to next page it is okay. So people can send me a blank form.
Second: Raymon asked the same thing. How can we post the results of the previous page at the last page before submitting?

With kindly regards,
Raimond
Keep up the good work

Hi Raimond,

#1- check this : http://www.chronoengine.com/forums/index.php?option=com_chronoforums&cont=posts&f=4&t=8114
#2- lets wait for 3.1 because this will be the best solution, currently you can look into the forums for some suggestions, you can use joomla sessions too!

Cheers
Max

#1- check this : viewtopic.php?f=4&t=8114

Yes...that did the trick

#2- lets wait for 3.1 because this will be the best solution, currently you can look into the forums for some suggestions, you can use joomla sessions too!

I will wait and mainwhile I will try it with soomla sessions

Many thnx

Hi,
I need to create a multi page form but maybe I'm missing something...and I have tryed to look in the forum but I haven't found a good tutorial...
I'm not sure to understand if the actual version of chronoform supports a multi pages form building.
I need to build a multi step subscription system, where some of the form elements are displeyd accordingly to the input in the previous forms...
is this feature available?
Do you have any working example?

Thank you for your help.

Luca

Hi Luca,

Yes it is available - but you have to build it yourself. There are a couple of examples (maybe more) in the forums here.

Different users have built tabbed forms; set up a single form to show several pages (my preference); or set up several forms that call one another.

Bob

Not to be a pest, I am just doing a follow-up on the promised version 3.1 of CF that would handle multi-page forms without need to hack codes. I hope this needed feature is still on deck. I've found CF to be much better than most forms engine but sorely lacking in this multi-page capability. This would make it much more ahead of the pack. I know Admin promised this in Oct. 2008.

Thx and good work.

Hi Obisi,

still at my promise, it will be added in RC3 or the V3.1 stable!🙂

Regards,
Max

Hi Max--

I've been away and just downloaded the latest CF 3.1 RC5. Am I to assume that the promised features (multi-page, form edit before submission, etc) are now included in this version? If so, are these features only available if one uses the form wizard for form creation? If I am importing html code drom Dreamweaver, how do I integrate the new features?

Sorry for so many quesiotns. I am just excited and thankful that you kept your promise of releasing a v3.1 that included these features (or am I moving too fast?)

Hi obisi7,

None of the features depend on the Wizard. They all use the PlugIns that you can see on the left hand column of the Forms Manager.

We're gradually adding help to them, but meanwhile if you have any questions please search the forums (most of them have been discussed recently) then ask.

Bob

thx but i wanted to know if the said features (multipage, form edit before submieeion, etc) are now integrated into the CF 3.1. I've seen threads on how to handle multipage forms (as a hack) in the forum but that is before the new version. I am recalling Max's posts that said v3.1 will include these features.

So if v3.1 does incude the features, my next question was how do we take advantage of them in the new version. I will appreciate if u can point me to a specific thread on this . Thx sir.

Hi obisi7,

None of them are 'fully integrated' into the core code (not does Max have any plans to integrate them that I know of), they are all available using the Plugins.

Most, but not all of the Plugins now contain 'Help' tabs. If you have any other questions please come back and ask them here.

Bob

Thx Grey (Great) One. Just have another imposition for you. Which plugins and where do I download (or get) these plugins to do the following:

1. edit form i.e. review data entered before submission and possibly edit the data if needed
2. create multipage form with tabs for navigation to each page. I understand one can achieve page navigation with "next page" button but if there is a plugin out there that makes the job a lot easier, then I'll like to use it.

Thx for being a big help as usual.

Everyone, especially GreyHead and Max, pls forgive my previous post. I had not fired up the v3.1 to see the plugins b4 posting. Thx for great work guys.

Just two questions:

1. How do I take advantage of the plugins given that I am importing my form code from Dreamweaver? I want the multipage and edit form, and confirmation page capabilities.

2. Do I create a dummy form with these plugins and copy the code to my imported form code from Dreamweaver?

thx

Hi obisi7,

They are part of the standard installation - see the left hand column in the forms manager.

Bob

Thx Bob. I found the plugins hence my follow up post. I see you were replying to my initial post.
Again my new questions are:

1. How do I incorporate the plugins into a form code I am importing from Dreamweaver?

2. Do I create a dummy form first and then copy the generated code into my existing form? If so, where does the copied code go?

3. I tried incorporating a confirmation page (using the plugin) into an existing form by doing the following: selected the form and then click on confirmation plugin. I get a new window asking that I enter code into the page (listing fieldnames). I was clueless what the format of the requested code will be. Also, I checked the plugin tab and not sure what to do there either. Is there a step-by-step tut to use the plugins for an existing form?

thx

Hi Obisi7,

there is a full post about how to use the plugin posted by Bob under the Chronoforms plugins forum!

Regards
Max

Is there any configuration demo of muti-page plugins? When I enable this plugin, this form page can not be opened

Hi bgixjm,

Please see Max's post just before yours.

Bob

Tanks, I have done it.

It took a while but I managed it eventually! Thanks for the help.

It took a while but I managed it eventually! Thanks for the help.

it's been a long since the topic hasn't been revived, but i made it too. finally!