主题联系表格

我想在Drupal 8中建立联系表单的主题。我想在表单元素周围放置div（使用bootstrap）。

我还想在某些元素（提交按钮，表单本身）上放置一些类。

打开您的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']通过alter 找到该模板名称，它总是（或在大多数情况下）与表单ID机器名称相同。您需要做的是为其注册模板。您需要实施hook_theme()。您可以在CUSTOMMODULE.module或THEMENAME.theme中编写它。主题键必须与中的相同$form['#theme']，因此它会自动使用，否则您需要通过alter表单添加新的。

/**
 * 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对不起我的英语，希望有人编辑并纠正我的错误:)

使用此方法的复杂形式示例。