Support from Acquia helps fund testing for Drupal Acquia logo

Comments

quicksketch’s picture

It'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.

geodaniel’s picture

Category: support » feature

That'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.

pfaocle’s picture

Version: 5.x-2.0 » 6.x-2.x-dev

If 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:

  if (array_key_exists('break1', $form['submitted'])) {
    // on page 1
  }
  elseif (array_key_exists('break2', $form['submitted'])) {
    // on page 2
  }
  ...
  else {
    // on final page
  }

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.

pfaocle’s picture

Some crummy code to display a pager type thing, placed somewhere in webform-form-[nid].tpl.php:

  // set a current page variable - can probably do this nicer
  if (array_key_exists('break1', $form['submitted'])) {
    $current_page = 1;
  }
  elseif (array_key_exists('break2', $form['submitted'])) {
    $current_page = 2;
  }
  else {
    $current_page = 3;
  }
  
  // actual pager thing
  $output .= '<div id="webform-navigation">';
  for ($i = 1; $i <= 3; $i++) {
    $curr_class = ($current_page == $i) ? ' current' : '';
    $output .= '<div class="page-button'. $curr_class .'">Stage '. $i .'</div>';
  }
  $output .= '</div>';
jack.r.abbit’s picture

depending 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.

  $_page_num = $form_state['values']['details']['page_num'];
  $_page_count = $form_state['values']['details']['page_count'];
pfaocle’s picture

Title: Multipage form - Page n of n (progress or percentage complete) » Multipage form - Page n of n - possible?
Version: 7.x-4.x-dev » 6.x-2.x-dev
Component: Code » Miscellaneous
Status: Needs review » Active

Cheers 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:

  $current_page = $form['details']['page_num']['#value'];
  $total_pages = $form['details']['page_count']['#value'];

  $output .= '<div id="webform-navigation">';
  for ($i = 1; $i <= $total_pages; $i++) {
    $curr_class = ($current_page == $i) ? ' current' : '';
    $output .= '<div class="page-button'. $curr_class .'">Stage '. $i .'</div>';
  }
  $output .= '</div>';
quicksketch’s picture

Title: Multipage form - Page n of n - possible? » Multipage form - Page n of n (progress or percentage complete)

Marking #311372: Offer percentage completed feedback as duplicate and rewording title for searchability.

quicksketch’s picture

Version: 6.x-2.x-dev »

Moving 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:

-- Multiple page progress --
[x] Show page number as number of completed (i.e. Page 1 of 10).
[ ] Show percentage completed (i.e. 10%)
[ ] Show percentage completed bar. 
[ ] Show the page break label in each page.

Number of pages:
(•) Automatic (count the number of pagebreaks in the form)
( ) Manual: [            ] pages
Specify an estimated number of pages if your form uses conditional display of pages.

Checking off all of these options would result in something like:

     Name of second page
   Page 2 of 10 (20% complete)
========------------------------

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.

Scott M. Sanders’s picture

Version: » 6.x-2.9

Subscribing.

quicksketch’s picture

Version: 6.x-2.9 » 6.x-3.x-dev

Sorry 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).

CraigBertrand’s picture

I need this too. Subscribing.

miro_dietiker’s picture

To 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.

miro_dietiker’s picture

FileSize
3.52 KB

Adding 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.

Scott M. Sanders’s picture

webform_progress looks great so far. :)

aaron1234nz’s picture

FileSize
1.46 KB

I 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.

miro_dietiker’s picture

quicksketch
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.

quicksketch’s picture

I 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.

TheDoctor’s picture

Subscribing.

jsmoorejr’s picture

This 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 :)

Scott M. Sanders’s picture

I used #13, which I think appeared on my multi-page webforms automatically, at the bottom.

jsmoorejr’s picture

I 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:

<?php 
  $output_pagenum = '<div class="page-count">Page ' . '<b>' . $form['details']['page_num']['#value'] . '</b>' . ' of ' . '<b>' . $form['details']['page_count']['#value'] . '</b></div>';
  echo $output_pagenum;
?>

Maybe not the best way to do it, nor the cleanest but it works for me right now.

shane.hairston’s picture

subscribing

aaron1234nz’s picture

FYI
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.

quicksketch’s picture

Great, looking forward to your progress aaron1234nz!

aaron1234nz’s picture

Status: Active » Needs review
FileSize
18.58 KB

Attached 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.

miro_dietiker’s picture

Very 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? :-)

aaron1234nz’s picture

