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).
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).
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:
Önbelleklerinizi temizlemeyi unutmayın;)
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.
{{ form.submit }}
için{{ form.actions.submit }}
{{ 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?
{{ form }}
. Yazdırdıktan sonra {{ form }}
tüm form öğelerinin olarak işaretlenmesini '#rendered' => TRUE
ve 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.
{{ 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.
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 .