it-swarm-id.com

Bagaimana cara menggunakan file templat untuk tema formulir?

Sementara node, komentar, blok, dan banyak hal lainnya di Drupal bertema menggunakan file templat tema (seperti node.tpl.php), formulir adalah cerita yang berbeda. Tidak ada file templat tema untuk formulir Bagaimana saya bisa mendapatkan formulir tertentu untuk menggunakan templat tema khusus?

49
Chaulky

Sangat masuk akal jika ingin menggunakan file tpl untuk menampilkan formulir. Anda dapat menggunakan banyak CSS asing dan #prefix/#suffix properti untuk mencapai hasil yang serupa, tetapi dengan menggunakan tpl Anda tidak perlu mengacaukan pemisahan logika dan lapisan presentasi Anda dan tidak harus menargetkan penyeleksi CSS jelek seperti #user-login label. Berikut ini contoh dalam Drupal 7 ...

mytheme/template.php:

function mytheme_theme($existing, $type, $theme, $path) {
    // Ex 1: the "story" node edit form.
    $items['story_node_form'] = array(
        'render element' => 'form',
        'template' => 'node-edit--story',
        'path' => drupal_get_path('theme', 'mytheme') . '/template/form',
    );

    // Ex 2: a custom form that comes from a custom module's "custom_donate_form()" function.
    $items['custom_donate_form'] = array(
        'render element' => 'form',
        'template' => 'donate',
        'path' => drupal_get_path('theme', 'mytheme') . '/template/form',
    );

    return $items;
}

custom_donate_form ():

function custom_donate_form($form, &$form_state) {
    $form['first_name'] = array(
        '#type' => 'textfield',
        '#attributes' => array('placeholder' => t('First name')),
    );
    $form['last_name'] = array(
        '#type' => 'textfield',
        '#attributes' => array('placeholder' => t('Last name')),
    );
    $form['address'] = array(
        '#type' => 'textfield',
        '#attributes' => array('placeholder' => t('Address')),
    );
    $form['city'] = array(
        '#type' => 'textfield',
        '#attributes' => array('placeholder' => t('City')),
    );
    $form['state'] = array(
        '#type' => 'select',
        '#options' => array(
            'default' => 'State',
            '...' => '...',
        ),
    );
    $form['Zip'] = array(
        '#type' => 'textfield',
        '#attributes' => array('placeholder' => t('Zip')),
    );
    $form['email'] = array(
        '#type' => 'textfield',
        '#attributes' => array('placeholder' => t('Email')),
    );
    $form['phone'] = array(
        '#type' => 'textfield',
        '#attributes' => array('placeholder' => t('Phone')),
    );
    $form['submit'] = array(
        '#type' => 'submit',
        '#value' => 'Submit',
    );

    return $form;
}

mytheme/template/form/donate.tpl.php:

<div class="row">
    <div class="small-12 medium-12 large-8 columns">

        <div class="row">
            <div class="small-12 columns">
                <h5>Contact Information</h5>
            </div>
        </div>

        <div class="row">
            <div class="small-12 large-6 medium-6 columns">
                <?php print render($form['first_name']); ?>
            </div>
            <div class="small-12 large-6 medium-6 columns">
                <?php print render($form['last_name']); ?>
            </div>
        </div>

        <div class="row">
            <div class="small-12 medium-6 large-6 columns">
                <?php print render($form['address']); ?>
            </div>

            <div class="small-12 medium-6 large-6 columns">
                <?php print render($form['city']); ?>
            </div>
        </div>

        <div class="row">
            <div class="small-12 medium-3 large-3 columns">
                <?php print render($form['state']); ?>
            </div>

            <div class="small-12 medium-3 large-3 columns">
                <?php print render($form['Zip']); ?>
            </div>

            <div class="medium-6 large-6 columns"></div>
        </div>

        <div class="row">
            <div class="small-12 medium-6 large-6 columns">
                <?php print render($form['email']); ?>
            </div>

            <div class="small-12 medium-6 large-6 columns">
                <?php print render($form['phone']); ?>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="small-12 medium-12 large-8 large-offset-2 columns">
            <?php print render($form['submit']); ?>
        </div>
    </div>
</div>

<!-- Render any remaining elements, such as hidden inputs (token, form_id, etc). -->
<?php print drupal_render_children($form); ?>

Ini menggunakan Foundation , yang memberi kita formulir seperti ini:

enter image description here

73

Anda harus mengimplementasikan hook_form_alter () dalam modul atau template.php dan mengatur form # theme properti:

/**
 * Implements hook_form_alter().
 */
function hook_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'user_login') {
    $form['#theme'] = array('overwrite_user_login');
  }
}

Kemudian implementasikan tema baru:

