[Summary view] [Print] [Text view]

   1  Overview
   2  --------
   3  Webform supports theming similar to the CCK or Views modules. Any webform
   4  may be themed on the server side, though doing so may require a reasonable
   5  amount of knowledge about the Drupal Form API. More information about the Form
   6  API may be found at http://api.drupal.org/api/file/developer/topics/forms_api.html
   7  
   8  Theme submission e-mails
   9  -----------------------
  10  The default e-mails sent by webform are fairly basic. If you like, you may
  11  customize the display of e-mails sent by each individual webform.
  12  
  13  - Open the Webform module directory.
  14  
  15  - Copy (do not move!) the "webform-mail.tpl.php" file to your theme directory.
  16  
  17  - Open up the new file and edit it to your liking. The webform-mail.tpl.php file
  18    contains further instructions on how to get started with theming the e-mail.
  19  
  20  - If you want to edit the e-mail sent by only one particular webform, rename the
  21    file "webform-mail-[node id here].tpl.php", replacing [node id here] with the
  22    node ID of the webform.
  23  
  24  - Clear the theme cache! Visit admin/settings/performance and click the
  25    "Clear cached data" button at the bottom of the page. You may also find
  26    using devel module will speed up this process a bit. This needs to be done
  27    every time you create or rename a .tpl.php file, but isn't necessary once
  28    these files already exist.
  29  
  30  - To get a better idea of what variables are available to you, you can include
  31    the print_r function in your email. Simply include the line:
  32  
  33    <?php print_r($submission) ?>
  34  
  35    to get a listing of all the available fields you can use in your mail.
  36  
  37  - Advanced Webform e-mail Theming: Theming the e-mail headers may also be done
  38    by overriding the theme_webform_mail_headers() function from webform.module.
  39    Just copy the code out of webform.module and change as necessary in your
  40    template.php file. This allows you to customize the e-mail headers.
  41  
  42  Theme the confirmation page
  43  ---------------------------
  44  
  45  After a user submits a webform, they are directed to a page that contains the
  46  confirmation message set in the webform node settings (assuming the form doesn't
  47  direct to a complete URL). These instructions let you customize the format of
  48  the confirmation page of a single node or all webforms on your site.
  49  
  50  - Open the Webform module directory.
  51  
  52  - Copy (do not move!) the "webform-confirmation.tpl.php" file to your theme
  53    directory.
  54  
  55  - Open the new file and change it's contents to the your liking. Here's an
  56    example that inserts some additional HTML around the confirmation message and
  57    gives links to edit the submission.
  58  
  59    <?php /* Begin sample webform confirmation page */ ?>
  60  
  61    <div class="confirmation-message">
  62      <?php print $confirmation_message ?>
  63    </div>
  64  
  65    <ul>
  66      <li><a href="<?php print url('node/'. $node->nid . '/submission/'. $sid)?>">View your submission</a></li>
  67      <li><a href="<?php print url('node/'. $node->nid . '/submission/'. $sid .'/edit')?>">Edit your submission</a></li>
  68    </ul>
  69    
  70    <?php /* End sample webform confirmation page */ ?>
  71  
  72  - You may edit the webform-confirmation.tpl.php file in your theme directory,
  73    this will affect all the webform mails sent by your entire site. Or, if you
  74    want to edit the e-mail sent by only one particular webform, rename the file
  75    "webform-confirmation-[node id here].tpl.php", replacing [node id here] with
  76    the node ID of the webform.
  77  
  78  - Visit admin/settings/performance and click the "Clear cached data" button.
  79  
  80  Theme display of an entire webform
  81  ----------------------------------
  82  
  83  Theming a webform can be useful for rearranging elements or customizing the
  84  appearance of multiple components at once. This tutorial assumes usage
  85  of the phptemplate engine.
  86  
  87  - Copy the "webform-form.tpl.php" file from the webform directory to your
  88    theme directory. You may rename this file
  89    "webform-form-[node id here].tpl.php" if you want to theme one particular
  90    webform on your site. Replace [node id here] with the node ID of the webform.
  91  
  92  - Open up your new file and customize the webform however you like.
  93  
  94  - Visit admin/settings/performance and click the "Clear cached data" button.
  95  
  96  - All Webform forms have 2 main fieldsets: "submitted", and "details". Although
  97    you may move things around as you wish, keep all your components within the
  98    "submitted" fieldset. Only the "submitted" fieldset is displayed and Webform
  99    depends on the other two to operate properly, so don't mess with them unless
 100    you have good reason to do so (like you're forwarding your webform to a custom
 101    PHP or PERL script).
 102  
 103  Theme display of a webform submission display
 104  ---------------------------------------------
 105  
 106  Theming the display of a webform submission works the same way as theming a
 107  webform form. Webform uses Drupal "renderable" style arrays for the display of
 108  submissions, just like most forms in Drupal.
 109  
 110  The template file for theming submissions is webform-submission.tpl.php. You can
 111  use webform-submission-[node id here].tpl.php for individual nodes if desired.
 112  Note that the contents of this template are used not only for display of
 113  submissions in the Webform interface but also in e-mails when printing out
 114  the %email_values token.
 115  
 116  $Id: THEMING.txt,v 1.12.2.1 2010/08/30 17:01:54 quicksketch Exp $