फॉर्म को थीम के लिए टेम्प्लेट फ़ाइल का उपयोग कैसे करें?

Question

जबकि Drupal में नोड्स, टिप्पणियां, ब्लॉक और कई अन्य चीजें थीम टेम्प्लेट फ़ाइलों (जैसे कि नोड। पीपी। एफपी) का उपयोग करके थीम पर आधारित हैं, प्रपत्र एक अलग कहानी है। प्रपत्रों के लिए कोई थीम टेम्पलेट फ़ाइलें नहीं हैं। मैं कस्टम थीम टेम्पलेट का उपयोग करने के लिए एक विशेष रूप कैसे प्राप्त कर सकता हूं?

Answer 1

फ़ॉर्म प्रदर्शित करने के लिए tpl फ़ाइल का उपयोग करना चाहते हैं यह पूरी तरह से उचित है। आप बाहरी सीएसएस और बहुत से उपयोग कर सकते हैं #prefix/ #suffixइसी तरह के परिणाम प्राप्त करने के लिए गुण है, लेकिन TPL के का उपयोग करके आप अपने तर्क और प्रस्तुति परतों की जुदाई अप को अस्त-व्यस्त करने की जरूरत नहीं है और तरह बदसूरत CSS चयनकर्ताओं को लक्षित की जरूरत नहीं है #user-login label। यहाँ 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 / टेम्पलेट / प्रपत्र / 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); ?>

यह फाउंडेशन का उपयोग कर रहा है , जो हमें इस तरह का एक रूप देता है:

Comments

ऐसा लगता है कि आप mytheme_theme () फ़ंक्शन

— sel_space

आप सही हैं, मैंने इसे जोड़ा है।

— चार्ली श्लिसेर

बहुत महत्वपूर्ण नोट यह है कि, कोड स्निपेट के नीचे, वह है print drupal_render_children($form)जो फॉर्म को वास्तव में सामान बनाता है :)।

— क्रिस रॉकवेल

अच्छा उत्तर। मैं जोड़ सकता हूं कि आपको अतिरिक्त रूप से निर्दिष्ट करने की आवश्यकता है engine, यदि आप कुछ डिफ़ॉल्ट का उपयोग कर रहे हैं। जैसे 'engine' => 'twig'।

— मिल्कोव्स्की

अच्छा जवाब। ध्यान रखें यदि आप इस तरह के रूप में विषय एक व्यवस्थापक प्रपत्र करना चाहते हैं user_profile_formया user_register_form। इस परिदृश्य में आपको या तो ए) को थीम थीम में अपनी थीमिंग करनी होगी (या यदि आप आधार व्यवस्थापक थीम को बदल नहीं सकते हैं तो इसे घटा सकते हैं) या बी) अपने थीम को कस्टम मॉड्यूल में डालें। अन्यथा आपकी थीमिंग देखी नहीं जाएगी।

— उपचार

Answer 2

आपको एक मॉड्यूल या template.php में hook_form_alter () को लागू करना होगा और फॉर्म की #theme प्रॉपर्टी सेट करनी होगी :

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

फिर नई थीम लागू करें:

