Theming Forms
ten steps to beautiful Drupal forms

           emma jane hogbin
          emma@hicktech.com
           www....
About this talk
●   Matt Haughey (MetaFilter) once said, “Forms are tedious, confusing, often
    poorly designed, and mos...
documentation 
author
documentation team
Drupal
drupal.org/user/1773




                       Photo: morten.dk
                       Legs: walkah
FAPI: Form Application 
Programming Interface
1. Prepare
2. Build
3. Posted (“submit”)
4. Validate
5. Render
6. Save




           http://drupal.org/node/165104
Drupal­specific functions: 
drupal_

Module­specific functions 
that you customize: hook_

Variables that you can set: 
#v...
http://drupal.org/node/165104
Most of your attention 
will be spent at the 
“Render” part of this 
flow chart




    http://drupal.org/node/165104
Confusing?




http://flickr.com/photos/sherwinh/1354201451/
What modules can do
        !=
What themes can do
Custom Forms in 10 Easy Steps
1
What do you need to change?
add new fields, form layout, order 
 of fields, hide the hard stuff, add 
 visual cues, hide the secret stuff, 
make it pr...
2
       Drupal 6 is slick.
Make your changes from the GUI.
3
Use helper modules and themes.
Vertical tabs
Node form (Garland only)
4
Make changes with CSS.
Make fun, and useful changes.
Make fun, and useful changes.
5
Three golden rules to theming forms:
1. http://api.drupal.org/api/group/themeable/6
2. Drupal stores form information in...
6
“Themer Info” in Developer 
   Module is your friend.
http://flickr.com/photos/7891209@N04/2951368555
http://flickr.com/photos/lecrapo/2124686412/
7
Identify the unique ID for the form.
8
In template.php create:

function THEMENAME_form_id ($form) {
  // stuff goes in here
}
Alternate
(register your own form)

