Drupal 8.で連絡先フォームのテーマを設定します。フォームエレメントの周りにdivを配置します(ブートストラップを使用)。
また、特定の要素(送信ボタン、フォーム自体)にいくつかのクラスを配置したいと考えています。
YOURTHEMENAME.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';
}
そして、これがあなたの結果です:
キャッシュをクリアすることを忘れないでください;)
すべてのフォームのテーマを簡単に設定できます。 @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はフォームに$ form変数を渡します。
次に、_custom-form-template-name.html.twig
_を作成する必要があります(hook_theme()のテンプレート名を使用)。
最小限のテンプレートは
_{{ 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 }}
_
この方法は、より柔軟でクリーンで強力です。
追伸私の英語で申し訳ありません、誰かが私の間違いを編集して修正することを願っています:)
このメソッドを使用した複雑なフォームの例。