संपर्क फ़ॉर्म को थीम दें

Question

मैं Drupal 8. में संपर्क फ़ॉर्म को थीम बनाना चाहूँगा। मैं फॉर्म एलिमेंट्स (बूटस्ट्रैप का उपयोग करके) को चारों ओर रखना चाहूँगा।

मैं कुछ वर्गों को कुछ तत्वों पर रखना चाहता हूं (बटन सबमिट करें, फ़ॉर्म स्वयं)।

Comments

मैं आपको अधिक विवरण में आपकी समस्या का वर्णन करने और यह बताने का सुझाव देता हूं कि आपने पहले से क्या प्रयास किया है। यह कुछ पहल दिखाएगा और दूसरों को बेहतर उत्तर देने में आपकी मदद करेगा।

— अराम बोयाजयन

Answer 1

अपनी THETHEMENAME.theme फ़ाइल खोलें और निम्न कोड जोड़ें:

function YOURTHEMENAME_form_contact_message_feedback_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {

  // Name
  $form['name']['#prefix'] = '<div class="row"><div class="col-md-6"><div class="form-group">';
  $form['name']['#suffix'] = '</div>';
  $form['name']['#attributes']['placeholder'][] = $form['name']['#title'].'*';
  $form['name']['#attributes']['class'][] = 'form-control';
  unset($form['name']['#title']);

  // Mail
  $form['mail']['#prefix'] = '<div class="form-group">';
  $form['mail']['#suffix'] = '</div>';
  $form['mail']['#attributes']['placeholder'][] = $form['mail']['#title'].'*';
  $form['mail']['#attributes']['class'][] = 'form-control';
  unset($form['mail']['#title']);


  // Subject
  $form['subject']['widget'][0]['value']['#attributes']['class'][] = 'form-control';
  $form['subject']['widget'][0]['value']['#attributes']['placeholder'][] = $form['subject']['widget'][0]['#title'].'*';
  $form['subject']['widget'][0]['#title'] = '';
  unset($form['subject']['widget'][0]['value']['#title']);
  $form['subject']['widget'][0]['#prefix'] = '<div class="form-group">';
  $form['subject']['widget'][0]['#suffix'] = '</div></div>';

  // Message
  $form['message']['widget'][0]['value']['#attributes']['class'][] = 'form-control';
  $form['message']['widget'][0]['value']['#attributes']['placeholder'][] = $form['message']['widget'][0]['#title'].'*';
  $form['message']['widget'][0]['#title'] = '';
  unset($form['message']['widget'][0]['value']['#title']);
  $form['message']['widget'][0]['#prefix'] = '<div class="col-md-6"><div class="form-group">';
  $form['message']['widget'][0]['#suffix'] = '</div></div></div>';

  // Submit
  $form['actions']['#prefix'] = '<div class="clearfix">';
  $form['actions']['#suffix'] = '</div>';
  $form['actions']['submit']['#attributes']['class'][] = 'btn';
  $form['actions']['submit']['#attributes']['class'][] = 'btn-success';
  $form['actions']['submit']['#attributes']['class'][] = 'pull-right';

}

और यहाँ आपका परिणाम है:

अपने कैश साफ़ करना मत भूलना;)

Comments

यदि मेरे विषय का नाम 'abc' है, और मेरे फ़ॉर्म का नाम 'हमसे संपर्क करें' है, तो मुझे फ़ंक्शन का क्या नाम देना चाहिए?

— डेनियल डेहर्स्ट

{विषयवस्तु} _form_contact_message_ {formname} _form_alter

— जोहान हेस्ट

यह तो कमाल है!!!

— ipwa

Answer 2

आप बस हर रूप को थीम कर सकते हैं कि आप कैसे चाहते हैं। मुझे @rpayanm द्वारा विधि पसंद नहीं है, यह मुश्किल से मेनटेन और हार्ड पठनीय है, बड़े रूपों के साथ यह मामला नहीं है, सिर्फ एक आवरण और सरल संरचना।

थीम का उपयोग करने की कोशिश करने वाला हर फॉर्म उनके मशीन के नाम के बराबर है। आप इस टेम्पलेट का नाम $form['#theme']केवल परिवर्तन करके पा सकते हैं , यह हमेशा (या अधिकांश समय) आईडी मशीन नाम के रूप में ही होता है। आपको इसके लिए रजिस्टर टेम्प्लेट की आवश्यकता है। आपको लागू करने की आवश्यकता है hook_theme()। आप इसे CUSTOMMODULE.module या THEMENAME.theme में लिख सकते हैं। थीम कुंजी में समान होना चाहिए $form['#theme'], इसलिए इसका स्वचालित रूप से उपयोग करें, अन्यथा आपको प्रपत्र परिवर्तन के माध्यम से नया जोड़ना होगा।

/**
 * Implements hook_theme().
 */
function MODULENAME_theme($existing, $type, $theme, $path) {
  return [
    'FORM_ID_THEME' => [
      'template' => 'custom-form-template-name',
      'render element' => 'form',
    ]
  ];
}

Drupal फॉर्म के साथ $ फॉर्म चर।

फिर आपको बनाना होगा custom-form-template-name.html.twig(हुक से अपने नाम के साथ_केम ())।

न्यूनतम टेम्पलेट है

{{ form }}

आप हर फ़ील्ड को उस फ़ॉर्म से प्रिंट कर सकते हैं जहाँ आप चाहते हैं

{{ form.field_name }}

यहां आप मार्कअप के साथ जो चाहें कर सकते हैं।

आप कार्यान्वित करके टेम्पलेट में अतिरिक्त डेटा भी पास कर सकते हैं template_preprocess_TEMPALTENAME

function template_preprocess_FORM_ID_THEME(&$variables) {
  $variables['example'] = 'This is added via preprocess';
}

और फिर टेम्पलेट में उपयोग करें

{{ example }}
<div class="first-field">
  {{ form.first_field }}
</div>

<div class="second-field">
  {{ form.second_field }}
</div>

<div class="buttons">
  {{ form.submit }}
  {{ form.preview }}
</div>
{#
Don't forget to add printing form special info at the end.
Without this data form will not working propertly.
#}
{{ form.form_build_id }}
{{ form.form_token }}
{{ form.form_id }}

मुझे लगता है कि यह तरीका अधिक साफ, स्वच्छ और शक्तिशाली है।

मेरी अंग्रेजी के लिए पीएस सॉरी, आशा है कि कोई व्यक्ति मेरी गलतियों को संपादित और ठीक करेगा :)

इस पद्धति का उपयोग करके जटिल रूप का उदाहरण।

Comments

ध्यान दें कि मेरे लिए, मुझे {{ form.submit }}{{ form.actions.submit }}

— mikeDOTexe

@ निक्लान: मैंने अपने कस्टम इकाई बंडल फॉर्म के लिए समान कोड का पालन किया है। अगर मैं उपयोग करता हूं {{ form }}, तो यह पूरे फॉर्म को प्रिंट कर रहा है। लेकिन अगर मैं विशिष्ट क्षेत्र का उपयोग करता हूं {{ form.my_field }}, तो कुछ भी प्रदर्शित नहीं होता है। किसी भी विचार हम कस्टम इकाई बंडल फार्म के प्रत्येक क्षेत्रों को कैसे प्रदर्शित कर सकते हैं?

— कालिदासन

@ कालिदासन बिना छपाई के हर क्षेत्र को छापने की कोशिश करते हैं {{ form }}। मेरा सुझाव है कि {{ form }}सभी प्रपत्रों को मुद्रित करने के बाद तत्वों को चिह्नित किया '#rendered' => TRUEजाएगा और जल्द ही प्रदान नहीं किया जाएगा। यदि आप थीमिंग फ़ॉर्म के इस तरीके का उपयोग नहीं करना चाहते हैं, तो आपको प्रत्येक फ़ील्ड को व्यक्तिगत रूप से प्रिंट करना होगा। drupal_render_children()Drupal 8 में कोई भी नहीं है, जब तक कि आप इसे स्वयं नहीं लिखते। वैसे भी डिफ़ॉल्ट रूप से यह डुप्लिकेट का कारण होगा, इसलिए प्रत्येक फ़ील्ड को मैन्युअल रूप से प्रिंट करने का प्रयास करें।

— निकलन

@ निलकान: मैंने {{ form }} & {{ form.my_field }}एक साथ उपयोग नहीं किया है। पहले केवल इसके साथ प्रयास किया गया {{ form }}, यहाँ मैं संपूर्ण रूप देख सकता हूँ। फिर {{ form }}टेम्प्लेट से हटा दिया गया, फिर प्रत्येक फॉर्म फ़ील्ड को इस तरह अलग-अलग करने की कोशिश की गई {{ form.my_field }}, etc , लेकिन कोई भी पुट आउट नहीं हुआ। कुछ भी प्रदर्शित नहीं किया।

— कालिदासन

@ कालिदासन आप शीर्षक को परेशान कर सकते हैं template_preprocess_FORM_ID_THEME(&$variables)। इस प्रीप्रोसेस में आप नए वेरिएबल्स जोड़ सकते हैं, फॉर्म एलिमेंट्स सहित मौजूदा बदलाव कर सकते हैं। मैंने इसे कभी नहीं देखा {{ form.field_name.widget }}और मैंने अक्सर फॉर्मिंग की थी। ऐसा लगता है कि यह फ़ील्ड तृतीय पक्ष मॉड्यूल द्वारा कस्टम बनाया या जोड़ा गया है? मुझे लगता है कि यह अनुमति है, लेकिन दूसरों के लिए शासन नहीं। मैं आपको प्रीप्रोसेस हुक से शुरू करने की सलाह देता हूं और बस $variables['form']यह देखता हूं कि इसमें क्या है।

— निकलन