Theme ein Kontaktformular

Ich möchte ein Kontaktformular in Drupal 8 thematisieren. Ich möchte Divs um Formularelemente setzen (mithilfe von Bootstrap).

Ich möchte auch einige Klassen auf bestimmte Elemente setzen (Schaltfläche "Senden", das Formular selbst).

Öffnen Sie Ihre Datei YOURTHEMENAME.theme und fügen Sie den folgenden Code hinzu:

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

}

Und hier ist Ihr Ergebnis:

Vergiss nicht, deine Caches zu leeren;)

Sie können einfach jedes Formular nach Ihren Wünschen gestalten. Ich mag die Methode von @rpayanm nicht, weil sie schwer zu pflegen und schwer lesbar ist. Bei großen Formularen ist dies nicht der Fall, nur ein einzelner Wrapper und eine einfache Struktur.

Jedes Formular, das versucht, ein Thema zu verwenden, entspricht seinem Maschinennamen. Sie finden diesen Vorlagennamen $form['#theme']nur durch Ändern. Er entspricht immer (oder in den meisten Fällen) dem Namen des Formular-ID-Computers. Was Sie tun müssen, ist die Vorlage dafür zu registrieren. Sie müssen implementieren hook_theme(). Sie können es in CUSTOMMODULE.module oder in THEMENAME.theme schreiben. Der Themenschlüssel muss derselbe sein wie in $form['#theme'], daher wird er automatisch verwendet, andernfalls müssen Sie einen neuen über die Formularänderung hinzufügen.

/**
 * Implements hook_theme().
 */
function MODULENAME_theme($existing, $type, $theme, $path) {
  return [
    'FORM_ID_THEME' => [
      'template' => 'custom-form-template-name',
      'render element' => 'form',
    ]
  ];
}

Drupal-Pass $ Formularvariable mit Formular.

Dann müssen Sie erstellen custom-form-template-name.html.twig(mit Ihrem Vorlagennamen aus hook_theme ()).

Die minimale Vorlage ist

{{ form }}

Sie können auch jedes Feld aus dem gewünschten Formular drucken

{{ form.field_name }}

Hier können Sie mit Markup machen, was Sie wollen.

Sie können durch Implementierung auch zusätzliche Daten an die Vorlage übergeben template_preprocess_TEMPALTENAME

function template_preprocess_FORM_ID_THEME(&$variables) {
  $variables['example'] = 'This is added via preprocess';
}

Und dann in Vorlage verwenden

{{ 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 }}

Ich denke, diese Methode ist flexibler, sauberer und leistungsfähiger.

Ps Entschuldigung für mein Englisch, hofft, dass jemand meine Fehler bearbeitet und behebt :)

Beispiel einer komplexen Form mit dieser Methode.