HomeThe Pagination Behavior Explained
This post is part of the wForms Documentation. wForms is an open-source javascript library that adds commonly needed behaviors to traditional web forms without the need for any programming skill.
For additional help, visit the wForms forum.
wForms allows you to easily split a long and tedious form into a multi-page
form. The next and previous page buttons are automatically added
and the form is validated page by page. If javascript is disabled, the form
degrades gracefully in one long form.
Example:
To create a page in the form builder, create a ‘fieldset’ and set its type to ‘page’, then move the appropriate fields in it.
To use the multi-page behavior on your own web forms, follow
the following steps:
- Enable the wForms extension by adding the following code to the <head> element
of your page:
<script type="text/javascript" src="wforms.js" ></script> - Add a <div> element
for each page. The element should have the ‘wfPage’ class and an id starting
with ‘wfPgIndex-’ followed by the page number.
<form>
<div class="wfPage" id="wfPgIndex-1">
... form elements (inputs, fieldset, ...)
</div>
<div class="wfPage" id="wfPgIndex-2">
... other form elements (inputs, fieldset, ...)
</div>
<input type='submit' ... />
</form> - The wFroms extension generates the ‘Next Page’ / ‘Previous Page’ buttons.
You can use the ‘wfPageButton’ class to style them. To change the label of
the buttons, see the documentation
on customization.
Any form element that is not within a ‘Page’ division is visible on
every page, except for the ’submit’ button, which is hidden until the last
page of the form is reached.
Please note: To prevent incomplete submission of a form, you need to disable the form submission with the ‘enter’ key using the following code (either in a customization.js file, or within a <script> tag *after* the link to wForms.js)
wf.preventSubmissionOnEnter = true;
Update: Comments are now closed for this post, but you can go to the wForms forum if you have any question or comment. Thanks !
June 9th, 2005 at 9:16 pm
Nice site!
July 30th, 2005 at 3:07 pm
Good. I tried and it’s working correctly.
But i don’t understand ‘wfPageButton’. How can i use it? I hope somebody explain this.
and great work. Thanks
July 31st, 2005 at 6:55 am
Mustafa, ‘wfPageButton’ allows you to change the look of the previous/next page buttons with CSS.
For instance, to make the button blue with a double border, add this to your stylesheet:
.wfPageButton {
background-color: #00F;
border: 3px double #999;
}
August 3rd, 2005 at 12:52 pm
Thanks cedsav. it’s okay now.
August 12th, 2005 at 10:27 am
Is there a way to have the multipage behaviour actually submit each page separately. In other words, submit the partially completed data on each page as the user presses “Next”, but then continue to the next div?
Or maybe that’s just 4 separate forms that get displayed in sequence?
August 12th, 2005 at 9:27 pm
Johnk, no wForms can’t submit each page individually. As you guessed it, this is a case where you want several separate forms.
August 16th, 2005 at 1:47 pm
Hi,
Finally, i understood wForms. I can create and edit dynamic forms now. Excellent product
Thanks
But, i have a new, a little (maybe unimportant) problem:
I created a big form, really big (32 checkboxes, 76 textfields,
1 textarea, 12 comboboxes,27 radiobuttons, images,explanations etc…) . I used multi-page and other behaviors
and some useful javascripts. I tried to run. Oh good, working correctly but page load is very slow, really slow. I don’t
wanna 2 or 3 pages for the form. Only one page (Multi-Page Behavior).
Probably, i need a loading script or something like this. If i create 3 pages for the form, i must write a
.
Previous-Form-Variable-Container
what can i do? Or is a ‘wForms Loading Behavior’ exist ?
This is unimportant but maybe somebody can help.
Thank you
August 16th, 2005 at 8:45 pm
Mustafa.
Do you have a live version of this form that I can see ?
There’s no ‘loading script’ that would help you here, but you can try to trim down the HTML code to the bare minimum (if you use a table-based layout, consider switching to a pure CSS layout).
August 17th, 2005 at 3:11 pm
Hi Cedsav,
Sorry. I haven’t a live ver. this form, so for. I’m still workin’ on but i’ll post a link for you .
You knew, i used table-based layout. i’ll remove them and try again.
Thank you
October 25th, 2005 at 1:08 pm
Hey ya,
I’ve got a situation where the form that I’m wanting to apply the wForms extention too is loaded via AJAX. So, when the over all page is loaded (the page that includes the .js file) the form isn’t loaded at that point.
I noticed that at the end of the .js file there’s the section headed LET’s GO which seems to kick things off. I’ve tried to call this from the end of the file that is added to the page via innerHTML (ugly, yes, but it does the job) but it doesn’t appear to execute code added like this.
How would I go about manually attaching the wForms extention to a newly added form on a page?
With the prevalance of AJAX lately it may be worth having an article on this.
Regards,
Gold
#include the_usual_praises.h
October 25th, 2005 at 8:34 pm
Gold, once the form is loaded, run this (the form must have an id attribute):
wf.addBehaviors(’your_form_id’);
October 26th, 2005 at 6:56 am
Sweet, thanks cedsav. That worked great.
October 27th, 2005 at 4:50 pm
took a bit of getting used using this, but this is great!
i am a web designer and always, always have problems with forms! this site is truly unique and effortlessly simple to use!
rdb
November 4th, 2005 at 5:09 am
I am making a mutli step form I want to be able to label the “next” button for each section eg, “add Members” , “add resources” etc. is this possible. what is involved?
thanks
trent
November 5th, 2005 at 12:20 am
Trent,
As of now, you have a custom label on the button (see http://formassembly.com/blog/wforms-customization/) but it has to be the same for all pages.
What you could do though is add a text before each button to explain what’s coming on the next page.
November 7th, 2005 at 3:45 am
thanks, that was going to be my fall back. These forms are very nice. well done.
November 7th, 2005 at 9:29 pm
Is there anyway to have the page behavior and the add a row on the same page (fieldset)?
November 9th, 2005 at 8:50 am
What would cause double next page buttons on a multiform? and then double previous next on page 2? Any Ideas?
November 9th, 2005 at 8:55 am
Please disregard, I was calling the js file twice. boy do I feel dumb. Template issue.
November 18th, 2005 at 1:38 am
Chas, yes you can have both page and repeat behaviors on the same page (as long as the repeated section is inside a ‘page’)