Theming webforms, overriding template variables to append text into form´s textbox fields

I wanted to customize a webform, so that the labels were integrated into the textbox fields, and when clicked on them to input text the default text disappeared, similar to the form found at footer of the city magazine premium Drupal theme on http://themeforest.net/item/city-magazine-the-most-advanced-drupal-theme/full_screen_preview/112873.

To override a template provided by a module, you locate the template file and copy it to your theme folder. When you want to pass additional variables to the template or edit the existing ones, you define a preprocess function for the template in your theme. The main role of the preprocessor is to setup variables to be placed within the template (.tpl.php) files.

The template I needed to theme is the webform-form.tpl.php, but that would modify all webforms in the site, and I happen to have 2, one on the footer (the one I wanted to theme) and the other on the contact path. The one at the footer has a node id of 14, therefore I renamed the webform-form.tpl.php to webform-form-14.tpl.php.

The webform-form template file says it has the available variables $form (the complete form array) and $nid(the node id of the webform). To inspect the variables we can use dsm($form); (or dpr($forms); for complex nested arrays). You can see that the #value for each of the components (fields) in the form needs to be set (it makes a textbox have a predefined text printed, by default is empty), the same with #attributes to attach a class name and onblur and onfocus behavior.

Now you can open the template.php file and add the following code:

function zen_preprocess_webform_form_14 (&$vars) {

// Set a default value for text inside the contact form fields.

$vars['form']['submitted']['name']['#value'] = t('Name');

$vars['form']['submitted']['email']['#value'] = t('Email');

$vars['form']['submitted']['query']['#value'] = t('Your query');

// Add a custom class and placeholder text to the name textbox field.

$vars['form']['submitted']['name']['#attributes'] = array('class' => 'nire izena',

'onfocus' => "if (this.value == 'Name') {this.value = '';}",

'onblur' => "if (this.value == '') {this.value = 'Name';}");

// Add a custom class and placeholder text to the email textbox

$vars['form']['submitted']['email']['#attributes'] = array('class' => 'nire emaila',

'onfocus' => "if (this.value == 'Email') {this.value = '';}",

'onblur' => "if (this.value == '') {this.value = 'Email';}");

// Add a custom class and placeholder text to the query textarea

$vars['form']['submitted']['query']['#attributes'] = array('class' => 'nire eskaera',

'onfocus' => "if (this.value == 'Your query') {this.value = '';}",

'onblur' => "if (this.value == '') {this.value = 'Your query';}");

}

Hidding the labels with CSS display:none did the rest.

Advertisements

Posted on August 21, 2010, in Uncategorized. Bookmark the permalink. Leave a comment.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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

%d bloggers like this: