İletişim formu teması

Drupal 8'de bir iletişim formu teması istiyorum. Form öğelerinin etrafına div'ler (bootstrap kullanarak) koymak istiyorum.

Ayrıca bazı öğelere bazı sınıflar koymak istiyorum (Gönder düğmesi, formun kendisi).

theming 8 emails

— Johan Haest
kaynak

Sorununuzu daha ayrıntılı olarak açıklamanızı ve zaten denediklerinizi söylemenizi öneririm. Bu, bazı inisiyatifleri gösterecek ve başkalarının size daha iyi bir cevap vermesine yardımcı olacaktır.

— Aram Boyajyan

Yanıtlar:

YOURTHEMENAME.theme dosyanızı açın ve aşağıdaki kodu ekleyin:

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';

}

Ve işte sonucunuz: resim açıklamasını buraya girin

Önbelleklerinizi temizlemeyi unutmayın;)

— rpayanm
kaynak

Temamın adı 'abc' ve formumun adı 'bize ulaşın' ise, işlevi ne adlandırırım?

— Daniel Dewhurst

{themename} _form_contact_message_ {formname} _form_alter

— Johan Haest

Bu çok harika !!!

— ipwa

Her formda istediğiniz şekilde tema oluşturabilirsiniz. @ Rpayanm'ın yöntemini sevmiyorum, çünkü bakımını yapmak zor ve okunaklı, büyük formlarla durum böyle değil, sadece tek sarıcı ve basit yapı.

Temayı kullanmaya çalışan her form makine adına eşittir. Bu şablon adını $form['#theme']yalnızca değiştirerek bulabilirsiniz , her zaman (veya çoğu zaman) form kimliği makine adı ile aynıdır. Yapmanız gereken şey bunun için şablon kaydetmektir. Uygulamanız gerekiyor hook_theme(). CUSTOMMODULE.module veya THEMENAME.theme içinde yazabilirsiniz. Tema anahtarı ile aynı olmalıdır $form['#theme'], bu yüzden otomatik olarak kullanın, aksi takdirde form değiştirerek yeni bir tane eklemeniz gerekir.

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

Drupal pass $ form değişkeni formlu.

Ardından custom-form-template-name.html.twig(şablon adınız ile hook_theme () öğesinden) oluşturmalısınız.

Minimum şablon

{{ form }}

Ayrıca her alanı istediğiniz yerden formdan yazdırabilirsiniz

{{ form.field_name }}

Burada işaretleme ile ne istersen yapabilirsin.

Ayrıca, uygulayarak ek verileri şablona aktarabilirsiniz template_preprocess_TEMPALTENAME

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

Ve sonra şablonda kullanın

{{ 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 }}

Bu yöntemin daha esnek, temiz ve güçlü olduğunu düşünüyorum.

Ps benim ingilizce için üzgünüm, birisi düzenlemek ve hatalarımı düzeltmek umuyor :)

Bu yöntemi kullanan karmaşık form örneği.

— Niklan
kaynak

Benim {{ form.submit }}için{{ form.actions.submit }}

— mikeDOTexe

@Niklan: Özel varlık paket formum için aynı kodu izledim. İ kullanırsanız {{ form }}i belirli alan gibi kullanırsanız, tüm form.But yazdırıyor {{ form.my_field }}, hiçbir şey gösterdi. Özel varlık paketi formunun her alanını nasıl gösterebiliriz?

— kalidasan

@kalidasan her alanı yazdırmadan yazdırmaya çalışır {{ form }}. Yazdırdıktan sonra {{ form }}tüm form öğelerinin olarak işaretlenmesini '#rendered' => TRUEve yakında oluşturulmayacağını öneririm . Bu tema formu yöntemini kullanmak istemiyorsanız, her alanı ayrı ayrı yazdırmanız gerekir. drupal_render_children()Kendiniz yazmazsanız, Drupal 8'de hayır yoktur . Her neyse, bu varsayılan olarak yinelenmelere neden olur, bu nedenle her alanı manuel olarak yazdırmayı deneyin.

— Niklan

@Niklan: {{ form }} & {{ form.my_field }}Birlikte kullanmadım. Önce sadece denedim {{ form }}, burada tüm formu görebiliyorum. Daha {{ form }}sonra şablondan kaldırıldı ve her form alanı için ayrı ayrı denedi {{ form.my_field }}, etc , ancak dint herhangi bir çıktı koydu. Hiçbir şey görüntülenmedi.

— kalidasan

@kalidasan başlıkları kaldırabilirsiniz template_preprocess_FORM_ID_THEME(&$variables). Bu ön işlemde yeni değişkenler ekleyebilir, form öğeleri dahil olmak üzere var olanları değiştirebilirsiniz. Bunu hiç görmedim {{ form.field_name.widget }}ve formları sık sık tembellik ediyorum. Bu alan üçüncü taraf modülü tarafından özel olarak oluşturulmuş veya eklenmiş gibi görünüyor mu? Buna izin verildiğini düşünüyorum, ama başkaları için kural değil. Önişleme kancasıyla başlamanızı ve $variables['form']içinde ne olduğuna bakmanızı öneririm .

— Niklan