function THEMENAME_theme() {
  return array(
    'your_specific_form_id' => array (
  ...
9
Reset (or unset) form values
function THEMENAME_form_id ($form) {
    // set your new form data/values/text/etc
    $for...
10
API.drupal.org is also your friend.

   http://api.drupal.org/api/group/themeable/6
 http://api.drupal.org/api/file/dev...
Thank you!
emma@hicktech.com
 Read the draft text at: 
  http://safari.oreilly.com/9780137007752
 Book release date: Sprin...
Theming Drupal 6.x Forms
Theming Drupal 6.x Forms
Theming Drupal 6.x Forms
Theming Drupal 6.x Forms
Theming Drupal 6.x Forms
Theming Drupal 6.x Forms
Theming Drupal 6.x Forms
Theming Drupal 6.x Forms
Theming Drupal 6.x Forms
Theming Drupal 6.x Forms
Upcoming SlideShare
Loading in...5
×

Theming Drupal 6.x Forms

23,784

Published on

Matt Haughey (MetaFilter) once said, “Forms are tedious, confusing, often poorly designed, and most people equate their use with things like paying taxes.” Forms are often overlooked by themers because the code seems complicated and the forms are good enough that the hassle of learning the code does not seem to be worth the trouble. But in Drupal 6 theming forms has gotten a WHOLE LOT EASIER!
In this session you will learn how to make your forms look the way you want. We\'ll start by looking at some great helper modules you can install to make forms a little sleeker. And then we\'ll move on to the basics of using the developer module to identify, and theme, form components. We\'ll specifically look at altering CCK forms although the techniques will apply to other Drupal forms too!
If you\'ve had tears of joy or tears of frustration from theming forms in Drupal 6, please bring your experiences to share with others.
This talk is based on content from Front End Drupal—a Drupal theming book published by Pearson Education. You can read it in draft format at http://safari.informit.com/9780137007752. The print publication should be available Spring 2009 ish.

Published in: Technology
1 Comment
12 Likes
Statistics
Notes
No Downloads
Views
Total Views
23,784
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
471
Comments
1
Likes
12
Embeds 0
No embeds

No notes for slide

Theming Drupal 6.x Forms

  1. 1. Theming Forms ten steps to beautiful Drupal forms emma jane hogbin emma@hicktech.com www.emmajane.net
  2. 2. About this talk ● Matt Haughey (MetaFilter) once said, “Forms are tedious, confusing, often poorly designed, and most people equate their use with things like paying taxes.” Forms are often overlooked by themers because the code seems complicated and the forms are good enough that the hassle of learning the code does not seem to be worth the trouble. But in Drupal 6 theming forms has gotten a WHOLE LOT EASIER! ● In this session you will learn how to make your forms look the way you want. We'll start by looking at some great helper modules you can install to make forms a little sleeker. And then we'll move on to the basics of using the developer module to identify, and theme, form components. We'll specifically look at altering CCK forms although the techniques will apply to other Drupal forms too! ● If you've had tears of joy or tears of frustration from theming forms in Drupal 6, please bring your experiences to share with others. ● This talk is based on content from Front End Drupal—a Drupal theming book published by Pearson Education. You can read it in draft format at http://safari.informit.com/9780137007752. The print publication should be available Spring 2009 ish.
  3. 3. documentation  author
  4. 4. documentation team
  5. 5. Drupal drupal.org/user/1773 Photo: morten.dk Legs: walkah
  6. 6. FAPI: Form Application  Programming Interface
  7. 7. 1. Prepare 2. Build 3. Posted (“submit”) 4. Validate 5. Render 6. Save http://drupal.org/node/165104
  8. 8. Drupal­specific functions:  drupal_ Module­specific functions  that you customize: hook_ Variables that you can set:  #variable_name http://drupal.org/node/165104
  9. 9. http://drupal.org/node/165104
  10. 10. Most of your attention  will be spent at the  “Render” part of this  flow chart http://drupal.org/node/165104
  11. 11. Confusing? http://flickr.com/photos/sherwinh/1354201451/
  12. 12. What modules can do != What themes can do
  13. 13. Custom Forms in 10 Easy Steps
  14. 14. 1 What do you need to change?
  15. 15. add new fields, form layout, order  of fields, hide the hard stuff, add  visual cues, hide the secret stuff,  make it prettier, make “required”  more obvious, rich text editing,  changing some forms, changing  all forms, changing display text,  changing button text, the height  of a textarea, multiple page forms
  16. 16. 2 Drupal 6 is slick. Make your changes from the GUI.
  17. 17. 3 Use helper modules and themes.
  18. 18. Vertical tabs
  19. 19. Node form (Garland only)
  20. 20. 4 Make changes with CSS.
  21. 21. Make fun, and useful changes.
  22. 22. Make fun, and useful changes.
  23. 23. 5 Three golden rules to theming forms: 1. http://api.drupal.org/api/group/themeable/6 2. Drupal stores form information in an array that  can be manipulated with functions in #1. 3. Register unique forms to make unique changes.
  24. 24. 6 “Themer Info” in Developer  Module is your friend.
  25. 25. http://flickr.com/photos/7891209@N04/2951368555
  26. 26. http://flickr.com/photos/lecrapo/2124686412/
  27. 27. 7 Identify the unique ID for the form.
  28. 28. 8 In template.php create: function THEMENAME_form_id ($form) { // stuff goes in here }
  29. 29. Alternate (register your own form) function THEMENAME_theme() { return array( 'your_specific_form_id' => array ( 'arguments' => array ('form') => NULL), ), ); }
  30. 30. 9 Reset (or unset) form values function THEMENAME_form_id ($form) { // set your new form data/values/text/etc $form['buttons']['submit']['#value'] = “YARR”; $form['title']['#title'] = t('New label text'); // put the values back into the Drupal form return (drupal_render($form)); }
  31. 31. 10 API.drupal.org is also your friend. http://api.drupal.org/api/group/themeable/6 http://api.drupal.org/api/file/developer/topics/forms_api_reference.html
  32. 32. Thank you! emma@hicktech.com Read the draft text at:  http://safari.oreilly.com/9780137007752 Book release date: Spring 2009 ish
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×