Пример: создание шаблона представления для формы обратной связи

7.14. Пример: создание шаблона представления для формы обратной связи

Теперь мы можем определить представление для нашей формы обратной связи. Если помните, ранее мы добавили шаблон представления contact-us.phtml в каталог application/index/ под каталогом модуля view/. Замените код в этом файле на следующий:

<?php
$form = $this->form;
$form->prepare();
?>

<?= $this->form()->openTag($form); ?>
	
<?= $this->formLabel($form->get('email')); ?>
<?= $this->formElement($form->get('email')); ?>
<?= $this->formElementErrors($form->get('email')); ?>                  
	
<?= $this->formLabel($form->get('subject')); ?>
<?= $this->formElement($form->get('subject')); ?>
<?= $this->formElementErrors($form->get('subject')); ?>
   
<?= $this->formLabel($form->get('body')); ?>
<?= $this->formElement($form->get('body')); ?>
<?= $this->formElementErrors($form->get('body')); ?>                  
	
<?= $this->formElement($form->get('submit')); ?>
	
<?= $this->form()->closeTag(); ?>

Как видите из фрагмента выше, для визуализации формы мы делаем следующее:

В строке 2 мы обращаемся к переменной $form, переданной от действия контроллера.
В строке 3 мы вызываем метод prepare() для подготовки формы к визуализации. Обратите внимание, что вызов этого метода крайне важен. Если вы забудете это сделать, могут возникнуть нежелательные проблемы с визуализацией.
В строке 6 мы вызываем метод openTag() помощника вида Form. Его задача - визуализировать открывающий тег <form> и его атрибуты. Этот метод принимает один аргумент -- экземпляр модели формы. Закрывающий тег </form> визуализируется в строке 22 с помощью метода closeTag().
В строках 8-10 мы визуализируем метку моля электронной почты, само поле текста и возможные ошибки валидации с помощью помощников видов FormLabel, FormElement и FormElementErrors. Эти помощники принимают в качестве единственного аргумента экземпляр элемента модели формы, который мы получаем методом get(), предоставляемым базовым классом Form.
В строках 12-24 мы аналогичным образом визуализируем поле темы письма, его метку и ошибки валидации.
Наконец, в строке 16-18 мы визуализируем метку, поле и ошибки валидации для поля области основного текста.
В строке 20 мы визуализируем кнопку отправки формы.

После исполнения этого кода визуализатором шаблона представления , мы получим следующий HTML-код:

<form action="/contact" method="post" name="contact-form">
  <label for="email">Your E-mail</label>
  <input type="text" name="email" id="email" value="">
        
  <label for="subject">Subject</label>
  <input name="subject" type="text" id="subject" value="">

  <label for="body">Message Body</label>
  <textarea name="body" id="body"></textarea>
       
  <input name="submit" type="submit" value="Submit">
</form>

Во фрагменте выше мы в основном использовали помощники видов FormElement, FormElementErrors и FormLabel. Вы можете использовать общие помощники FormRow или Form, если хотите писать меньше кода, но это может привести к снижению возможностей управления оформлением формы.

Если определенные поля имеют ошибки валидации, эти ошибки будут выведены под полем в виде неупорядоченного HTML-списка <ul>. Например, если вы введете "123@hostname" в поле формы электронной почты, вы получите следующие ошибки валидации:

<label for="email">Your E-mail</label>
<input type="text" name="email" value="123@hostname">
<ul>
  <li>&#039;hostname&#039; is not a valid hostname for the email address</li>
  <li>The input does not match the expected structure for a DNS hostname</li>
  <li>The input appears to be a local network name but local network names 
      are not allowed</li>
</ul>

7.14.1. Применение CSS-стилей Bootstrap к форме

Созданной выше HTML-разметке не хватает стилизации CSS. Мы хотим добиться привлекательного, профессионально выглядящего внешнего вида формы с помощью CSS-классов Twitter Bootstrap. Для добавления стилизации Bootstrap к форме, нужно изменить код в файле .phtml, чтобы он выглядел как показано ниже:

<?php
$form = $this->form;
$form->prepare();

$form->get('email')->setAttributes([
  'class'=>'form-control', 
  'placeholder'=>'name@example.com'
  ]);
  
$form->get('subject')->setAttributes([
  'class'=>'form-control', 
  'placeholder'=>'Type subject here'
  ]);
  
$form->get('body')->setAttributes([
  'class'=>'form-control', 
  'rows'=>6, 
  'placeholder'=>'Type message text here'
  ]);
  
$form->get('submit')->setAttributes(['class'=>'btn btn-primary']);
?>

<h1>Contact Us</h1>

<p>
  Пожалуйста, заполните следующую форму для связи с нами. 
  Мы высоко ценим ваши отзывы.
