1

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 ]

Login Form

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

check mail

Error

Thanks :)

6
  • Hello. This question is too broad for me to answer, so here are few pointers: drupal.org/project/webform api.drupal.org/api/drupal/… drupal.org/node/1200216 – Mołot Aug 4 '14 at 8:17
  • 1
    @molot :I just want to know more about how to convert the html to Drupal Form, Other module exploration I can do later. – Hitesh Aug 4 '14 at 8:47
  • 1
    "how to convert the html to Drupal Form" - don't. Simple as this. Build form using Form API and your custom module, or using ready-made module, and then theme it to get HTML that satisfy your look & feel needs. That's how it works in Drupal. – Mołot Aug 4 '14 at 8:52
  • @Mołot :I have created Drupal form previously using custom module and Form API but all those forms were in a single page form but this form is having Login Form in top right and when I click "Login" I am doing show/hide for the form. So How do I change this to Drupal form since it not in module file but in HTML (in theme file page.tpl.php) – Hitesh Aug 4 '14 at 8:56
  • 2
    Sorry but this is indeed too broad for the Q+A format, and it can only be useful to you, not future visitors (it's very unlikely future visitors will need to reproduce your exact HTML). Instead of asking how to convert an entire HTML layout, concentrate on the specific bit you're having trouble with, whether that's "how do I wrap a FAPI element in a <div>", "how do I add an attribute to a FAPI element", and so on. When you break your question down into smaller ones, you'll also find that they've most likely been answered before, and you can get your work done more quickly – Clive Aug 4 '14 at 11:16
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.

0

Not the answer you're looking for? Browse other questions tagged or ask your own question.