연락처 양식 테마

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']alter만으로 찾을 수 있으며 양식 ID 시스템 이름과 항상 (또는 대부분의 경우) 동일합니다. 당신이해야 할 일은 템플릿을 등록하는 것입니다. 구현해야합니다 hook_theme(). CUSTOMMODULE.module 또는 THEMENAME.theme에 작성할 수 있습니다. 테마 키는의 키와 동일해야 $form['#theme']하므로 자동으로 사용합니다. 그렇지 않으면 form 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 변수를 form과 함께 전달합니다.

그런 다음 custom-form-template-name.html.twighook_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 내 영어로 죄송합니다. 누군가 내 실수를 수정하고 수정하기를 바랍니다 :)

이 방법을 사용한 복잡한 형태의 예.