</p>

<div class="row">
  <div class="col-md-6">
    <?= $this->form()->openTag($form); ?>
        
    <div class="form-group">
      <?= $this->formLabel($form->get('email')); ?>
      <?= $this->formElement($form->get('email')); ?>
      <?= $this->formElementErrors($form->get('email')); ?>
    </div>
        
    <div class="form-group">
      <?= $this->formLabel($form->get('subject')); ?>
      <?= $this->formElement($form->get('subject')); ?>
      <?= $this->formElementErrors($form->get('subject')); ?>
    </div>
        
    <div class="form-group">
      <?= $this->formLabel($form->get('body')); ?>
      <?= $this->formElement($form->get('body')); ?>
      <?= $this->formElementErrors($form->get('body')); ?>
    </div>
        
    <?= $this->formElement($form->get('submit')); ?>
        
    <?= $this->form()->closeTag(); ?>
  </div>    
</div>

В этом фрагменте мы добавили CSS-класс .form-control к каждому полю ввода в форме. Мы сделали это методом setAttribute() (см. строки 5, 10 и 15). С помощью данного метода мы также добавили атрибут "placeholder" для определения привлекательного текста плейсхолдера, когда поле пусто. Для поля "body" мы добавили атрибут "rows", определяющий высоту поля (6 строк).

Для кнопки формы Submit мы используем CSS-классы .btn и .btn-primary (см. строку 21).

Мы помещаем пары «метка-ввод» в элементы <div> с помощью CSS-класса .form-group (строки 35, 41, 47).

Мы также помещаем форму в ячейку сетки шириной в 6 столбцов, что делает форму шириной в половину экрана.

Иногда невозможно использовать стили Twitter Bootstrap со стандартными помощниками вида ZF3 для рендеринга форм. Например, стандартные помощники вида FormCheckbox и FormRadio не могут быть использованы со стилями Bootstrap. К счастью, существует сторонний модуль neilime/zf2-twb-bundle , который вы можете установить с помощью Composer (не смущайтесь имени модуля - он вполне поддерживает ZF3). Данный модуль предоставляет удобные помощники вида для рендеринга форм ZF3 и применения к ним стилей Bootstrap. Он работает прозрачно, так что когда вы установили модуль, стандартные помощники вида ZF3 для рендеринга форм заменяются на помощники, предоставляемые модулем, то есть вам не придется менять код своих шаблонов представлений.

7.14.2. Стилизация списка ошибок валидации

По умолчанию, сообщения об ошибках на вашей форме выглядят как типичный неупорядоченный список (<ul>). Чтобы придать им приятный внешний вид, мы добавим пару CSS-правил в файл style.css в каталоге APP_DIR/public:

form ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px 5px;
}

form ul li {    
  color: red;        
}

С помощью этих CSS-правил из списка убираются маркеры, а сообщения об ошибках валидации показываются красным.

7.14.3. Добавление страниц "Thank You" и "Error Sending Email"

И наконец, последнее, что мы сделаем - подготовим шаблоны представления для страниц благодарности и ошибки отправки письма ("Thank You" и "Error Sending Email").

Добавим шаблон представления thank-you.phtml в каталог application/index/ под каталогом модуля view/ и поместим следующую HTML-разметку в файл шаблона представления:

<h1>Спасибо!</h1>

<p>
  <div class="alert alert-success">
    Мы ответим на указанный вами адрес электронной почты.
  </div>
</p>

Затем добавим файл шаблона представления send-error.phtml. HTML-разметка для страницы ошибки отправки письма представлены ниже:

<h1>Ошибка отправки письма!</h1>

<p>
  <div class="alert alert-warning">
    Возникла непредвиденная ошибка при попытке отправки
    вашего сообщения. Пожалуйста, повторите попытку позже.
  </div>
</p>

7.14.4. Результат

Поздравляем! Теперь при открытии в браузере URL "http://localhost/contactus", вы должны увидеть страницу как на рисунке 7.20.

Рисунок 7.20. Форма обратной связи

Если вы введете недействительные данные в форму и нажмете на кнопку отправки, вы должны будете увидеть ошибки валидации (рисунок 7.21).

Рисунок 7.21. Ошибки валидации формы

Ввод корректного e-mail'a, темы и текста сообщения и отправка формы приведет к отправке сообщения и отображения страницы Thank You (см. рисунок 7.22).

Рисунок 7.22. Страница благодарности

При ошибке отправке вы увидите страницу Error Sending Email (см. рисунок 7.23):

Рисунок 7.23. Страница ошибки отправки письма

Форму Contact Us можно увидеть в действии в примере Form Demo, который идет в комплекте с этой книгой.