theming drupal 6.x forms

42
Theming Forms ten steps to beautiful Drupal forms emma jane hogbin [email protected] www.emmajane.net

Upload: emma-jane-hogbin

Post on 08-May-2015

23.734 views

Category:

Technology


4 download

DESCRIPTION

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.

TRANSCRIPT

Page 1: Theming Drupal 6.x Forms

Theming Formsten steps to beautiful Drupal forms

emma jane [email protected]

Page 2: Theming Drupal 6.x Forms

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.

Page 3: Theming Drupal 6.x Forms

documentation author

Page 4: Theming Drupal 6.x Forms

documentation team

Page 5: Theming Drupal 6.x Forms

Drupaldrupal.org/user/1773

Photo: morten.dkLegs: walkah

Page 6: Theming Drupal 6.x Forms
Page 7: Theming Drupal 6.x Forms

FAPI: Form Application Programming Interface

Page 8: Theming Drupal 6.x Forms

http://drupal.org/node/165104

1. Prepare2. Build3. Posted (“submit”)4. Validate5. Render6. Save

Page 9: Theming Drupal 6.x Forms

http://drupal.org/node/165104

Drupal­specific functions: drupal_

Module­specific functions that you customize: hook_

Variables that you can set: #variable_name

Page 10: Theming Drupal 6.x Forms

http://drupal.org/node/165104

Page 11: Theming Drupal 6.x Forms

http://drupal.org/node/165104

Most of your attention will be spent at the “Render” part of this flow chart

Page 12: Theming Drupal 6.x Forms

Confusing?

http://flickr.com/photos/sherwinh/1354201451/

Page 13: Theming Drupal 6.x Forms

What modules can do!=

What themes can do

Page 14: Theming Drupal 6.x Forms

Custom Forms in 10 Easy Steps

Page 15: Theming Drupal 6.x Forms

What do you need to change?

1

Page 16: Theming Drupal 6.x Forms

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

Page 17: Theming Drupal 6.x Forms

Drupal 6 is slick.Make your changes from the GUI.

2

Page 18: Theming Drupal 6.x Forms
Page 19: Theming Drupal 6.x Forms
Page 20: Theming Drupal 6.x Forms
Page 21: Theming Drupal 6.x Forms
Page 22: Theming Drupal 6.x Forms
Page 23: Theming Drupal 6.x Forms
Page 24: Theming Drupal 6.x Forms
Page 25: Theming Drupal 6.x Forms

Use helper modules and themes.

3

Page 26: Theming Drupal 6.x Forms

Vertical tabs

Page 27: Theming Drupal 6.x Forms

Node form (Garland only)

Page 28: Theming Drupal 6.x Forms

4Make changes with CSS.

Page 29: Theming Drupal 6.x Forms

Make fun, and useful changes.

Page 30: Theming Drupal 6.x Forms

Make fun, and useful changes.

Page 31: Theming Drupal 6.x Forms

5Three 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.

Page 32: Theming Drupal 6.x Forms

6“Themer Info” in Developer 

Module is your friend.

Page 33: Theming Drupal 6.x Forms
Page 34: Theming Drupal 6.x Forms

http://flickr.com/photos/7891209@N04/2951368555

Page 35: Theming Drupal 6.x Forms

http://flickr.com/photos/lecrapo/2124686412/

Page 36: Theming Drupal 6.x Forms

7Identify the unique ID for the form.

Page 37: Theming Drupal 6.x Forms
Page 38: Theming Drupal 6.x Forms

8In template.php create:

function THEMENAME_form_id ($form) {// stuff goes in here

}

Page 39: Theming Drupal 6.x Forms

Alternate(register your own form)

function THEMENAME_theme() {return array('your_specific_form_id' => array (

'arguments' => array ('form') => NULL),),

);}

Page 40: Theming Drupal 6.x Forms

9Reset (or unset) form valuesfunction 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 formreturn (drupal_render($form));

}

Page 41: Theming Drupal 6.x Forms

10API.drupal.org is also your friend.

http://api.drupal.org/api/group/themeable/6http://api.drupal.org/api/file/developer/topics/forms_api_reference.html

Page 42: Theming Drupal 6.x Forms

Thank you!Thank [email protected]@hicktech.com

Read the draft text at: Read the draft text at: http://safari.oreilly.com/9780137007752http://safari.oreilly.com/9780137007752

Book release date: Spring 2009 ishBook release date: Spring 2009 ish