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, 2013 at 5:43

3 Answers 3


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 and acknowledge you have read our privacy policy.