Создание формы обратной связи на Winter CMS
Блог

Создание формы обратной связи на Winter CMS

В данной статье я расскажу как настроить отправку сообщений через форму обратной связи в Winter CMS. Вам не нужно будет писать логику отправку сообщений, потому что за вас это сделает плагин Magic Forms.

Плагин Magic Forms for WinterCMS позволяет создавать формы любого типа, например, для обратной связи или регистрации. Достаточно будет просто разместить html-код самой формы на странице, подключить компонент плагина и настроить его так, как вам нужно. Плагин позволяет записывать сообщения от пользователей в базу данных и выводить их в админке, а также отправлять по почте администратору сайта. А еще вы можете настроить автоматический ответ по e-mail при отправке формы, добавить капчу и многое-многое другое. Более подробную информацию о плагине можно получить на сайте разработчика плагина.

Установка плагина Magic Forms for WinterCMS

Для начала нам нужно установить плагин через Composer (что такое Composer и как при помощи него устанавливать плагины, я рассказывал в этой статье). Выполняем в терминале команду

composer require martin/wn-forms-plugin

и после завершения установки плагина выполняем вторую комманду

php artisan winter:up

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

Добавляем компонент Magic Forms на страницу

На данном этапе мы с вами будем добавлять компонент плагина на страницу сайта с формой обратной связи, поэтому предполагается, что у вас уже сверстан html-код самой формы на сайте. Важно сразу подчеркнуть, компонент добавлять нужно только на страницу с формой, либо в layout. Если вы добавите компонент плагина Magic Forms в какой-то из partials, то форма работать НЕ будет. Я не знаю с чем это связано, но работает плагин вот так.

В моем примере форма обратной связи находится в partial с формой, которая может быть расположена в любой части сайта. Поэтому компонент я добавлю в шаблон default.htm, а потом уже буду вызывать его из фрагмента формы. Чтобы добавить компонент я перехожу в раздел «CMS» → Шаблоны → default.htm → компоненты → Magic forms, и зажав левой кнопкой мыши «Стандартная Ajax форма», перетягиваю компонент в разметку шаблона.

При клике на добавленный компонент, у нас появляется окошко с настройками формы. На самом деле, настройки стандартные и достаточно простые. Здесь вы можете настроить валидацию формы, уведомления об ошибках и отправленной форме, капчу, добавить e-mail получателя сообщения с формы и т.д. На мой взгляд, здесь все интуитивно-понятно и более того у автора плагина есть документация по настройке компонента. Лежит она тут, поэтому при необходимости можете заглянуть. Я же в свою очередь заострять свое внимание на настройках компонента в данном посте не стану, и пойду дальше.

После того, как я добавил компонент в шаблон, мне необходимо с помощью данного компонента создать html-разметку формы и переопределить ею свою форму, которую я создал ранее. Делается это несложно и если вы добавили компонент на страницу правильно, то на странице у вас должен быть тег {% component ‘genericForm’ %}, как у меня на первом скрине.

Кликаем на слово component левой кнопкой мыши, затем рядом с иконкой поиска (слева от нее) кликаем по вызову этого компонента. И наш тег {% component ‘genericForm’ %} разворачивается в самую обычную контактную форму, сгенерированную Magic Forms.

Если вы хоть немного умеете в html (а я думаю так и есть, иначе вы бы вряд ли использовали в своих проектах Winter CMS), то скорее всего вам уже понятно, что надо делать дальше. Нужно просто перенести все основные атрибуты, которые отвечают за логику отправки формы, из образца в свою форму.

Как я писал ранее, компонент Magic Forms мне пришлось добавить в свой дефолтный шаблон, а вот сам код формы я вырезаю из шаблона и переношу в partial с формой. Затем вырезаю data-request=»{{ genericForm }}::onFormSubmit» из образца и вставляю в тег form своей фомы. Также я поступаю с {{ form_token() }} и со всеми остальными атрибутами: переношу айдишники и нэймы в свои инпуты. По завершении удаляю то что осталось от обгрызанной Magic Forms и сохраняю результат. Если вы все сделали правильно как и я, то при тесте формы, заявка должна прилететь в админку сайта в раздел Magic Forms.

Настраиваем отправку писем с формы обратной связи на email

Выполнить данный пункт нам будет достаточно просто, ведь отправку писем с сайта на почту берет на себя Magic Forms, нам же остается только настроить SMTP, чтобы плагин смог отправлять письма. Переходим в настройки → настройки почты → SMTP и заполняем все необходимые поля. Если у вас почта на хостинге, то данные для smtp лучше уточнить у своего хостера. Но обычно сервер исходящей почты выглядит как smtp.domain.ru, протокол шифрования SSL и SMTP порт в таком случае я обычно указываю 465. Если SMTP-сервер требует авторизацию, то указываем логин и пароль почты.

После того, как вы проделаете все вышеописанное, на вашем сайте, который сделан на Winter CMS, будет полноценная и главное функциональная форма обратной связи.


Небольшой апдейт хотелось бы внести: Во время написания статьи, плагин я настраивал на локальном сервере и на мой email форма обратной связи отправлялась без проблем. Но стоило только перезалить сайт на хостинг, как я сразу же поймал ошибку при отправки формы: «Class «Martin \ Forms \ Classes \ Mails \ Notification» does not exist» on line 53 of / vendor / winter/ storm / src / Foundation / Maker.php. Если при отправки формы у вас возникла такая же проблема, то она решается достаточно простым способом. Необходимо перейти в папку с плагином: plugins/martin затем перейти в папку classes и убрать кэмлкейс у двух папок Mails и FilePond. То есть необходимо прописать их названия строчными буквами: mails и filepond соответственно, и ошибка исчезнет.

Другие статьи
Ссылка скопирована


Спасибо, ваша заявка отправлена!
В ближайшее время с вами свяжусь.