FileSize
140.84 KB

The 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

miro_dietiker’s picture

Neat.
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.

aaron1234nz’s picture

FileSize
12.98 KB

Just re rolling this patch against head and giving this issue a bump.

I've also made a slight clean up to one section too.

YK85’s picture

subscribing

aaron1234nz’s picture

FileSize
13.21 KB

Rerolled against 6.x-3.x-dev

anavarre’s picture

Subscribing

yanceyworks’s picture

Will 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

mstrelan’s picture

Patch 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.

bkosborne’s picture

+1. In the middle of a tight deadline, or else I would help test the patch myself. Looks good so far tho

leahmd’s picture

subscribing

mpearrow’s picture

I 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.

celstonvml’s picture

What 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?

Simon Georges’s picture

You'll find attached a working patch on the current 7.x-3.x-dev.

berenddeboer’s picture

Version: 6.x-3.x-dev » 7.x-3.18
Component: Miscellaneous » Code
Status: Needs review » Reviewed & tested by the community
FileSize
10 KB

#39 worked fine for me. Here an update for 7.x-3.18 and an update hook so it works against an existing install.

munkyonline’s picture

The 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:

<ol class="webform-progress-trail">
<li><a href="/webform?page1">Page Title 1</a></li>
<li class="active"><a href="/webform?page2">Page Title 2</a></li>
<li><a href="/webform?page3">Page Title 3</a></li>
</ol>

Also on the progressbar percent, the percent symbol in the tpl file should probably be &#37; instead of %?

berenddeboer’s picture

munkyonline, thanks for trying the patch out, here a better version.

fkogo’s picture

Is 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?

quicksketch’s picture

Status: Reviewed & tested by the community » Needs work

These patches look pretty good, but some adjustments are necessary:

+if ($progressbar_pagebreak_label) {
+  //Show the page break label in each page
+  print '<div class="webform-progressbar-label">';
+  print $page_label;
+  print '</div>';
+}

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:

+<?php if ($progressbar_pagebreak_label): ?>
+  <div class="webform-progressbar-label">
+    <?php print $page_label; ?>
+  </div>
+<?php endif; ?>
+    if ($page_count > 1) {
+      $form['progressbar'] = array(
+        '#type' => 'markup',
+        '#markup' => theme('webform_progressbar', array('webform' => $node->webform, 'page_num' => $page_num, 'page_count' => $page_count, 'page_label' => webform_page_label($node->webform, $page_num))),
+        '#weight' => -100
+      );
+    }

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).

quicksketch’s picture

Version: 7.x-3.18 » 7.x-4.x-dev
berenddeboer’s picture

Here a straight port of the 3.0 version to 4.0; I'll take care of your comments next quicksketch.

berenddeboer’s picture

#43 fkogo, to get rid of these you need to save the webform settings just once: admin/config/content/webform.

quicksketch’s picture

Thanks berenddeboer!

berenddeboer’s picture

Status: Needs work » Needs review
FileSize
12.77 KB

quicksketch, 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.

quicksketch’s picture

Nice one! Thanks bereddeboer! The overall patch looks good. I'll review it further when I get a chance.

micnap’s picture

Thanks 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

seehat’s picture

Thanks 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

amarcus’s picture

Some of the setting names seem to be wrong. progress_bar_page_break_label should actually be progress_bar_pagebreak_label.

In webform.module:

function webform_theme() {    
   // [snip]
    'webform_progress_bar' => array(
      'variables' => array('webform' => NULL, 'progress_bar_pagebreak_label' => FALSE, 'progress_bar_percent' => FALSE, 'progress_bar_page_number' => FALSE, 'progress_bar_bar' => FALSE, 'page_number' => NULL, 'page_count' => NULL, 'page_label' => NULL),
      'template' => 'templates/webform-progress-bar',
    ),
    // [snip]
}

// [snip]

function template_preprocess_webform_progress_bar(&$vars) {
  $settings = array ('progress_bar_page_number', 'progress_bar_percent', 'progress_bar_bar', 'progress_bar_pagebreak_label');
  foreach ($settings as $key) {
    $vars[$key] = isset ($vars['webform'][$key]) ? (bool)$vars['webform'][$key] : FALSE;
  }
  $vars['percent'] = $vars['page_number'] / $vars['page_count'] * 100;
}

In webform-progress-bar.tpl.php:

<?php if ($progress_bar_pagebreak_label) { //Show the page break label in each page ?>
  <div class="webform-progress-bar-label">
  <?php print $page_label; ?>
  </div>
<?php } ?>
Shawn DeArmond’s picture

Here'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.

isramv’s picture

This was a quick and easy solution for me, i hope it helps someone.

progress-bar-webform-with-page-breaks-drupal-7

Cheers

strakkie’s picture

For 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

Seph’s picture

I 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:

PDOException: SQLSTATE[42S22]: Column not found: 1054 Unknown column 'progressbar_page_number' in 'field list': UPDATE {webform} SET confirmation=:db_update_placeholder_0, confirmation_format=:db_update_placeholder_1, redirect_url=:db_update_placeholder_2, status=:db_update_placeholder_3, block=:db_update_placeholder_4, teaser=:db_update_placeholder_5, allow_draft=:db_update_placeholder_6, auto_save=:db_update_placeholder_7, submit_notice=:db_update_placeholder_8, submit_text=:db_update_placeholder_9, submit_limit=:db_update_placeholder_10, submit_interval=:db_update_placeholder_11, total_submit_limit=:db_update_placeholder_12, total_submit_interval=:db_update_placeholder_13, progressbar_page_number=:db_update_placeholder_14, progressbar_percent=:db_update_placeholder_15, progressbar_bar=:db_update_placeholder_16, progressbar_pagebreak_label=:db_update_placeholder_17 WHERE (nid = :db_condition_placeholder_0) ; Array ( [:db_update_placeholder_0] => [:db_update_placeholder_1] => editor [:db_update_placeholder_2] => [:db_update_placeholder_3] => 1 [:db_update_placeholder_4] => 0 [:db_update_placeholder_5] => 0 [:db_update_placeholder_6] => 1 [:db_update_placeholder_7] => 1 [:db_update_placeholder_8] => 1 [:db_update_placeholder_9] => I want to be a Member! [:db_update_placeholder_10] => -1 [:db_update_placeholder_11] => -1 [:db_update_placeholder_12] => -1 [:db_update_placeholder_13] => -1 [:db_update_placeholder_14] => 0 [:db_update_placeholder_15] => 0 [:db_update_placeholder_16] => 1 [:db_update_placeholder_17] => 0 [:db_condition_placeholder_0] => 10 ) indrupal_write_record() (line 7136 of ........./includes/common.inc).

What is the best way to apply this patch to get it to work? Is there a better way to apply the patch on a production site?

ben.denham’s picture

Re-rolled patch from #42 for 7.x-3.19. Also removed commented out debugging statements.

freddybushboy’s picture

If anyone is interested, here is a quite easy way to do this that I used:

/**
 * Implements hook_form_alter().
 */
function HOOK_form_webform_client_form_alter(&$form, &$form_state, $form_id) {
  // If there are multiple pages, make a pager.
  if($form['details']['page_count']) {
    // The page count / total pages.
    $total = $form['details']['page_count']['#value'];
    $current = $form['details']['page_num']['#value'];
    // Calculate the percentage.
    $count1 = $current - 1;
    $count1 = $count1 / $total;
    $count2 = $count1 * 100;
    $percentage = number_format($count2, 0);
    // Build the progress bar.
    $progress = '<div>Page ' . $current . ' of ' . $total . ' Percentage: ' . $percentage . '%</div>';
    $progress_bar = '<div class="progress-wrapper"><span style="width:' . $percentage . '%"></span></div>';
    // Add the progress info to the webform.
    $form['submitted']['progress'] = array(
     '#type' => 'markup',
      '#markup' => '<div>Page ' . $current . ' of ' . $total . ' Percentage: ' . $percentage . '%</div>' . $progress_bar,
      '#weight' => -100
    );
  }
}

And add a bit of css:

.progress-wrapper {
  width: 100%;
  clear: both;
  background: grey;
  height: 20px;
  display: block;
}
.progress-wrapper span {
    background: red;
    height: 100%;
    display: block;
  }
}
quicksketch’s picture

Title: Multipage form - Page n of n - possible? » Multipage form - Page n of n (progress or percentage complete)
Version: 6.x-2.x-dev » 7.x-4.x-dev
Component: Miscellaneous » Code
Status: Active » Needs review
FileSize
21.42 KB
44.63 KB

Hi 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:

progress-bar.png

- 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.

quicksketch’s picture

Status: Needs review » Fixed
FileSize
21.62 KB

Just 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.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

ginho’s picture

I 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

ttjordan81’s picture