お問い合わせフォームのテーマ


11

Drupal 8の連絡フォームにテーマを設定したいのですが、フォーム要素の周りにdivを配置したいのです(ブートストラップを使用)。

また、特定の要素(送信ボタン、フォーム自体)にいくつかのクラスを配置したいと考えています。


2
私はあなたの問題をより詳細に説明し、あなたがすでに試みたことを言うことを提案します。それはいくつかのイニシアチブを示し、他の人があなたにより良い答えを与えるのに役立ちます。
Aram Boyajyan、2015年

回答:


16

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

}

そして、これがあなたの結果です: ここに画像の説明を入力してください

キャッシュをクリアすることを忘れないでください;)


1
テーマの名前が「abc」で、フォームの名前が「contact us」の場合、関数にはどのような名前を付けますか?
Daniel Dewhurst 2016年

3
{themename} _form_contact_message_ {formname} _form_alter
Johan

これはすごい!
ipwa 2017

20

すべてのフォームのテーマを簡単に設定できます。@rpayanmによる方法は好きではありません。メンテナンスが難しく、読みにくくなっています。大きなフォームではこれは当てはまりません。単一のラッパーと単純な構造です。

テーマを使用しようとするすべてのフォームは、マシン名と同じです。このテンプレート名は、$form['#theme']単に変更するだけで見つけることができます。常に(またはほとんどの場合)、フォームIDマシン名と同じです。あなたがする必要があるのはそのためのテンプレートを登録することです。実装する必要があります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 }}

この方法は、より柔軟でクリーンで強力です。

PSは私の英語で申し訳ありません、誰かが私の間違いを編集して修正することを願っています:)

このメソッドを使用した複雑なフォームの例。

ここに画像の説明を入力してください


2
私にとって、私が変更{{ form.submit }}したことに注意してください{{ form.actions.submit }}
mikeDOTexe

@Niklan:カスタムエンティティバンドルフォームについても、上記と同じコードに従いました。を使用すると{{ form }}、フォーム全体が印刷{{ form.my_field }}されますが、などの特定のフィールドを使用すると、何も表示されません。カスタムエンティティバンドルフォームの各フィールドをどのように表示できますか?
カリダサン2017

@kalidasanは、印刷せずにすべてのフィールドを印刷しようとします{{ form }}。印刷した後、{{ form }}すべてのフォーム要素はとしてマークされ'#rendered' => TRUE、すぐにはレンダリングされないことをお勧めします。このテーマ設定方法を使用しない場合は、すべてのフィールドを個別に印刷する必要があります。何もありませんdrupal_render_children()、あなたが自分でそれを書く場合を除き、Drupalの8に。とにかく、デフォルトでは重複が発生するため、各フィールドを手動で印刷してみてください。
ニクラン2017

@Niklan:{{ form }} & {{ form.my_field }}一緒に使ったことはありません。最初はのみ{{ form }}で試してみましたが、ここではフォーム全体を見ることができます。次に{{ form }}、テンプレートから削除され、このように各フォームフィールドに対して個別に試行されました {{ form.my_field }}, etc が、dintは出力を取得します。何も表示されません。
カリダサン2017

1
@kalidasanでは、タイトルの設定を解除できますtemplate_preprocess_FORM_ID_THEME(&$variables)。この前処理では、新しい変数を追加したり、フォーム要素などの既存の変数を変更したりできます。私はこれ{{ form.field_name.widget }}を見たことがなく、フォームのテーマを頻繁に設定しています。このフィールドはサードパーティのモジュールによってカスタムで作成または追加されたようですか?これは許可されていると思いますが、他人を支配するものではありません。私はあなたがプリプロセスフックから始めて$variables['form']、それが内部に含んでいるものを見ることを勧めます。
Niklan 2017
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.