it-swarm.com.de

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).

11
Johan Haest

Ö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: enter image description here

Vergiss nicht, deine Caches zu leeren;)

16
rpayanm

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 in $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 hook_theme() implementieren. 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 das Formular ändern 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 custom-form-template-name.html.twig (Mit Ihrem Vorlagennamen aus hook_theme ()) erstellen.

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 zusätzliche Daten auch an die Vorlage übergeben, indem Sie template_preprocess_TEMPALTENAME Implementieren.

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.

P.s. Entschuldigung für mein Englisch, hoffe jemand bearbeitet und behebt meine Fehler :)

Beispiel einer komplexen Form mit dieser Methode.

(enter image description here

20
Niklan