Тема контактной формы


11

Я бы хотел создать тему для контактной формы в Drupal 8. Я хотел бы поместить элементы div вокруг элементов формы (используя bootstrap).

Я также хочу поместить некоторые классы в определенные элементы (кнопка отправки, сама форма).


2
Я предлагаю описать вашу проблему более подробно и сказать, что вы уже пробовали. Это покажет некоторую инициативу и поможет другим дать вам лучший ответ.
Арам Бояджян

Ответы:


16

Откройте файл 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';

}

И вот ваш результат: введите описание изображения здесь

Не забудьте очистить ваши кеши;)


1
Если моя тема называется «abc», а моя форма называется «свяжитесь с нами», как я называю функцию?
Дэниел Дьюхерст

3
{themename} _form_contact_message_ {formname} _form_alter
Йохан Хест

Это так здорово!
17

20

Вы можете просто тему каждой формы, как вы хотите. Мне не нравится метод @rpayanm, потому что он труден для понимания и трудно читаем, с большими формами это не так, просто одиночная оболочка и простая структура.

Каждая форма, пытающаяся использовать тему, соответствует имени машины. Вы можете найти это имя шаблона $form['#theme']просто по alter, оно всегда (или в большинстве случаев) совпадает с именем машины с идентификатором формы. Что вам нужно сделать, это зарегистрировать шаблон для него. Вам нужно реализовать hook_theme(). Вы можете написать это в CUSTOMMODULE.module или в THEMENAME.theme. Ключ темы должен быть таким же, как и в $form['#theme'], поэтому он автоматически использует его, в противном случае вам нужно добавить новый через форму alter.

/**
 * 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 переменная с формой.

Затем вы должны создать 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 извините за мой английский, надеюсь, что кто-то отредактирует и исправит мои ошибки :)

Пример сложной формы с использованием этого метода.

введите описание изображения здесь


2
Обратите внимание, что для меня, я должен был изменить {{ form.submit }}на{{ form.actions.submit }}
mikeDOTexe

@Niklan: я следовал вышеупомянутому коду для моей пользовательской формы связки сущностей. Если я использую {{ form }}, это печать всей формы. Но если я использую определенное поле, как {{ form.my_field }}, ничего не отображается. Любая идея, как мы можем отобразить каждое поле пользовательской формы пакета сущностей?
Калидасан

@kalidasan попробуйте напечатать каждое поле без печати {{ form }}. Я предлагаю после печати {{ form }}все элементы формы будут помечены как '#rendered' => TRUEи не будут отображаться в ближайшее время. Если вы не хотите использовать этот метод формы тем, вы должны печатать каждое поле отдельно. В drupal_render_children()Drupal 8 его нет, если вы не пишете это самостоятельно. В любом случае по умолчанию это приведет к дублированию, поэтому попробуйте распечатать каждое поле вручную.
Никлан

@Niklan: я не использовал {{ form }} & {{ form.my_field }}вместе. Сначала попробовал только с {{ form }}, здесь я могу видеть всю форму. Затем удалили {{ form }}из шаблона, затем попытались для каждого поля формы отдельно, как это {{ form.my_field }}, etc , но dint получить любой положить. Ничего не отображается
Калидасан

1
@kalidasan вы можете удалить заголовки в template_preprocess_FORM_ID_THEME(&$variables). В этом препроцессоре вы можете добавлять новые переменные, изменять существующие, включая элементы формы. Я никогда не видел это, {{ form.field_name.widget }}и я часто пишу формы. Похоже, это поле специально создано или добавлено сторонним модулем? Я думаю, что это разрешено, но не правило для других. Я рекомендую вам начать с препроцессора и просто посмотреть, $variables['form']что в нем содержится.
Никлан
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.