/**
 * Implements hook_theme().
 */
function hook_theme($existing, $type, $theme, $path){
  return array(
    'overwrite_user_login' => array(
      'render element' => 'form',
      'template' => 'form--user_login',
      'path' => $path . '/templates',
    ),
  );
}

Dan kemudian tambahkan formulir - template user_login.tpl.php dengan mengikuti kode untuk membuat formulir:

<?php print drupal_render_children($form) ?> 
17
mrded

Meskipun Anda mungkin dapat menggunakan solusi kiamlaluno, saya pribadi tidak akan melakukannya.

Apa alasan Anda membutuhkan file templat untuk formulir? Jika itu karena Anda ingin markup yang sedikit berbeda untuk formulir yang ada? Jika demikian maka Anda dapat menggunakan hook_form_alter() untuk mengubah formulir sebelum dirender. Menggunakan Formulir API Anda, Anda dapat memodifikasi semua bidang formulir menyuntikkan elemen html dll.

Berikut adalah contoh hook_form_alter() yang saya buat yang memodifikasi standar drupal blok formulir masuk:

/**
 * Implements hook_form_alter().
 */
function MYMODULE_form_alter(&$form, &$form_state, $form_id) {

  switch ($form_id) {
    case 'user_login_block':

      // Form modification code goes here.
            $form['divstart'] = array(
                '#value' => '<div style="background-color: red;">',
                '#weight' => -1,
            );

            $form['instruct'] = array(
                '#value' => '<p>Enter your username and password to login</p>',
                '#weight' => 0,
            );          

            $form['divend'] = array(
                '#value' => '</div>',
                '#weight' => 4,             
            );
      break;
  }
}

Contoh di atas membungkus seluruh formulir dalam DIV yang memiliki gaya sebaris untuk mengubah warna latar belakang menjadi merah. Itu juga menambahkan paragraf teks bantuan ke awal formulir.

Seperti inilah bentuk login pengguna saya sekarang setelah kode di atas dimuat:

Customised login form

Lihat referensi API Formulir untuk informasi lebih lanjut: Referensi API Formulir

13
Camsoft

Sebenarnya saya tidak pernah perlu menggunakan file templat untuk formulir.
Sejauh yang saya bisa lihat, Drupal kode inti menggunakan fungsi tema, ketika formulir, atau bagian dari formulir perlu dirender dengan cara tertentu; fungsi tema yang panggilan drupal_render () biasanya cukup untuk tujuan apa pun.

Untuk membalas pertanyaan, membuat file templat untuk formulir tidak berbeda dari membuat file templat yang bukan untuk formulir.

Tentukan fungsi tema, gunakan sebagai fungsi tema nama pemanggil formulir pembangun. Kode harus serupa dengan yang berikut:

/**
 * Implementation of hook_theme().
 */

 function mymodule_theme() {
   return array(
     'mymodule_form' => array(
       'template' => 'mymodule-form',
       'file' => 'mymodule.admin.inc',
       'arguments' => array('form' => NULL),
     ),
   );
 }

Jika formulir berisi nilai $form['field_1'], Nilainya akan tersedia dalam file templat sebagai $field_1. File template juga dapat menggunakan nilai apa pun yang dikirimkan dari template_preprocess_mymodule_form().

12
kiamlaluno

Saya akan selalu gaya dengan menambahkan ke file CSS saya menggunakan penyeleksi untuk mengidentifikasi elemen yang akan ditata sebagai berikut untuk formulir login inti

#user-login
{
   border:1px solid #888;
   padding-left:10px;
   padding-right:10px;
   background-image: url(http://www.zaretto.com/images/zlogo_s.png);
   background-repeat:no-repeat;
   background-position:right;
}

#user-login label
{
    display: inline-block;
}

Di atas saya hanya menambahkan sites/all/themes/theme-name/css/theme-name.css

Jika apa yang Anda perlu gaya tidak memiliki ID atau pemilih yang cukup akurat maka perlu menggunakan pendekatan hook untuk memodifikasi HTML juga menambahkan pengidentifikasi.

IMO menggunakan gaya inline pada elemen adalah praktik yang sangat buruk yang harus ditinggalkan dan diganti dengan menggunakan class dan id

1

Untuk tema bentuk, Anda dapat menggunakan custom css, seperti yang dijelaskan dalam Themeing Drupal 7 Formulir (Termasuk CSS dan JS).

Pada dasarnya Anda perlu melakukan langkah-langkah ini:

  1. Daftarkan jalur ke formulir menggunakan hook_menu ()
  2. Tentukan formulirnya
  3. Daftarkan fungsi tema dengan hook_theme ()
  4. Tulis fungsi tema
  5. Buat file CSS dan JavaScript
0
shasi kanth