The Drupal 4.7 Form API Rears Its Beautiful Head

February 8, 2006 - 5:21am

Last night, I had a rather profound "ah-ha" moments with the new Forms API and php-template. The end result is the first node_form.tpl.php file I've ever written. The screenshot below is of a story form, with all those node options that use to be on the bottom floated to the left in a sidebar fashion.

 

As drupal is now blessed with this new form API, every single form on the page, be it uploads, menus or taxonomy selections is now available to be thrown around just as is the case in node.tpl.php. Amazingly, it handles AJAX uploads, and node-type and even user variables.

But wait their's more... What if I told you, its so simple, that the necessary CSS and PHP for you to build that up there is below, ready for grabbing?

This is so simple.

I. Add the following stub to your theme's template.php file -- this calls node.module's hook_form, and returns the result of that fuction into the node_form.tpl.php file. 

 

function phptemplate_node_form($form) {   return _phptemplate_callback(node_form, array(form' => $form)); }

II. Create your node_form.tpl.php file, and drop the following code:

<div id="blockbar-right" class="blockbar"> <?php  print_r(form_render($form[taxonomy]));?> <?php print_r(form_render($form[menu]));?> <?php print_r(form_render($form[options]));?> <?php print_r(form_render($form[body_filter][format]));?> <?php print_r(form_render($form[author]));?> <?php print_r(form_render($form[user_comments]));?> <?php print_r(form_render($form[attachments]));?> </div> <div id="compose-form"> <?php print_r(form_render($form)); ?> </div> <br class="clear" />

Tip: add the following function at the top of the node_form.tpl.php file if you're curious as to what form elements you have, and the infinate ways you can play with them:

print_r(array_values($form))

III. Add this CSS to your stylesheet so that the necessary floats take effect.

#compose-form { width:66%; background-color:#ffffff; } .blockbar legend { font-size:18px; font-size:bold; background-color:#eeeeee; font-family:"trebuchet ms" } .blockbar fieldset { font-size:10px; margin:0 0 1em; padding:0; border-style:none; } #blockbar-right { float:right; width:33%; background-color:#eeeeee; position:relative; left:8px; }

Finis