cforms II User Forum

Registration is currently disabled.
Guest

FAQs

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
Guest

Greetings,

 

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:

http://db-dg.com/test/rpic/register/registration-form/

  

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*/
jQuery("#Step1TopTitle").addClass("toptable_currentstep");
jQuery("#ButtonGoToPreviousStep0").show();
jQuery("#ButtonGoToNextStep2").show();
} else {
jQuery(".cf-fs2").hide(); /* Fieldset for contact information, step 1 */
jQuery("#text-14").hide(); /*Step 1 widget*/
jQuery("#Step1TopTitle").removeClass("toptable_currentstep");
jQuery("#ButtonGoToNextStep2").hide();
jQuery("#ButtonGoToPreviousStep0").hide();
};

 

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!

 

Tim

Forum Timezone: Europe/Berlin

Most Users Ever Online: 959

Currently Online:
24 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: 3757

Members: 1463

Moderators: 3

Admins: 2

Forum Stats:

Groups: 1

Forums: 4

Topics: 5355

Posts: 18732

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

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

Administrators: Oliver (6400), Nicky (3)