ธีมแบบฟอร์มการติดต่อ

ฉันต้องการธีมของแบบฟอร์มการติดต่อใน 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']โดยเพียงแค่แก้ไขมันเสมอ (หรือในเวลาส่วนใหญ่) เหมือนกับชื่อเครื่อง 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 pass ตัวแปร $ form พร้อมด้วย 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 ขอโทษสำหรับภาษาอังกฤษของฉันหวังว่าจะมีคนแก้ไขและแก้ไขข้อผิดพลาดของฉัน :)

ตัวอย่างของรูปแบบที่ซับซ้อนโดยใช้วิธีนี้