Progress bar webform with page breaks Drupal 7

FinaleIf you need something like this in your webform on Drupal 7.
Captura de pantalla 2013-03-08 a la(s) 14.56.41

this is one of the easiest ways to do it.

Open sites/all/modules/webform/templates/webform.tpl.php

//Add this ..
$output_pagenum = ‘<div>Page ‘
. ‘ActualPage”>’ . $form[‘details’][‘page_num’][‘#value’] . ‘‘ . ‘ of ‘
. ‘TotalPage”>’ . $form[‘details’][‘page_count’][‘#value’] . ‘‘;
echo $output_pagenum;
// End of custom code

// Print out the main part of the form.
// Feel free to break this up and move the pieces within the array.
print drupal_render($form[‘submitted’]);

Save it and you’ll see this..
Captura de pantalla 2013-03-08 a la(s) 15.04.27Now we are going to add some jquery to our form. the easiest way to do it is… adding a js file to our template.

In my case I’m using zen for templating my Drupal. so i have to edit my .info file.

you’ll find the template info file under sites/all/themes/MYCUSTOMTHEME/

Uncomment this line. Remove the “;” that is placed on the beginning.

scripts[] = js/script.js

If there isn’t this file on the theme folder, create one.
In order to make this work you have to create a folder named js under your MYCUSTOMTHEME folder, and then place a new file called script.js

This is the code for the js file:

(function ($, Drupal, window, document, undefined) {

$(document).ready(function() {
//Progress bar for webforms.
$actual = jQuery(‘.ActualPage’).text(); //Get the value of the actual page.
$total = jQuery(‘.TotalPage’).text(); //Get the value of the total of pages.
$percentage = ($actual/$total)*100; //Divides the actual value between all the pages.
$percentage = $percentage+’%';
$progressbar = ‘<div id=”progressbarContainer” style=”background:#c2c2c2;”><div id=”progressbar” style=”background:#a3a3a3;min-height:15px;”></div></div>’
jQuery(‘#progressbar’).css({‘width': $percentage}); //Depending on which page break youre on modifies the width of the progress bar.
// check if is a single page form or the webform has no breaks
if($actual == 1 &amp;&amp; $total == 1) {
//End of Progress Bar

})(jQuery, Drupal, this, this.document);

And this should be the result.



3 thoughts on “Progress bar webform with page breaks Drupal 7

  1. I just tried this and it ended up disabling my theme. I followed your instructions. Not sure what I did wrong. I added the custom code to the webform.tpl.php file and then created the .js file. I put the .js file in my theme’s js folder and then added the script to my theme’s .info file. Is there something I missed.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s