Community & Support

Theme-ing Forms...How do I add markup to the image submission page?

How would I go about adding html elements to the image submission page (q=node/add/image)? I have read the Forms API docs but it seems more aimed at creating custom forms. It is not clear to me how to add markup to existing submit forms. Any help would be greatly appreciated.

Comments

The general answer is the form_alter hook

The general answer is the form_alter hook, the details would depend on exactly what you want to do.

Thanks for the quick reply

Specifically I would like to add additional divs (which will contain text and images) between the existing form fields in the image submit page.

Right now it's setup like this:

[field: title]
[field: categories]
[field: image]
[field: body]

and I need:

<div>some content</div>
[field: title]
<div>some content</div>
[field: categories]
<div>some content</div>
[field: image file]
<div>some content</div>
[field: body]

forms API reference

Hi,

First thing to do is probably to work out which fields the form is displaying, what they're called in the forms array, and what the form itself is called. Drop me a PM with an email address and I'll send you a fantastic module for this purpose that Heine generously shared with me.

Once you know this info you can check the forms API to see what your options are. Most form elements allow a #suffix and #prefix, which will achieve what you outline above.

http://api.drupal.org/api/4.7/file/developer/topics/forms_api_reference....

Post back if you're not sure what to do from there.

________
Australian Drupal Development
http://marmaladesoul.com

Wow thanks but...

I have to use the Forms API to add text to a page? This can't be done via PHPTemplate?

Theme / form_alter

This can indeed be done via hook_form_alter, but if you just want to do it in your theme, the best option would be a theme override.

To do so, find the form_id of the form you wish to theme. You can provide a theme function in template.php based on this form_id:

<?php
function phptemplate_form_id($form) {
}
?>

You can either provide a callback to a .tpl.php file or generate the form in the phptemplate_form_id function. The example uses the latter method to keep things simple.

<?php
function phptemplate_form_id($form) {
 
// Render the first field:
 
$output = form_render($form['field_one']);

 
// Add the next two fields in separate divs
 
$output .=  '<div>'. form_render($form['field_two']) .'</div>';
 
$output .=  '<div>'. form_render($form['field_three']) .'</div>';

 
// Add the next two fields in the same div
 
$output .= '<div>';
 
$output .= form_render($form['field_four']);
 
$output .= form_render($form['field_five']);
 
$output .= '</div>';

 
// Now, we need to render the rest of the N form fields (submit button, hidden fields, fields added by modules etc)
  // This works because form_render marked the previously rendered parts of the $form array as 'done' and won't render them again
 
$output .= form_render($form);
  return
$output;
}
?>

--
The Manual | Troubleshooting FAQ | Tips for posting | How to report a security issue.

Determine Form Id and Field names?

Thanks. I am confused about how to target specific forms via your function.
I have two submit forms, one for still images and one for video, but looking at source, both have an id of "node-form". Is there another form id you are referring to, and if so, how do I determine it? Sorry for the slow comprehension, but this seems way more complicated than it has to be.

Need to look a little deeper in this case

All node based content uses the same form id 'node-form' as you figured out. You will also need to look at the content type using something like

$node = $form['node'];
switch ( $node->type ) {
case 'image':  // Or whatever the image type is
  // Handle input form for images
  break;
case 'video':  // Or whatever the video type is
  // Handle input form for video
  break;
}

Content types?

OK and so how do I determine the content type? Is it the last term I see in the url? Like this:

video submit url:

?q=node/add/video

image submit url:
?q=node/add/image

??

Form-id = [type]_node_form

All node forms have a drupal_get_form form_id of [type]_node_form.

It is perfectly possible to style for example story node forms with phptemplate_story_node_form and page node submission forms with phptemplate_page_node_form.

So image_node_form and video_node_form are the form_ids you are looking for.
--
The Manual | Troubleshooting FAQ | Tips for posting | How to report a security issue.

Module Form Markup

I am using the module Form Markup to do that.
http://drupal.org/project/form_markup

nobody click here