How to render input fields in a custom page template page
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;"
);