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

e.g.

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  &lt;?php print render($page['content']); ?&gt; 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.
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(&amp;$form, &amp;$form_state, &amp;$form_id){
    if($form_id == 'article_node_form'){
        $form['title']['#prefix'] = '&lt;div id="group1"&gt;';
        // more fields here
        $form['body']['#suffix']  = '&lt;/div&gt;';

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

        // 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' =&gt; "&lt;div&gt;some html&lt;/div&gt;"
);