Fabrizio Sabato
PHP Back-End/Front-End & Drupal Developer
Is the owner, creator and administrator of Deskema Brand and its Website. 
 
He is a PHP developer with several years of experience on web applications development.
 
He has recently changed his vision and moved to Drupal CMS to create Web Sites and Symfony for Custom Web Apps.

Codility Certified 2012

How to integrate Glyphicons in Drupal Webform

How many times did you see webform fields decorated with nice icons? 
It's a really nice way to make webforms more captivating in terms of both communication and visualization. isn't it?
In this short tutorial I'm gonna show how to decorate your webfors using Bootstrap Glyphicons set but of course you can even use your own set.  
The implementation of Bootstrap Glyphicons ( Glyphicons are normally not available for free ) with pure CSS and HTML is quite easy:

CSS

  1. /* enable absolute positioning */
  2. .inner-addon {
  3. position: relative;
  4. }
  5.  
  6. /* style icon */
  7. .inner-addon .glyphicon {
  8. position: absolute;
  9. padding: 10px;
  10. pointer-events: none;
  11. }


 HTML 

  1. <div class="inner-addon left-addon">
  2. <i class="glyphicon glyphicon-user"></i>
  3. <input placeholder="Name *" type="text" id="name" name="name" size="60" />
  4. </div>

and you get something like this:



Input field style is defined by classes of Bootstrap Slate Theme.

But what to do if you want to implement Icons in a Drupal Web Form?

If you are familiar with Dryupal hooks and Theming issues is quite easy even this procedure.
First of all check your form_id value.
I normally retrive it by the hidden field "form_id" value, printed out in the webform fieldset itself:

<input type="hidden" name="form_id" value="webform_client_form_39" />

Assuming you found it open the file:

sites/all/themes/your_theme/template.php

and write a function using the _form_alter hook like this:

  1. function your_theme_form_alter( &$form, &$form_state, $form_id ){
  2.  
  3. if($form_id == 'webform_client_form_39'){
  4.  
  5. $form['submitted']['name_of_your_field']['#prefix'] = '<div class="inner-addon left-addon"><i class="glyphicon glyphicon-user"></i>';
  6. $form['submitted']['name_of_your_field']['#suffix'] = "</div>";
  7.  
  8. }
  9.  
  10. }

The Array Item " name_of_your_field " is actually the name of the form field you are going to alter and, nomally, it's readable ( like id_form ) within the webform as well:

<input type="text" value="" name="submitted[name_of_your_field]" />

If you have multiple fields to decorate simply add Array items for each one of them:

  1. function your_theme_form_alter( &$form, &$form_state, $form_id ){
  2.  
  3. if($form_id == 'webform_client_form_39'){
  4.  
  5. $form['submitted']['your_email']['#prefix'] = '<div class="inner-addon left-addon"><i class="glyphicon glyphicon-envelope"></i>';
  6. $form['submitted']['your_email']['#suffix'] = "</div>";
  7.  
  8. $form['submitted']['your_name']['#prefix'] = '<div class="inner-addon left-addon"><i class="glyphicon glyphicon-user"></i>';
  9. $form['submitted']['your_name']['#suffix'] = "</div>";
  10.  
  11. $form['submitted']['your_phone']['#prefix'] = '<div class="inner-addon left-addon"><i class="glyphicon glyphicon-earphone"></i>';
  12. $form['submitted']['your_phone']['#suffix'] = "</div>";
  13.  
  14. $form['submitted']['your_message']['#prefix'] = '<div class="inner-addon left-addon"><i class="glyphicon glyphicon-pencil"></i>';
  15. $form['submitted']['your_message']['#suffix'] = "</div>";
  16.  
  17. }
  18.  
  19. }

The result will be a webform decorated like the one of the following printscreen:



I have used the same method for Deskema contact page.
Check it out if you want ;)