Temat formularza kontaktowego

Chciałbym nadać temat formularzowi kontaktowemu w Drupal 8. Chciałbym umieścić div wokół elementów formularza (używając bootstrap).

Chcę także umieścić niektóre klasy na niektórych elementach (przycisk Prześlij, sam formularz).

theming 8 emails

— Johan Haest
źródło

Sugeruję opisanie problemu bardziej szczegółowo i powiedzenie, czego już próbowałeś. To pokaże pewną inicjatywę i pomoże innym dać ci lepszą odpowiedź.

— Aram Boyajyan

Odpowiedzi:

Otwórz plik YOURTHEMENAME.theme i dodaj następujący kod:

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

}

A oto twój wynik: wprowadź opis zdjęcia tutaj

Nie zapomnij wyczyścić pamięci podręcznej;)

— rpayanm
źródło

Jeśli mój motyw nazywa się „abc”, a mój formularz nazywa się „skontaktuj się z nami”, jak mam nazwać funkcję?

— Daniel Dewhurst

{themename} _form_contact_message_ {formname} _form_alter

— Johan Haest

To jest niesamowite!!!

— ipwa

Możesz po prostu motywować każdą formę, jak chcesz. Nie podoba mi się metoda @rpayanm, ponieważ jest trudna w utrzymaniu i czytelna, przy dużych formach tak nie jest, tylko pojedyncze opakowanie i prosta struktura.

Każda forma próbująca użyć motywu jest równa nazwie maszyny. Możesz znaleźć tę nazwę szablonu po $form['#theme']prostu przez alter, jest ona zawsze (lub w większości przypadków) taka sama jak nazwa maszyny id formularza. Musisz zarejestrować szablon. Musisz wdrożyć hook_theme(). Możesz napisać w CUSTOMMODULE.module lub w THEMENAME.theme. Klucz motywu musi być taki sam jak w $form['#theme'], więc automatycznie go używa, w przeciwnym razie musisz dodać nowy poprzez zmianę formularza.

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

Drupal przekazuje zmienną $ forma z formą.

Następnie musisz stworzyć custom-form-template-name.html.twig (z nazwą szablonu z hook_theme ()).

Minimalny szablon to

{{ form }}

Możesz także wydrukować każde pole z formularza, w którym chcesz

{{ form.field_name }}

Tutaj możesz robić, co chcesz, dzięki znacznikom.

Możesz także przekazać dodatkowe dane do szablonu poprzez wdrożenie template_preprocess_TEMPALTENAME

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

A następnie użyj w szablonie

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

Myślę, że ta metoda jest bardziej płynna, czysta i wydajna.

Ps przepraszam za mój angielski, mam nadzieję, że ktoś edytuje i naprawia moje błędy :)

Przykład złożonej formy przy użyciu tej metody.

— Niklan
źródło

Zauważ, że dla mnie zmieniłem {{ form.submit }}na{{ form.actions.submit }}

— mikeDOTexe

@Niklan: Postępowałem zgodnie z powyższym kodem w formularzu pakietu niestandardowych jednostek. Jeśli używam {{ form }}, drukuje cały formularz, ale jeśli użyję określonego pola {{ form.my_field }}, nic się nie wyświetla. Masz pomysł, w jaki sposób możemy wyświetlić wszystkie pola niestandardowego formularza pakietu encji?

— kalidasan

@kalidasan próbuje wydrukować każde pole bez drukowania {{ form }}. Sugeruję, że po wydrukowaniu {{ form }}wszystkie elementy formularza zostaną oznaczone jako '#rendered' => TRUEi nie będą renderowane wkrótce. Jeśli nie chcesz korzystać z tej metody formularza tematycznego, musisz wydrukować każde pole osobno. Nie ma drupal_render_children()Drupala 8, chyba że sam napiszesz. W każdym razie domyślnie spowoduje to duplikaty, więc spróbuj wydrukować każde pole ręcznie.

— Niklan

@Niklan: Nie korzystałem {{ form }} & {{ form.my_field }}razem. Najpierw wypróbowałem tylko {{ form }}, tutaj mogę zobaczyć całą formę. Następnie usunięto {{ form }}z szablonu, a następnie wypróbowano dla każdego pola formularza osobno w ten sposób {{ form.my_field }}, etc , ale nie można tego zrobić. Nic się nie wyświetlało.

— kalidasan

@kalidasan możesz cofać ustawianie tytułów template_preprocess_FORM_ID_THEME(&$variables). W tym procesie wstępnym możesz dodawać nowe zmienne, zmieniać istniejące, w tym elementy formularza. Nigdy tego nie widziałem {{ form.field_name.widget }}i często formuję tematy. Wygląda na to, że to pole jest tworzone niestandardowo lub dodawane przez moduł innej firmy? Myślę, że jest to dozwolone, ale nie dotyczy innych. Polecam zacząć od haka przedprocesowego i po prostu spójrz na $variables['form']to, co zawiera.

— Niklan