Running into a development wall here. How does one render form/fields in a custom page?


I've created a custom page called page--node--add--article.tpl.php (a custom page to style the editing of the article content type) though I cant render any individual input/forms as part of my overall site design.

All I can do is do <?php print render($page['content']); ?> which loads the entire content and does not allow me to style between the different fields.

Objective: Split the article creation into two DIVs for a mobile theme that gives me a part one and then via jQuery fade (or slide) to the part 2.

  • I think you should use hook_form_alter for changing in form design. Jan 15 '13 at 5:43

You can customize your form using #prefix and #suffix in hook_form_alter(). They will add wrapper HTML markup into your form and then you can customize them with your custom CSS and JS attached to the form.

Here is an example code:

function MYMODULE_form_alter(&$form, &$form_state, &$form_id){
    if($form_id == 'article_node_form'){
        $form['title']['#prefix'] = '<div id="group1">';
        // more fields here
        $form['body']['#suffix']  = '</div>';

        $form['field_1']['#prefix'] = '<div id="group2">';
        // more fields here
        $form['field_5']['#suffix'] = '</div>';

        // attach additional css/js to this form page for your customization
        $form['#attached']['css'][] = drupal_get_path('module', 'mymodule'). '/mymodule.css';
        $form['#attached']['js'][] = drupal_get_path('module', 'mymodule'). '/mymodule.js';     

You can also add additional HTML using #markup.

$form["unique_id"] = array(
    '#markup' => "<div>some html</div>"

page--node--add--article.tpl.php is for a page level template.

The template just the form, you'd be better to look into a form level template.

If you're just wanting to split the form into two divs, checkout the module:


Available group types:

  • Fieldsets
  • Horizontal tabs
  • Vertical tabs
  • Accordions
  • Divs
  • Multipage steps: (client side)

Other than fields, if you want to arrange your nodes, views, comments, user data etc.. you can go for Display Suite.

Advanced options

  • Exportables
  • Add your own custom fields in the backend or in your code
  • Add custom layouts in your theme (D7 only)
  • Change labels, add styles or override field settings (semantic fields).
  • Full integration with Views and Panels
  • Extend the power of your layouts by installing Field Group
  • Optimal performance with Object cache (D6) or Entity cache (D7) integration

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy