Theme ein Kontaktformular

11

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

theming 8 emails Johan Haest
quelle
2
Ich schlage vor, Ihr Problem genauer zu beschreiben und zu sagen, was Sie bereits versucht haben. Das zeigt einige Initiative und hilft anderen, Ihnen eine bessere Antwort zu geben.
Aram Boyajyan

Antworten:

16

Ö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: Geben Sie hier die Bildbeschreibung ein

Vergiss nicht, deine Caches zu leeren;)

rpayanm
quelle
1
Wie benenne ich die Funktion, wenn mein Thema "abc" und mein Formular "contact us" heißt?
Daniel Dewhurst
3
{themename} _form_contact_message_ {formname} _form_alter
Johan Haest
Das ist so toll !!!
Ipwa
19

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.

Geben Sie hier die Bildbeschreibung ein

Niklan
quelle
2
Beachten Sie, dass ich für mich {{ form.submit }}zu{{ form.actions.submit }}
mikeDOTexe
@Niklan: Ich habe den gleichen Code für mein benutzerdefiniertes Entity-Bundle-Formular befolgt. Wenn ich benutze {{ form }}, druckt es das gesamte Formular. Aber wenn ich ein bestimmtes Feld wie benutze {{ form.my_field }}, wird nichts angezeigt. Haben Sie eine Idee, wie wir die einzelnen Felder des benutzerdefinierten Entity-Bundle-Formulars anzeigen können?
Kalidasan
@kalidasan versuchen, jedes Feld ohne Drucken zu drucken {{ form }}. Ich schlage vor, dass nach dem Drucken {{ form }}alle Formularelemente als markiert werden '#rendered' => TRUEund nicht bald gerendert werden. Wenn Sie diese Methode des Themenformulars nicht verwenden möchten, müssen Sie jedes Feld einzeln drucken. drupal_render_children()In Drupal 8 gibt es keine , es sei denn, Sie schreiben es selbst. Auf jeden Fall führt dies standardmäßig zu Duplikaten. Versuchen Sie daher, jedes Feld manuell zu drucken.
Niklan
@ Niklan: Ich habe nicht {{ form }} & {{ form.my_field }}zusammen verwendet. Zuerst nur mit versucht {{ form }}, hier kann ich die gesamte Form sehen. Dann {{ form }}aus der Vorlage entfernt und dann für jedes Formularfeld separat so ausprobiert {{ form.my_field }}, etc , aber keine Ausgabe erhalten. Es wird nichts angezeigt.
Kalidasan
1
@kalidasan können Sie Titel in deaktivieren template_preprocess_FORM_ID_THEME(&$variables). In diesem Vorprozess können Sie neue Variablen hinzufügen und vorhandene einschließlich Formularelemente ändern. Ich habe das nie gesehen {{ form.field_name.widget }}und thematisiere oft Formen. Sieht so aus, als ob dieses Feld von einem Drittanbieter-Modul benutzerdefiniert erstellt oder hinzugefügt wurde? Ich denke, das ist erlaubt, aber keine Regel für andere. Ich empfehle Ihnen, mit dem Vorverarbeitungshaken zu beginnen und sich nur anzusehen, $variables['form']was darin enthalten ist.
Niklan