The Drupal 4.7 Form API Rears Its Beautiful Head

02.08.2006

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

Comments

V6.x && phptemplate_callback

Thanks, (Nick & the community) for all of the great knowledge you've made public. Please forgive me if you've already answered this somewhere else... This tutorial inspired me to try b/c you made it seem so easy. I'm fairly new to drupal(I started in v6 so as not to create a legacy out of the box. With that, I don't have 4x or 5x experiences - in my bag of tricks) So, If it's a dumb question, please be gentle. I just couldnt find reference to it anywhere else.

Like many others who've commented on this approach, I want to sipmlify the interface for posting stories - and this (slice & dice) methodology seemed, well, too good to be true...

Having said all of that: there's gotta be a workaround or improved method for this same type of MOD in V6? I mean, if the new (& improved ?) API renders phptemplate_callback() obsolete then (i'm assuming) there must be another way to call the node.module's hook_form via the template engine, [like hook_form() or drupal_get_form() or somthing] and return a similar result of that (as you appropriately dubbed) 'fuction'.

I guess I'm looking for a way we can recycle your recipe by substituting that first ingredient..

The learning curve on the framework doesn't help but there must be another way to "skin" THIS cat ;-}

A point in the right direction would be appreciated.

Thanx.

Try this. Say your node

Try this. Say your node type's system name (as it appears in the 'type' column in the node table) is 'innovative_solution'. You would override it like this:

<?php

// drupal 5... too much whiskey to remember exactly how 6 is doing it...
function phptemplate_innovative_solution_node_form($form) {
$output = '<h1>Make sure this is really innovative, or else its cattle prod time...</h1>';
// as single element
$output .= drupal_render($form['title']);
// close it with a final call passing the entire form variable into the render function. This ensures that // the formapi sausage factory makes a perfect sausage.
$output .= drupal_render($form);
return
$output;

}
?>

i had a whole bunch of

i had a whole bunch of firefox windows open, then i wondered what was sucking pix off flickr every half a second, then i realized it was =this=page=, so i closed it. pity. its kinda useful...

I'm too stupid to know what to do next

I did what this page says to do. What should I expect at that point? What is different about a story, a blog entry, or a page? I have: 1) Modified my theme's template.php file to add the phptemplate_node_form function (correcting the typo by adding in the missing apostrophe as per ica's comment, above. 2) Created the node_form.tpl.php file in my theme's directory as per the above instruction. I included the line: print_r(array_values($form)) 3) Added the CSS, per the above, to the end of my style.css file located in my theme's folder I then stopped and started Apache (although not instructed to do so) and went in to a story node, a page node and a comment node. Nothing looked any different. I know at this point there are a group of you laughing your head off at me because I'm so stupid. That is ok. I ADMIT IT! Now, is there any way you can tell me what else to do to see the wonders of this new addition? I'm pretty sure I now have to add something somewhere else, I just don't know what and I don't know where!!!!!! I'm using 4.7 Thanks

OK, I figured out the next step, now I need the next next step

The next step is to open Administer=>Themes so that the system registers my changes to the theme template. Did that. Next?

Actually, you shouldn’t

Actually, you shouldn't need to do that. YOu did in 4.6 (or was it 4.5?). However, that step is from phptemplate's dark ages. You are using 4.7 correct? You might want to check out this tutorial I wrote today: http://www.nicklewis.org/node/842 It discusses the overriding node_form(), and may clue you into your lost step.

Nah, I told you I was stupid

I read your reply and I read your new description. About 20 times. No joy. I told you I was STUPID. I guess if you are going to continue to play guessing games, setting your users up for failure if they don't reach your IQ, then I might as well head off to greener pastures. I will figure it out someday. It is a shame that people such as yourself, with so much to share, come across as egomaniacs because they can't bother answer questions that are asked and instead resort to things like "may clue you into your lost step". Something tells me you won't have the guts to publish this comment.

Wow, that was really rude

Egomaniac? Where on Earth are you getting that? All I can see here is Nick taking his time to try and help and anonymous you being quite rude in return. If you take being pointed to a tutorial that may help you as setting you up for failure, then maybe you are stupid as you claim. Thanks, Nick, keep up the great work here on your site. I may not understand everything you write, but it's great having it there for when I'm advanced enough to get it. :) Michelle

whoah! excellent!

I can hardly believe how awesome this is! You just need to edit a php form and a style sheet in order to be able to make a php form with a particular style? HOLY CRAP!

Input format

How do you define Input format. In your example, I think the line with [body_filter][format] is supposed to control the Input format line, but it does not seem to work. Has it changed?

Si... trying to figure it

Si... trying to figure it out actually, it seems to want to be [upload], or [fileop]  ased on the code, but niether works :-/

You Are Actually Changing a Theme Function

Hello Nick, thank you for sharing this. I would like to point that I think you are actually overriding the theme_node_form() function in node.module, not node_form(). Please confirm if I'm right. Thanks!

Why this is a big deal

We want our site visitors to love the site, but we want our staff and volunteers to love publishing to the site even more. Otherwise, where does the content come from. Getting the "create content" view right so that it is easy for everyone to publish in a consistent manner is what will take our organization's website into a new area of collaborative research through the publishing process.

Prior to starting this project, that was the #1 thing I was looking for. I "settled" for drupal because I felt it had the capability to be really convenient for members to add content while giving our organization the ability to manage that content in a consistent manner. In spite of the lame drupal site designs that seemed endemic. Nick is also curing that problem with "curved slate." Although I want him to name it "ghasp" after us, and after the reaction people will have when they see it final.

This kind of development is a "killer app" that will enable new kinds of work to be done by people who have no idea how this stuff really works. Which basically includes me. 

A few probs with the beta...

HI Nick

 Downloaded your theme to test in my environments. I have 2 machines - 1 with XP, the other with Suse 9.3. In XP on IE6 the form alterations push the main form content down the page as each option is expanded. In Firefox on Suse, the entry fields overflow the forum div.

 

All the code from above was copy/pasted as instructed. Any ideas?

 

Cheers

Bruce 

The power for formapi

This is just great, without even changing any core code you were able to change the way a node entered into the system.

This shows the true power of formapi in that forms can be made more user friendly and you really do not need to be full on Drupal developer.

This means that just about any user ability expert with very little training could make Drupal a much better user experience. 

Typo on your code

 here
form' (') is missing

function phptemplate_node_form($form) {

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

I'm very glad that you like it.

It's been a very very long and sometimes very painful road getting it into core, but it has some incredible benefits. =)

Also, it's the first step to a lot of really cool functionality =)

Adrian -- in the

Adrian -- in the curved_slate theme's credits, I promise a sacrafice of 30 goats to you for your work with PHP-template and the forms API. I must admit that during these painful last months, I did not fully understand the benefits of the form API -- however, I had total faith that it would result in a sudden liberation of our themes, and it looks like my expectations were far exceeded. 

Now -- we just need the Civicspace modules to be on track with 4.7, and  then we will have made our flight to developer's Zion.

Holy moly.

Yeah, this is exactly the sort of thing that I think will bear fruit over the next sevreal months. The ability to 'remix' Drupal forms that way, finessing them for certain presentation contexts, is HUGE.

Awesome bit of work, there! 

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options