/**
 * 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',
    ),
  );
}

और फिर फॉर्म को रेंडर करने के लिए फॉलो कोड वाले user_login.tpl.php टेम्पलेट जोड़ें:

<?php print drupal_render_children($form) ?> 

Comments

#themeसंपत्ति तो बहुत सरल है और पहली बार वास्तव में, उत्तर में नीचे कम सुपर अजीब के लिए उल्लेख किया है। यह निश्चित रूप से मेरा पसंदीदा तरीका है।

— मैट फ्लेचर

मैंने इस कोड का परीक्षण किया और यह उम्मीद के मुताबिक काम करता है।

— व्लाडसविट्स्की

Answer 3

हालांकि आप kiamlaluno के समाधान का उपयोग करने में सक्षम हो सकते हैं, मैं व्यक्तिगत रूप से नहीं।

फ़ॉर्म के लिए टेम्प्लेट फ़ाइल की आवश्यकता के लिए आपका क्या कारण है? यदि ऐसा है क्योंकि आप मौजूदा फॉर्म के लिए थोड़ा अलग मार्कअप चाहते हैं? यदि ऐसा है तो आप hook_form_alter()प्रदान किए जाने से पहले फॉर्म को संशोधित करने के लिए उपयोग कर सकते हैं । Form API का उपयोग करके आप HTML फॉर्म आदि को इंजेक्ट करने वाले सभी फॉर्म फील्ड को संशोधित कर सकते हैं।

यहाँ hook_form_alter()मैंने इसका एक उदाहरण बनाया है जो मानक ड्रुपल लॉगिन फॉर्म ब्लॉक को संशोधित करता है:

/**
 * 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;
  }
}

उपरोक्त उदाहरण एक DIV के भीतर पूरे फॉर्म को लपेटता है जिसमें पृष्ठभूमि रंग को लाल करने के लिए इनलाइन शैली है। यह प्रपत्र की शुरुआत में मदद पाठ का एक पैराग्राफ भी जोड़ता है।

उपरोक्त कोड लोड होने के बाद मेरा उपयोगकर्ता लॉगिन फ़ॉर्म अब जैसा दिखता है:

अधिक जानकारी के लिए फॉर्म एपीआई संदर्भ देखें: फॉर्म एपीआई संदर्भ

Comments

इस उदाहरण में इनलाइन शैलियों के उपयोग को स्पष्ट करने के लिए सिर्फ उदाहरण को सरल करना है। मैं इनलाइन शैलियों का उपयोग करने की अनुशंसा नहीं करता हूं और आपको कक्षाओं का उपयोग करना चाहिए।

— 13oft पर कैंपसॉफ्ट

मैं किसी प्रपत्र को प्रस्तुत करने के लिए टेम्पलेट फ़ाइल का उपयोग नहीं कर रहा हूं; तथ्य की बात के रूप में, मैंने यह भी कहा कि मैंने कभी भी किसी फॉर्म को रेंडर करने के लिए टेम्प्लेट फ़ाइल का उपयोग नहीं किया है (मैंने वास्तव में एक मॉड्यूल का कोड बदल दिया है जो एक फॉर्म के लिए टेम्प्लेट फ़ाइल का उपयोग कर रहा था), और वह ड्रुपल टेम्पलेट का उपयोग नहीं करता है प्रपत्र प्रस्तुत करने के लिए फ़ाइलें।

— kiamlaluno

क्या होगा यदि आप मार्कअप को मौलिक रूप से बदलना चाहते हैं? कभी-कभी एक टेम्पलेट फ़ाइल एक बेहतर विकल्प है।

— cossovich

मार्कअप फॉर्म लॉजिक बिल्डर में बदबू आती है।

— चार्ली श्लिसेर

यद्यपि यह समाधान ज्यादातर मामलों में काम करता है, लेकिन यह वास्तव में तब टूट सकता है जब फार्म का प्रतिपादन एक अजाक्स कॉलबैक में ताज़ा किया जाता है

— पैट्रिकएस

Answer 4

मुझे वास्तव में किसी फॉर्म के लिए टेम्प्लेट फ़ाइल का उपयोग करने की आवश्यकता नहीं है।
जहां तक ​​मैं देख सकता हूं, ड्रुपल कोर कोड थीम फ़ंक्शन का उपयोग करता है, जब किसी फॉर्म, या फॉर्म के एक हिस्से को एक विशेष तरीके से प्रस्तुत करने की आवश्यकता होती है; एक थीम फ़ंक्शन जिसे ड्रुपल_रेंडर () कहा जाता है, सामान्य रूप से किसी भी उद्देश्य के लिए पर्याप्त है।

प्रश्न का उत्तर देने के लिए, एक फॉर्म के लिए एक टेम्प्लेट फ़ाइल बनाना एक टेम्प्लेट फ़ाइल बनाने से अलग नहीं है जो एक फ़ॉर्म के लिए नहीं है।

थीम फ़ंक्शन को परिभाषित करें, थीम फ़ंक्शन के रूप में उपयोग करते हुए फॉर्म बिल्डर कॉलबैक का नाम। कोड निम्नलिखित के समान होना चाहिए:

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

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

यदि प्रपत्र में मान है $form['field_1'], तो इसका मान टेम्पलेट फ़ाइल में उपलब्ध होगा $field_1। टेम्प्लेट फ़ाइल से पारित किसी भी मान का उपयोग करने में सक्षम होगा template_preprocess_mymodule_form()।

Comments

मैं अपने थीम फ़ंक्शन / टेम्प्लेट का उपयोग करने के लिए कुछ अन्य मॉड्यूल, संभवतः कोर मॉड्यूल द्वारा परिभाषित प्रपत्र कैसे सुझाता हूं?

— शफीउल

सेट करें $form['#theme']।

— kiamlaluno

काम नहीं कर रहा है, जब मैं फॉर्म जमा करता हूं, तो यह form_submit फ़ंक्शन पर नहीं जाएगा

— gbstack

Answer 5

मैं हमेशा अपनी सीएसएस फ़ाइल को जोड़कर शैली का चयन करूंगा ताकि कोर लॉगिन फॉर्म के लिए तत्व की पहचान करने के लिए चयनकर्ताओं का उपयोग किया जा सके

#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;
}

ऊपर मैं बस जोड़ने के लिए sites/all/themes/theme-name/css/theme-name.css

यदि आपको स्टाइल करने की आवश्यकता नहीं है, तो आपके पास एक आईडी या एक पर्याप्त सटीक चयनकर्ता नहीं है, तो hookHTML को पहचानकर्ताओं को संशोधित करने के लिए दृष्टिकोण का उपयोग करना आवश्यक है ।

IMO तत्वों पर इनलाइन शैली का उपयोग कर एक है बहुत बुरा व्यवहार कि पदावनत और के उपयोग के द्वारा प्रतिस्थापित किया जाना चाहिए classऔरid

Answer 6

फॉर्म को थीम देने के लिए, आप एक कस्टम सीएसएस का उपयोग कर सकते हैं, जैसा कि थीमिंग ड्रुपल 7 फॉर्म (सीएसएस और जेएस सहित) में समझाया गया है ।

मूल रूप से आपको इन चरणों को करने की आवश्यकता है:

1. हुक_मेनू () का उपयोग करके फ़ॉर्म का पथ पंजीकृत करें
2. फार्म को परिभाषित करें
3. Hook_theme () के साथ एक थीम फ़ंक्शन पंजीकृत करें
4. थीम फ़ंक्शन लिखें
5. CSS और JavaScript फाइलें बनाएं

Answer 7

मुझे पूरा यकीन है कि आप प्रपत्रों के लिए टेम्पलेट का उपयोग करने में सक्षम हैं, लेकिन आपको पहले स्थान पर टेम्पलेट को पंजीकृत करने के लिए हुक_टैम का उपयोग करना होगा। मेरे पास एक ऐसी स्थिति थी जहां फॉर्म को वास्तव में div आधारित की बजाय टेबल आधारित होने की आवश्यकता थी और सरल #prefix और #suffix परिवर्तन वास्तव में इसे पसंद नहीं करते थे। अगर दिलचस्पी है तो मैं शायद एक उदाहरण और कोशिश कर सकता हूं।