How To Wrap Drupal Form API in html div structure [in my Drupal theme files (.tpl file)] [closed]

Question

I have a webpage which is being rendered from my page.tpl.php , it has a login page at top - right of page. I am kind of struggling to wrap my LOGIN HTML FORM in Drupal Form API

Below Links did not help me that much even though it gave me general idea

1. should-i-put-input-tag-inside-label-tag

2. drupal-7-forms-how-do-you-wrap-an-input-in-a-label

3. how-to-put-two-form-elements-in-a-row-using-drupal-form-api Below image shows my Login form

theme_form_element , drupal-form-api-prefix-suffix, using-prefix-and-suffix-form-api-layout and drupal-form-wrap-div-tag-custom-html-prefix-suffix gave me some idea but I am still puzzled about this things.

{ found some more helpful links for this :

1. how-to-create-multiple-forms-in-drupal-7.html

2. page-user-login.tpl.php

3. page-template-for-custom-form

4. Printing a form on a page with drupal_get_form }

Can some one guide me for this.

I am not sure if I should go with Drupal form or just use the normal HTML Login in PHP way.

For Better Understanding of the scenario I am adding screen shots and details of my task below, it is purely just for example, all I am looking for is some guidance for the task I am doing, answer does not have to be exactly FORM API of my HTML but I need to know how to achieve this in page.tpl.php.

[Do I have to create new custom module or I can manage this in my page.tpl.php- sorry if it is very simple question, I am little new here in drupal ]

Here is the HTML

<div class="accessBlock">
            <button class="primary_btn">Download Guidelines</button>
            <button id="loginPopup" class="primary_btn">Login</button>
</div>

<div class="loginBox" style="overflow: hidden; display: block;">
            <div class="loginHolder">
                <div class="nameHolder"><p class="sub-title-1">Email address</p></div>
                <div class="inputHolder"><input type="text" placeholder="Enter your email address"></div>
                <div class="nameHolder"><p class="sub-title-1">Password</p></div>
                <div class="inputHolder"><input type="password" placeholder="Enter your password"></div>
                <div class="nameHolder"><p class="sub-title-1">Not registered?</p></div>
                <div class="inputHolder"><input type="checkbox" vlaue="ss"><span class="registerNote">Tick this box and click 'Register'</span></div>
                <div class="buttonHolder">
                    <button class="primary_btn">Login</button>
                    <button class="primary_btn">Register</button>
                    <button class="primary_btn">Cancel</button>
                </div>
            </div>
        </div>

I need to create a Login and Registration Module. I have this whole form in basic html not in form, I am struggling to convert this to Drupal From

Also I am not sure if I should go for Drupal Form or not. Since my requirement is to show the error message in the same place <div> . see below

Thanks :)

Answer 1

It will be hard to implement this html as it is. You have to create a custom form using form api of drupal and use its arguments to make the html nearly same like your design. But still there will be css changes respectively. Let me edit Email field for you

    function mycustomform($form, &$form_state){
    $form['email'] = array(
      '#type' => 'textfield',
      '#title' => t('Email address'),
      '#size' => 60,
      '#maxlength' => 128,
      '#required' => TRUE,
      '#prefix'=>'<div class="inputHolder"><p class="sub-title-1">',
      '#suffix'=>'</p></div>',
      '#attributes'=>array('placeholder'=>'Enter your email address')
    );

    $form['password'] = array(
      '#type' => 'password',
      '#title' => t('Password'),
      '#size' => 60,
      '#maxlength' => 128,
      '#required' => TRUE,
      '#prefix'=>'<div class="inputHolder"><p class="sub-title-1">',
      '#suffix'=>'</p></div>',
      '#attributes'=>array('placeholder'=>'Enter your password') // No use because it will show dots or *
    );
    $form['login'] = array(
      '#type' => 'submit',
      '#value' => t('Login'),

      '#prefix'=>'<div class="buttonHolder">',
      '#suffix'=>'',
      '#submit'=>'custom_user_login',  
      '#attributes'=>array('class'=>array('primary_btn')) // No use because it will show dots or *
    );
    $form['register'] = array(
      '#type' => 'submit',
      '#value' => t('Register'),
      '#submit'=>'custom_user_register',
      '#prefix'=>'',
      '#suffix'=>'</div>',
      '#attributes'=>array('class'=>array('primary_btn')) // No use because it will show dots or *
    );
return $form;
}

function mycustomform_validate($form, &$form_state){
    //Add checks for already registered user
}

function custom_user_login($form, &$form_state){

      if($uid = user_authenticate($username=$form_state['values']['email'], $password=$form_state['values']['password']))
    {
      user_login_submit(array(), array('uid' => $uid));
      return true;
    }
    else
    {
        return false;
    }
}

function custom_user_register($form, &$form_state){
    $new_user = array(
  'name' => $form_state['values']['email'],
  'pass' => $form_state['values']['password'], // note: do not md5 the password
  'mail' => $form_state['values']['email'],
  'status' => 1,
  'init' => $form_state['values']['email'],

);

// The first parameter is sent blank so a new user is created.
$user = user_save('', $new_user);
if($user->uid){
drupal_set_message('User saved successfully');
}else{
    drupal_set_message('Error in saving user','error');
}
}

Hope it will help you.