cforms II User Forum

Registration is currently disabled.


Login form protected by Login LockDown.

Lost password?
Advanced Search

— Forum Scope —


— Match —


— Forum Options —


Wildcard usage:
*  matches any number of characters    %  matches exactly one character

Minimum search word length is 4 characters - maximum search word length is 84 characters

Topic RSS
Conference Registration: Multiple page form without multi-page
August 9, 2011
9:01 pm
Tim Meneely



My lots-of-hours "hobby" since August 3 has been creating a registration form for an upcoming church conference. I started out not knowing Javascript, jQuery, CSS, or cforms, and I needed all of them to get this done – so I feel as if I've come pretty far!


This is the current version of the registration form in testing:


As with many times learning new things, I circled multiple through learning cycles – I looked for a feature, couldn't find it, developed a work-around, found out that there was a better way to do things, re-wrote. Then repeated this, more or less daily.


I knew I wanted multiple pages, and started with a multi-page cform, but I couldn't get it to do what I want – namely to allow the user to switch back and forth among pages freely. My "Step 4" does a sort of audit / validation of the user's entries, and I wanted them to be in a relatively friendly environment of interaction and revision (e.g., "Did you pick enough beds for everyone?") rather than a traditional back-end validation / rejection. So I wound up creating this multi-page effect by using six fieldsets (five shown, the sixth one is a bunch of hidden fields I use to capture detailed information). I then switch the fieldsets, control buttons, and sidebar widgets on and off with Javascript / jQuery such as this:

if (step==1) { /* Contact information */
jQuery(".cf-fs2").show(); /* Fieldset for contact information, step 1*/
jQuery("#text-14").show(); /*Step 1 sidebar widget*/
} else {
jQuery(".cf-fs2").hide(); /* Fieldset for contact information, step 1 */
jQuery("#text-14").hide(); /*Step 1 widget*/


I have no idea if I'm doing this the best way or even correctly – I've got about 700 lines of Javascript which seems like a lot – but I know it works, it's pretty easy to use and my database gets the information I want.


The one place I have a strong feeling I could have done things better would be to use dynamic forms – in Step 3 (Individual information), I had to accommodate households ranging from a single person up through 12 people. I did it merely by adding fields – this form has 243 fields in it. I'm guessing dynamic would have been more efficient. But this works.


Thanks for cforms!



Forum Timezone: Europe/Berlin

Most Users Ever Online: 959

Currently Online:
27 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

tracedef: 43

mores: 21

Gyrus: 20

frozenwaste: 18

asuffredini: 15

photoworks: 14

Member Stats:

Guest Posters: 3762

Members: 1463

Moderators: 3

Admins: 2

Forum Stats:

Groups: 1

Forums: 4

Topics: 5359

Posts: 18741

Newest Members: juredujmovic, dreamkeeper, rajattyagi, wrokaa, lukass

Moderators: Paul (421), cnymike (8), sonika (95)

Administrators: Oliver (6400), Nicky (3)