Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 PST on 31 March 2024, to get $100 off your ticket.
Hi
I have been requested to display "Page 1 of 5" type information on each page of my multipage webform. Googling came up with nothing, is this possible within Webform 5.x-2.0?
Comment | File | Size | Author |
---|---|---|---|
#61 | webform_progress_bar-258696.patch | 21.62 KB | quicksketch |
#60 | progress-bar.png | 44.63 KB | quicksketch |
#60 | webform_progress_bar-258696.patch | 21.42 KB | quicksketch |
#58 | webform-progressbar-258696-58.patch | 11.26 KB | ben.denham |
#54 | webform-progress-bar-258696-54.patch | 12.9 KB | Shawn DeArmond |
Comments
Comment #1
quicksketchIt's not entirely easy with the current version of Webform. Though you could easily create a "markup" field before each page break that simply contains "Page 1 of 5", "Page 2 of 5", etc.
Comment #2
geodaniel CreditAttribution: geodaniel commentedThat's a good work around, but it'd be nice if a basic version of this could be included in the theming of forms by default.
Comment #3
pfaocleIf you have, for example, pagebreaks on each page with IDs "break1", "break2", etc you can derive the page number from the existence of each element:
in webform-form-[nid].tpl.php, using Webform for D6. I'm just playing with this now, but it seems to do the trick so far.
Comment #4
pfaocleSome crummy code to display a pager type thing, placed somewhere in webform-form-[nid].tpl.php:
Comment #5
jack.r.abbit CreditAttribution: jack.r.abbit commenteddepending on where you are putting this, why not just access the "page_num" and "page_count" values? Then you don't need to care what your page breaks are called or how many you have.
Comment #6
pfaocleCheers for that - those variables are accessible in webform-form-[nid].tpl.php although in a slightly different part of the $form array available to the template:
Comment #7
quicksketchMarking #311372: Offer percentage completed feedback as duplicate and rewording title for searchability.
Comment #8
quicksketchMoving this to 3.x. I'd like to see this as an included configuration option in Webform. It'd be interesting to see how we could integrate the names of the pagebreaks into the progress. Perhaps some options like the following:
Checking off all of these options would result in something like:
I think this might be particularly useful when dealing with conditional pages, since you wouldn't want to show a page number if you're skipping pages. However percentage complete as a bar could still be very useful even when pages are skipped.
Comment #9
Scott M. Sanders CreditAttribution: Scott M. Sanders commentedSubscribing.
Comment #10
quicksketchSorry when I branched 3.x we seemed to have lost our 3.x indicators on all issues. This feature won't be added to 2.x, which is now maintenance only (and it won't even be that for much longer).
Comment #11
CraigBertrand CreditAttribution: CraigBertrand commentedI need this too. Subscribing.
Comment #12
miro_dietikerTo implement this feature currently we need the patch:
#817204: Paging Information missing from $form
We'll provide our sample progress implementation here soon.
EDIT: if progress bar is a real form element, the patch wouldn't have been needed.
Comment #13
miro_dietikerAdding our progress bar module that only focusses on simple page progress without any option.
(There's some percentage / step commented-out switch..)
I'm looking forward to see something like this in webform soon!
If it takes too long due to the whole amount of work to make it perfect we might better build a separate project.
Comment #14
Scott M. Sanders CreditAttribution: Scott M. Sanders commentedwebform_progress looks great so far. :)
Comment #15
aaron1234nz CreditAttribution: aaron1234nz commentedI also wrote a module almost identical to miro_dietiker at pretty much the same time (comment #13 was not there when I started writing). It's attached FYI.
Miro, if you want to make this a seperate project, I'm happy to comaintin.
Comment #16
miro_dietikerquicksketch
It seems to me the implementation of a progressbar to support all features you listed will take a long time to be available.
Are you currently or soon working on this?
If not we might better start forking this as a separate module and bring it back once it is some more fully fledged.
Meanwhile we have a limited but working solution.
What do you think?
aaron1234nz, happy to see you co-maintaining.
I think our integration is cleaner. Is there a key difference in output? (Do we need different progressbar styles? Note that you can override our progress bar theming.)
I'd suggest to start using our module and improve it. (Do we miss something that is available in your code?)
As a starting point we need some basic configurability.
Comment #17
quicksketchI think the "webform_progress" module implementation is a bit cleaner between the two of these, though they both work very similarly. Unfortunately I don't think either implementation is "polished" enough to be included directly in Webform, since they don't integrate with pagebreaks or conditional logic in any way. However they'd work with simple multipage forms alright.
I've described how I would like the progress bar to work in #8, additionally it would be preferable to provide a webform-progress.tpl.php file instead of using a theme function for easy overriding (we should also support dynamic template naming, just like we do for webform form and e-mail templates). I don't think we need multiple progress bar styles, since sites will typically use the exact same style across the entire site and it can be changed at the theme layer.
I'd really like to see this just added directly to Webform itself. If you guys keep making progress in a separate module however, that's certainly going to be better than not having anything at all. This has just been a widely requested and logical feature when building multipage forms and I'd like to include it eventually in Webform.
Comment #18
TheDoctor CreditAttribution: TheDoctor commentedSubscribing.
Comment #19
jsmoorejr CreditAttribution: jsmoorejr commentedThis is exactly what I am trying to do. I have downloaded the "webform_progress.zip" and enabled it in my project, but how do you get it to actually display? I also tried using the code in #6 but it also doesn't seem to display. I created my own webform-form.tpl.php file and named it webform-form-26.tpl.php. I wanted the form to appear in a table layout. I have 4 pagebreaks in my form and all of that displays fine. I am just uncertain as to where I would past the code in #6 to make it work or how to use the code in #13. Can anyone enlighten me on the usage? Thanks :)
Comment #20
Scott M. Sanders CreditAttribution: Scott M. Sanders commentedI used #13, which I think appeared on my multi-page webforms automatically, at the bottom.
Comment #21
jsmoorejr CreditAttribution: jsmoorejr commentedI figured out a solution, probably not the best solution but it seems to work. i never could get #13 to work at all for me, it just never showed up anywhere. Essentially, I just used part of the solution in #6 to come up with the answer. Here is what I did:
Maybe not the best way to do it, nor the cleanest but it works for me right now.
Comment #22
shane.hairston CreditAttribution: shane.hairston commentedsubscribing
Comment #23
aaron1234nz CreditAttribution: aaron1234nz commentedFYI
I'm currently working on a patch to add this functionality into Webforms 3x core. as outlined in #8. I'm not sure however how useful it is to manually enter the number of pages in the form. Surely the page counter would just skip some numbers for the pages which are not displayed. And the total number of pages would be the total number of pages in the form.
Comment #24
quicksketchGreat, looking forward to your progress aaron1234nz!
Comment #25
aaron1234nz CreditAttribution: aaron1234nz commentedAttached is the first cut of the progress bar functionality. I've put a bit of work into it so it should be pretty good.
Attached is the patch which adds the necessary parts to the webform module. I've added a number of database fields to store the necessary settings for each webform. I hope this is the best approach (as opposed to storing a serialized array)
Let me know what you think/what needs work.
Comment #26
miro_dietikerVery nice to see here progress.
I hope we're not cluttering the UI too much using this all-configurable approach... Is there something like a default setting (e.g. per content type?) and optionally the need of a permission to override this settings? ;-)
I have no opinion on how exactly a simplified UI could show. However just adding any possible settings to the node form (of certain content type) is no option. It makes simple things sometimes way too complicated.
Any further inputs from quicksketch or aaron1234nz? :-)
Comment #27
aaron1234nz CreditAttribution: aaron1234nz commentedThe way my patch works, is that there is a fieldset at setting at admin/configure/webform where defaults for new webforms can be set. The defaults can then be overridden on the webform node edit screen.
In terms of theming, there is a tpl.php file which can be overridden in the theme layer for any additional tweaks.
This is the way the rest of webform works so it makes scene to follow the same pattern.
attached is a screenshot which appears on the webform node settings page
Comment #28
miro_dietikerNeat.
These additional settings make me a little struggle about the settings presentation.
The split between node edit page and components (on separate tab) is by far not natural. I started to think about why displaying webform presentation settings on the node edit page -- and why there's no separate "advanced node presentation settings" tab? If we add more and more options the node edit forms loose quality in order and overview (for regular unprivileged users).
Webform should not become too complex for regular users. (Or we need ways to reduce complexity e.g. via permissions)
However:
Quicksketch, what's needed to fulfill your initial requirements to add this feature? Same as aaron, i'm not sure if adding pagecount estimations is as straightforward as we would like to the enduser...
How about screenreaders and the markup in case of css drop? Is there some current neat text representation with it?
I think this is pretty important - also for SEO reasons.
Comment #29
aaron1234nz CreditAttribution: aaron1234nz commentedJust re rolling this patch against head and giving this issue a bump.
I've also made a slight clean up to one section too.
Comment #30
YK85 CreditAttribution: YK85 commentedsubscribing
Comment #31
aaron1234nz CreditAttribution: aaron1234nz commentedRerolled against 6.x-3.x-dev
Comment #32
anavarreSubscribing
Comment #33
yanceyworks CreditAttribution: yanceyworks commentedWill this patch work in 7.x-3.x-dev?
I hear there is a progress bar capability in 7 that can be tapped for this use, but haven't seen it implemented yet.
Rich
Comment #34
mstrelan CreditAttribution: mstrelan commentedPatch in #31 didn't apply to latest dev. Here's one that does with no code changes to #31.
My review:
Works great, could use some work on the styling. Would be great to be able to choose via the interface whether to show it above the form, below the form or both. I think we should get this in and it can be improved further later.
Comment #35
bkosborne+1. In the middle of a tight deadline, or else I would help test the patch myself. Looks good so far tho
Comment #36
leahmd CreditAttribution: leahmd commentedsubscribing
Comment #37
mpearrow CreditAttribution: mpearrow commentedI haven't managed to get the patch to apply yet - but this is probably because I'm patching against a patched version of webform ( http://drupal.org/files/issues/add_alter_hooks_for_components_extension-... ) to enable multicolumn elements.
I currently have webform-6.x-3.14 - I'm not sure how to re-roll a patch or I'd do it and test against an otherwise unpatched version of it. Progress bar is a fantastic idea and I'd love to see this patch and the multicolumn patch make it into the module.
Comment #38
celstonvml CreditAttribution: celstonvml commentedWhat is the current state of the provided patches and/or the described functionality? More specifically, what is the status with regards to the 7.x-3.x version of the module? I've attempted to scour both Google and the modules index on Drupal.org to find an implementation of this functionality. I can't be the only only looking for this. Is still the best practice to handle this through theme code?
Comment #39
Simon Georges CreditAttribution: Simon Georges commentedYou'll find attached a working patch on the current 7.x-3.x-dev.
Comment #40
berenddeboer CreditAttribution: berenddeboer commented#39 worked fine for me. Here an update for 7.x-3.18 and an update hook so it works against an existing install.
Comment #41
munkyonline CreditAttribution: munkyonline commentedThe patch in #40 applies without errors to 7.x-3.18 after running update.php but appears to be missing the webform-progressbar.tpl.php so I get an include error when viewing the webform. I created the missing template file from the patch in #39 and it all seems to be working now.
The current $page_label is only displayed for page 2 and after as you don't include a pagebreak for the first page, so it's inconsistent visually. You can quite easily just add a label for each of the pages using the markup component so i'm not sure what use $page_label has in its current state?
Wouldn't a progress bar that includes labels be better as a page 'breadcrumb trail', similar to what you would see on a shopping cart checkout? Each page of the checkout process is normally labelled with the active page being highlighted and the other pages greyed out. At the moment $page_label only shows the current page, it would be nice to have all of the pages in a list. Even better would be to have them linked too so a user can jump back to an earlier page without having to click the previous button multiple times. Not sure how feasible that is?
Something like:
Also on the progressbar percent, the percent symbol in the tpl file should probably be
%
instead of %?Comment #42
berenddeboer CreditAttribution: berenddeboer commentedmunkyonline, thanks for trying the patch out, here a better version.
Comment #43
fkogo CreditAttribution: fkogo commentedIs anyone else getting these errors when they try these patches
Notice: Undefined index: progressbar_percent in webform_configure_form() (line 250 of .............../modules/webform/includes/webform.pages.inc).
On these patches for version D7?
Comment #44
quicksketchThese patches look pretty good, but some adjustments are necessary:
Code like this is not common in tpl.php files. You shouldn't be needing to use "print" in front of HTML content, it should look like this:
I like this being part of the form (it make integration with Form Builder easier in the future), however it being a #type = 'markup' makes it difficult to manipulate both by Form Builder and hook_form_alter(). It would be preferable in my mind to make this into a #type = 'webform_progress_bar' or something similar, and then pass in all the properties individually. This would also eliminate the current preprocess function.
Finally, the code needs to be updated to 4.x, no new features are going into 3.x at this point (which would mean we'd have to backport these changes to D6).
Comment #45
quicksketchComment #46
berenddeboer CreditAttribution: berenddeboer commentedHere a straight port of the 3.0 version to 4.0; I'll take care of your comments next quicksketch.
Comment #47
berenddeboer CreditAttribution: berenddeboer commented#43 fkogo, to get rid of these you need to save the webform settings just once: admin/config/content/webform.
Comment #48
quicksketchThanks berenddeboer!
Comment #49
berenddeboer CreditAttribution: berenddeboer commentedquicksketch, here the patch in the form you requested. One thing I didn't get, that is how to get rid of the preprocess function, I think it's useful, so left this in there.
Comment #50
quicksketchNice one! Thanks bereddeboer! The overall patch looks good. I'll review it further when I get a chance.
Comment #51
micnap CreditAttribution: micnap commentedThanks for this awesome additional functionality!
I've applied the patch in #49 and ran update.php. On an existing form, I checked all 4 options available in the Progress bar fieldset. Only the SHOW PAGE NUMBER AS NUMBER OF COMPLETED (I.E. PAGE 1 OF 10) and SHOW PERCENTAGE COMPLETED BAR are visible for me. I can't get the other two to show. I also tried different combinations for the 4 options and no go. I didn't get any errors and there were no errors logged in reports.
I'm on d7.15 with Webform 7.x-4.0-alpha4
Hope this helps.
Thanks,
Mickey
Comment #52
seehat CreditAttribution: seehat commentedThanks for the patch in #49!
The exact same thing as in #51 happens on d7.15 and Webform 7.x-4.0-alpha6.
I also just get SHOW PAGE NUMBER AS NUMBER OF COMPLETED (I.E. PAGE 1 OF 10) and SHOW PERCENTAGE COMPLETED BAR.
Thanks,
Christian
Comment #53
amarcus CreditAttribution: amarcus commentedSome of the setting names seem to be wrong. progress_bar_page_break_label should actually be progress_bar_pagebreak_label.
In webform.module:
In webform-progress-bar.tpl.php:
Comment #54
Shawn DeArmond CreditAttribution: Shawn DeArmond commentedHere's a re-rolled patch from the 7.x-4.x branch. It includes @amarcus's edits. It also fixes a bug where the percentage isn't appearing on the progress bar.
Comment #55
isramv CreditAttribution: isramv commentedThis was a quick and easy solution for me, i hope it helps someone.
progress-bar-webform-with-page-breaks-drupal-7
Cheers
Comment #56
strakkie CreditAttribution: strakkie commentedFor those of you who don't know how to use patches or just prefer the easy method, i just released a module for showing a webform multipage pager.
Have a look at the webform_pager module
Comment #57
Seph CreditAttribution: Seph commentedI tried applying the patch in #42 to an installed version 7.x-3.18 of webform on my local dev site. I tried to run update, both through drush and directly through my website, but it said there were no updates to run. I keep getting the following error message:
Comment #58
ben.denham CreditAttribution: ben.denham commentedRe-rolled patch from #42 for 7.x-3.19. Also removed commented out debugging statements.
Comment #59
freddybushboy CreditAttribution: freddybushboy commentedIf anyone is interested, here is a quite easy way to do this that I used:
And add a bit of css:
Comment #60
quicksketchHi guys, I finally got through all the bugs in the queue to get to this feature. It's been a long time coming I know.
Special thanks to @berenddeboer and @ShawnDeArmond for the 4.x rerolls.
I tested out the latest patches and they work pretty well. There are few issues that caused trouble for me though:
- The percentage complete would show 100% when the user hasn't finished filling out the form yet (say on page 3 of 3). I'd be worried this would cause users to think they're done. I added a new option for "Include confirmation page in progress bar" so that the confirmation page counts as a page. This means page 3 of 4 would be the last page of the form, and page 4 of 4 would be the confirmation page. I also added the progress bar to the confirmation page if this is enabled (of course) and if you're not using a confirmation page, you can disable this option.
- The styling on the progress bar is lacking, although I understand minimalist theming, some good generic theming would go a long ways here. For additional flexibility, I extended the default theming to include markers for each current page. The default theming now looks like this:
- Removed the 3.x update, only Webform 4.x is getting new features at this point.
- Code style fixing.
Overall though the patch is great! I wish I would have gotten to this sooner. I'm going to give this another review and then commit the result if no other problems are found. Note that if you've applied one of the above patches on a production site, you'll probably have caused some problems for yourself because the update numbers and column names have changed in this patch. patch-to-patch upgrade paths are not supported in Webform (or any module really), so you're on your own if you need to rollback previous changes before upgrading to this version.
Comment #61
quicksketchJust a few more minor fixes to prevent notices on upgraded installs. Everything works well.
I do think the problem of conditional pages will still need to be solved at some point, but for not I think most users will appreciate the new progress bars. Note that for users upgrading, existing forms will *not* have progress bars. They'll need to be turned on manually for existing content. New forms have progress bars on by default, but that setting may be overridden in the site-wide webform settings.
Committed to 7.x-4.x branch. This will be in next alpha (10) release.
Comment #63
ginho CreditAttribution: ginho commentedI am working on a multistep form. How can you have a breadcrumbs of all pages with hyperlinks to each page. I would be good if the user can skip to from page 1 to page 7. Please let me know. Ginho
Comment #64
ttjordan81 CreditAttribution: ttjordan81 commented@ginho Check this out https://drupal.org/project/webform_steps.