Adding a word counter to webform

June 11, 2009

The hardest part of implementing a word counter was finding one that looks good and works. A surprisingly difficult task. We settled on the very slick jQuery Word Counter. I like Trevor's style of explaining how he implemented an idea, what was going through his head and why he made his programmatic decisions. That knowledge is helpful for all levels of technical expertise and for any size project.

His demo lives in the cloud.

To implement a '250 word' word counter in webform:

Download the source and save it in sites/all/themes/YOUR_THEME/word-count.js.
Edit word-count.js and change this line
```
	$("[class^='count[']").each(function() {
```
to this
```
	$("[class*=' count[']").each(function() {
```
Now the CSS selector will look for a class that "contains" count instead of "starts with."
Find the node id of the webform you would like to edit. In this example, node id 907.
Copy sites/all/modules/webform/webform-form.tpl.php to sites/all/modules/YOUR_THEME/webform-form-907.tpl.php (replace 907 with your node id)
Edit webform-form-907.tpl.php and add the following line just before drupal_render($form['submitted']).
```
  $form['submitted']['letter_body']['body']['#attributes'] =
      array('class' => 'count[250]');
```
The letter_body in my example is a fieldset, with body being the textarea I want to add the counter to. See the webform configuration from a related blog post.
So we've downloaded the .js file, told webform to add class="count[250]" so that jQuery knows how to reference the textarea, now we just need to tell Drupal to include the .js file in our page. In Drupal 6 it's a piece of cake. Simple add
```
scripts[] = word-count.js
```
to your sites/all/themes/YOUR_THEME/YOUR_THEME.info file.
Now clear your Drupal cache by reloading your theme in Site Building -> Themes and verify the counter works.

Read the project page to learn more about configuring the min/max words and make the appropriate changes in the .tpl.php file.

Tags:

code
drupal

Add new comment

Change to step 5

Submitted by Billy (not verified) on November 21, 2009 - 1:34pm.

Thank you SO much for this great tutorial! There's a change in the current version of webform - ['letter_body'] in step #5 needs to be changed to ['letter'] to get it to work.

Thanks again!

thanks

Submitted by jason on November 21, 2009 - 2:21pm.

Thanks for the update Billy. Happy to hear this tip was helpful for you.

what would i have to do if i

Submitted by Jan (not verified) on June 20, 2009 - 9:57am.

what would i have to do if i wanted to use this counter in a normal node type? in my case i need it for ubercart for a textfield attribute.

should be easy

Submitted by jason on June 20, 2009 - 3:33pm.

Jan,

We haven't done much theming (if any) w/Ubercart so not sure the exact steps, but it should be easy. In the post above, steps 3,4 and 5 aren't required for you. Instead, you just need to find the textarea you want add to the class declaration.

You can add the class to any textarea by overriding the call in your template.php. In this case, it will add class="count[200]" to a textarea called "Executive Summary."

function phptemplate_textarea($element){
  if ($element['#title'] == 'Executive Summary') {
    $element['#resizable'] = false;
    $element['#attributes'] = array('class' => 'count[200]');
  } 
 
  $output = theme_textarea($element);
  //Uncomment to see the title of the element
  //$output .= print_r($element);
  return $output;
}

Good luck.